Tabs¶
-
/libs/granite/ui/components/foundation/layouts/tabs
The tabs layout.
It has the following content structure at the layout resource:
- granite:LayoutsTabs
-
typestring
- stacked
- 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
- true
true
to add padding to each panel;false
otherwise.
-
typestring
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
- 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 totrue
, 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 whenpadding
property at the layout node is set tofalse
.
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