Tabs

processed with Commons Bootstrap 4.3 + Material Kit

---

Tabs are rendered using several macros:

• macro tabs: the global container
• macro tabList: the container of the tabs list
• macro tabLink: a link to each tab
• macro tabContent: the container of the panels
• macro tabPanel: the panel associated to each tab

Tabs inside a box

---

Tabs bar

---

<@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>

Tabs pills

---

Horizontal tabs

---

<@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>

Vertical tabs

---

<@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 container (without box)

---

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>

# Parameters documentation

---

Tabs

---