Tabs

/libs/granite/ui/components/coral/foundation/tabs

The tab panel.

It has the following content structure:

granite:Tabs

1. granite:commonAttrs
2. granite:renderCondition
3. granite:container

orientationstring

1. horizontal

1. horizontal
2. vertical

The orientation of the tabs.

sizestring

1. M

1. M
2. L

The size of the tabs.

marginboolean

Put vertical margin to the root element.

maximizedboolean

Make the element maximized to fill the available space.

trackingFeaturestring

The name of the feature that the interaction takes place.

See foundation-tracking.

trackingWidgetNamestring

The name of the widget.

See foundation-tracking.

Each item at least has the following content structure:

granite:TabsItem

jcr:titlestring

mandatory

i18n

The tab title.

trackingElementstring

The element this component represent for the purpose of tracking. By default the value of jcr:title is used.

See foundation-tracking.

parentConfig

1. granite:TabsItemParentconfig

The item specific config for the parent.

granite:TabsItemParentconfig

activeboolean

Indicates if the tab is active. If no single tab’s active property is specifically set to true, then the first tab is active.

iconstring

Indicates the icon of the tab.

Example:

+ mytabs
  - sling:resourceType = "granite/ui/components/coral/foundation/tabs"
  + items
    + tab1
      - jcr:title = "Tab 1"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
    + tab2
      - jcr:title = "Tab 2"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
      + parentConfig
        - active = true