Tabsv1
Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.
Examples
Standard
Tabs with three tab panels with each tab panel being a layout container.
- Tab 1
- Tab 2
- Tab 3
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
- Tab 1
- Tab 2
- Tab 3
Sample Content
Tabs with three tab panels with each tab panel being a layout container and containing sample content.
- Tab 1
- Tab 2
- Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
- Tab 1
- Tab 2
- Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Default Active Item
Tabs with three tab panels with the default active item being the third tab.
- Tab 1
- Tab 2
- Tab 3
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
- activeItem: item_1544184936449
- Tab 1
- Tab 2
- Tab 3
Nested
Nested tabs structure with each tab panel containing a tabs component in its layout container.
- Tab 1
- Tab 2
- Tab 3
- Tab 1.1
- Tab 1.2
- Tab 1.3
- Tab 2.1
- Tab 2.2
- Tab 2.3
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.
- Tab 3.1
- Tab 3.2
- Tab 3.3
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
- Tab 1
- Tab 2
- Tab 3
- Tab 1.1
- Tab 1.2
- Tab 1.3
- Tab 2.1
- Tab 2.2
- Tab 2.3
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.
- Tab 3.1
- Tab 3.2
- Tab 3.3
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Deep Linking
Linking to a tabs item displays the item and scrolls to it.