Tabs

/libs/granite/ui/components/foundation/layouts/tabs

The tabs layout.

It has the following content structure at the layout resource:

granite:LayoutsTabs

typestring

1. stacked
2. large

The layout mode of the tabs.

default

If the property is not specified, it is in default mode, where tab area is above the panel area. This is designed to divide pieces of content within a page.

stacked

The tab area is side-by-side with the panel area. This is designed to divide pieces of content within a page.

large

Similar to default mode, but larger. This is designed to divide pages.

paddingboolean

1. true

true to add padding to each panel; false otherwise.

Each tab can be any component, and specified using ItemDataSource. It also needs at very least satisfies the following content structure:

granite:LayoutsTabsTab

jcr:titlestring

mandatory

i18n

The tab title.

layoutConfig

1. granite:LayoutsTabsTabLayoutconfig

The item specific config for the layout.

granite:LayoutsTabsTabLayoutconfig

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.

paddingboolean

true to add padding for the panel. This property only makes sense when padding property at the layout node is set to false.

Example:

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