<commit_before>---
layout: default
title: deliteful/ViewStack
---

# deliteful/ViewStack

`deliteful/ViewStack` is a container that has multiple children, but shows only one child at a time. Moving from one child to another is accomplished via a transition.

The transition types are described in the following picture:
 1. Slide (reverse=false)
 2. Reveal (reverse=false)
 3. Flip
 4. Fade

![ViewStack Transitions](images/ViewStack.png)

##### Table of Contents
[Element Instantiation](#instantiation)
[Element Configuration](#configuration)
[Element Styling](#styling)
[Enteprise Use](#enterprise)

<a name="instantiation"></a>
## Element Instantiation

See [`delite/Widget`](/delite/docs/Widget) for full details on how instantiation lifecycle is working.

### Declarative Instantiation

```js
require(["delite/register", "deliteful/ViewStack", "dojo/domReady!"], function (register) {
  register.parse();
});
```

```html
<html>
  <d-view-stack style="width:100%, height:200px">
    <div style="background-color: darkblue">Child 1 (Default visible child)</div>
    <div style="background-color: white">Child 2</div>
    <div style="background-color: crimson">Child 3</div>
  </d-view-stack>
</html>
```

### Programmatic Instantiation

```js
require(["deliteful/ViewStack", "dojo/domReady!"], function (ViewStack) {
  var vs = new ViewStack({width:"100%, height: 200px"});
  var child1 = document.createElement("div");
  var child2 = document.createElement("div");
  var child3 = document.createElement("div");
  vs.addChild(child1);
  vs.addChild(child2);
  vs.addChild(child3);
  vs.placeAt(document.body);
  vs.startup();
});
```


## Element Configuration

`deliteful/ViewStack` support `delite` display infrastructure by inheriting from `delite/DisplayContainer`. For more informations, see [`delite/DisplayContainer`](/delite/docs/DisplayContainer) documentation.

### Displaying a child

To display a child of the container, call the `show` method.
Example:
````js
  vs.show(child2, {transition: "reveal", reverse: true});

```

The `show` method takes as first argument a DOM node instance or id. The second argument is optional. Available properties are `transition` and\or `reverse`.

The `reverse` property applies only to Slide and Reveal transitions.

Set `transition` to `"none"` for disabling animated transition.

### Properties

If `show` method is called without a second argument, the transition is controlled by the `transition` and `reverse` properties.
Default values are `{transition: "slide", reverse: false}`.

## Element Styling

`deliteful/ViewStack` has no visual appearance, it does not provide any CSS class for styling.


### Styling Limitations

The following CSS layout attributes must **NOT** be changed. They are explicitly set by the container and are required for a correct behaviour of it.
 - ViewStack node:  `position`, `box-sizing`, `overflow-x`
 - ViewStack children:  `position`, `box-sizing`, `width`, `height`

<a name="enterprise"></a>
## Enterprise Use

### Accessibility

Rely on browser.

### Globalization

`deliteful/ViewStack` does not provide any internationalizable bundle.

Right to left orientation is supported by setting the `dir` attribute to `rtl`on the `deliteful/ViewStack` element. It affects Slide and Reveal transitions.

### Security

This widget as no specific security concern. Refers to `delite/Widget` documentation for general security advices on this base class that `deliteful/ViewStack` is using.

### Browser Support

This widget supports all supported browsers.
<commit_msg>More containers documentation<commit_after>---
layout: default
title: deliteful/ViewStack
---

# deliteful/ViewStack

`deliteful/ViewStack` is a container that has multiple children, but shows only one child at a time. Moving from one child to another is accomplished via a transition.

The transition types are described in the following picture:
 1. Slide (reverse=false)
 2. Reveal (reverse=false)
 3. Flip
 4. Fade

![ViewStack Transitions](images/ViewStack.png)

##### Table of Contents
[Element Instantiation](#instantiation)
[Element Configuration](#configuration)
[Element Styling](#styling)
[Enteprise Use](#enterprise)

<a name="instantiation"></a>
## Element Instantiation

See [`delite/Widget`](/delite/docs/Widget) for full details on how instantiation lifecycle is working.

### Declarative Instantiation

```js
require(["delite/register", "deliteful/ViewStack", "dojo/domReady!"], function (register) {
  register.parse();
});
```

```html
<html>
  <d-view-stack style="width:100%, height:200px">
    <div style="background-color: darkblue">Child 1 (Default visible child)</div>
    <div style="background-color: white">Child 2</div>
    <div style="background-color: crimson">Child 3</div>
  </d-view-stack>
</html>
```

### Programmatic Instantiation

```js
require(["deliteful/ViewStack", "dojo/domReady!"], function (ViewStack) {
  var vs = new ViewStack({width:"100%, height: 200px"});
  var child1 = document.createElement("div");
  var child2 = document.createElement("div");
  var child3 = document.createElement("div");
  vs.addChild(child1);
  vs.addChild(child2);
  vs.addChild(child3);
  vs.placeAt(document.body);
  vs.startup();
});
```


## Element Configuration

`deliteful/ViewStack` support `delite` display infrastructure by inheriting from `delite/DisplayContainer`. For more informations, see [`delite/DisplayContainer`](/delite/docs/DisplayContainer) documentation.

### Displaying a child

To display a child of the container, call the `show` method.
Example:
````js
  vs.show(child2, {transition: "reveal", reverse: true});

```

The `show` method takes as first argument a DOM node instance or id. The second argument is optional. Available properties are `transition` and\or `reverse`.

The `reverse` property applies only to Slide and Reveal transitions.

Set `transition` to `"none"` for disabling animated transition.

### Properties

If `show` method is called without a second argument, the transition is controlled by the `transition` and `reverse` properties.
Default values are `{transition: "slide", reverse: false}`.

## Element Styling

`deliteful/ViewStack` has no visual appearance, it does not provide any CSS class for styling.


### Styling Limitations

The `position` CSS attribute of this element must be set to `block` or `inline-block`.

The following CSS layout attributes must **NOT** be changed. They are explicitly set by the container and are required for a correct behaviour of it.
 - ViewStack node:  `box-sizing`, `overflow-x`
 - ViewStack children:  `position`, `box-sizing`, `width`, `height`

<a name="enterprise"></a>
## Enterprise Use

### Accessibility

Rely on browser.

### Globalization

`deliteful/ViewStack` does not provide any internationalizable bundle.

Right to left orientation is supported by setting the `dir` attribute to `rtl`on the `deliteful/ViewStack` element. It affects Slide and Reveal transitions.

### Security

This widget as no specific security concern. Refers to `delite/Widget` documentation for general security advices on this base class that `deliteful/ViewStack` is using.

### Browser Support

This widget supports all supported browsers.

{'fraction_non_alphanumeric': 0.12204943071369063, 'fraction_numerical': 0.007220216606498195, 'mean_word_length': 5.193465176268272, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6390948', 'n_tokens_mistral': 2130, 'n_tokens_neox': 2025, 'n_words': 753}