Tabs can be used to hide content but, unlike <drawers, one content area must always be visible. The best use for tabs is to display either/or content – where only one could apply. For example:
Instructions:
Tab Group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu elementum ligula. Aliquam tempor quam augue, sed imperdiet sem scelerisque vel. Mauris fringilla mi non velit ultricies venenatis id eget enim. Pellentesque sit amet purus ligula. Cras laoreet finibus nisl vel lobortis. Morbi sodales eros vel condimentum venenatis. Aenean ut malesuada orci, sed aliquet lacus. Mauris elementum, quam sed dictum varius, eros tortor congue ante, ut placerat dui ligula eu lectus.
Notes on Using Tabs
Tabs are created using the tabgroup and tab shortcodes. Each tab is required to have a label attribute set.
When you use tabs, pay special attention to how well your tabs work on mobile. The example above (four tabs, one word each) is about as much as you can display on a mobile device.
It also becomes difficult on a mobile device to know where the tab ends. It might be best to put your tabgroup inside a band to give it more vertical whitespace above and below.
Tabgroup Attributes
The tabgroup shortcode has no attributes.
Tab Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| label | text | Yes | The tab’s label |
Code Sample
1 2 3 4 5 6 7 8 9 10 11 12 13 | [tabgroup][tab label='Freshmen']Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu elementum ligula. Aliquam tempor quam augue, sed imperdiet sem scelerisque vel. Mauris fringilla mi non velit ultricies venenatis id eget enim. Pellentesque sit amet purus ligula. Cras laoreet finibus nisl vel lobortis. Morbi sodales eros vel condimentum venenatis. Aenean ut malesuada orci, sed aliquet lacus. Mauris elementum, quam sed dictum varius, eros tortor congue ante, ut placerat dui ligula eu lectus.[/tab][tab label='Sophomores']Donec facilisis vitae mi at lobortis. Donec id odio accumsan sem molestie aliquam a nec orci. Quisque cursus pulvinar ipsum non placerat. Proin dapibus condimentum velit, blandit sollicitudin eros posuere sed. Nam at aliquam erat. Sed non aliquet felis. Vivamus luctus ligula eu iaculis laoreet. Cras et nunc ut massa rhoncus blandit eu non ligula. Ut eros velit, posuere at bibendum eget, auctor vitae tellus. Sed a gravida tellus, non sollicitudin eros. Nunc ultrices quam sem, a efficitur felis vestibulum nec.[/tab][/tabgroup] |