# tab-container

## properties

1. activeIndex (value-property) : the zero based index of current active card

## example

Control the TabContainer layer by triggering events on the rectangular component

> -**Apply a click event to a square component and deliver it to TabContainers** -**If you change the value property of TabContainer, the TabCard will be changed.**

![gif][gif-01]

[gif-01]: ../images/tab-button-finish-01.gif

1. It creates TabContainer with three layers.

![tab-container][tab-container-create]

2. Text is put in each layer for distinction.

![tab-container][tab-container-text]

3. The ID of the TabContainer is designated as 'indoor'.

![tab-container][tab-container-id]

4. Add button event

- After drawing 3 squares, select 'indoor' as the variable information in the 'effect window'.
  (In the variable information, a list of IDs of basic events and components is shown.)  
  ![buttonEvent][button-02]

- Map values for each square. (When clicking the square, data of '0' is passed to the component with the 'indoor' ID.)
  - 1layer - 0
  - 2layer - 1
  - 3layer - 2

![buttonEvent][button-03]

[button-02]: ../images/button-evnet-mapping-02.png
[button-03]: ../images/button-evnet-mapping-03.png

5. TabContainer setting

- Set the data binding setting of the TabContainer component as shown in the figure below.
  (Setting to change its value property when receiving data)

![buttonEvent][tab-container-setting]

6.  check result

- If all settings are complete, you can see that the TabContainer layer changes every time you click the square as shown below.
  ![gif-01]

[gif-01]: ../images/tab-button-finish-01.gif
[tab-container-create]: ../images/tab-container-create-01.png
[tab-container-text]: ../images/tab-container-create-02.png
[tab-container-id]: ../images/tab-container-create-03.png
[tab-container-setting]: ../images/tab-container-setting-01.png
