Tabs are rendered using several macros:
<@row> <@columns> <@box> <@boxHeader title='Box with tabs' /> <@boxBody> <@tabs> <@tabList> <@tabLink href='#tab0' active=true title='Tab 0' /> <@tabLink href='#tab1' title='Tab 1' /> <@tabLink href='#tab2' title='Tab 2' /> </@tabList> <@tabContent> <@tabPanel id='tab0' active=true> <p>Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.</p> <p>Nulla eget mi sagittis, posuere magna in, tempor lectus.</p> </@tabPanel> <@tabPanel id='tab1' active=false> <p>Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.</p> <p>Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.</p> </@tabPanel> <@tabPanel id='tab2' active=false> <p>Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.</p> <p>Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.</p> </@tabPanel> </@tabContent> </@tabs> </@boxBody> </@box> </@columns> </@row>
<@row> <@columns> <@box> <@boxHeader title='Box with horizontal tabs' /> <@boxBody> <@tabs style='pills'> <@tabList> <@tabLink href='#tab3' active=true title='Tab 0' /> <@tabLink href='#tab4' title='Tab 1' /> <@tabLink href='#tab5' title='Tab 2' /> </@tabList> <@tabContent> <@tabPanel id='tab3' active=true> <p>Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.</p> <p>Nulla eget mi sagittis, posuere magna in, tempor lectus.</p> </@tabPanel> <@tabPanel id='tab4' active=false> <p>Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.</p> <p>Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.</p> </@tabPanel> <@tabPanel id='tab5' active=false> <p>Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.</p> <p>Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.</p> </@tabPanel> </@tabContent> </@tabs> </@boxBody> </@box> </@columns> </@row>
<@row> <@columns> <@box> <@boxHeader title='Box with vertical tabs' /> <@boxBody> <@tabs style='pills'> <@row> <@columns sm=2> <@tabList vertical=true> <@tabLink href='#tab6' active=true title='Tab 0' /> <@tabLink href='#tab7' title='Tab 1' /> <@tabLink href='#tab8' title='Tab 2' /> </@tabList> </@columns> <@columns sm=10> <@tabContent> <@tabPanel id='tab6' active=true> <p>Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.</p> <p>Nulla eget mi sagittis, posuere magna in, tempor lectus.</p> </@tabPanel> <@tabPanel id='tab7' active=false> <p>Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.</p> <p>Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.</p> </@tabPanel> <@tabPanel id='tab8' active=false> <p>Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.</p> <p>Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.</p> </@tabPanel> </@tabContent> </@columns> </@row> </@tabs> </@boxBody> </@box> </@columns> </@row>
Tabs can also be used by themselves as a page or section container.
In this example, we're using icons on tab links.
<@row> <@columns> <@tabs> <@tabList> <@tabLink href='#tab9' active=true title='Tab 0' tabIcon='archway' /> <@tabLink href='#tab10' title='Tab 1' tabIcon='balance-scale' /> <@tabLink href='#tab11' title='Tab 2' tabIcon='book' /> </@tabList> <@tabContent> <@tabPanel id='tab9' active=true> <p>Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.</p> <p>Nulla eget mi sagittis, posuere magna in, tempor lectus.</p> </@tabPanel> <@tabPanel id='tab10'> <p>Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.</p> <p>Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.</p> </@tabPanel> <@tabPanel id='tab11'> <p>Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.</p> <p>Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.</p> </@tabPanel> </@tabContent> </@tabs> </@columns> </@row>
Parameter | Value | Default |
---|---|---|
color | string | - |
class | string | - |
id | string | - |
hide | sequence | - |
collapsed | boolean | false |
params | string | - |