Tabs ​

A layout for navigating between sections of content.

One or more <Tab> components must be provided in the default slot of the <Tabs> component. Each child <Tab> component must have a name property. The <Tabs> component must have an active prop which matches the name of one of the child <Tab> components in the slot.

In order for the active tabs to change, the name of the active tab must be bound in the parent somehow, either using v-model:active or by manually binding the active prop and listening for update:active events.

Demos ​

Basic Example ​

Two stylistic variants are available, quiet (the default) and framed.

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<!-- Tab content -->
			<h2>{{ tab.heading }}</h2>

			<template v-if="tab.name === 'read'">
				<p>
					The <b>sand cat</b> (<i>Felis margarita</i>), also known as
					the <b>sand dune cat</b>, is a small wild
					<a href="#" title="Felis">cat</a> that inhabits
					sandy and stony <a href="#" title="Desert">deserts</a>
					far from water sources. With its sandy to light grey fur, it
					is well camouflaged in a desert environment.
				</p>
			</template>
			<template v-if="tab.name === 'source'">
				<code>
					The '''sand cat''' (''Felis margarita''), also known as the
					'''sand dune cat''', is a small wild [[Felis|cat]] that
					inhabits sandy and stony [[deserts]] far from water sources.
					With its sandy to light grey fur, it is well camouflaged in
					a desert environment.
				</code>
			</template>
			<template v-if="tab.name === 'history'">
				<h3>Revisions</h3>
				<ul>
					<li>Revision 3</li>
					<li>Revision 2</li>
					<li>Revision 1</li>
				</ul>
			</template>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
import { CdxTabs, CdxTab } from '@wikimedia/codex';
import { defineComponent } from 'vue';

export default defineComponent( {
	name: 'BasicTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData: [ {
				name: 'read',
				label: 'Read',
				heading: 'Sand cat'
			}, {
				name: 'source',
				label: 'View source',
				heading: 'View source for Sand cat'
			}, {
				name: 'history',
				label: 'View history',
				heading: 'Sand cat: Revision history'
			} ],

			currentTab: 'read'
		};
	}
} );
</script>

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<!-- Tab content -->
			<h2>{{ tab.heading }}</h2>

			<template v-if="tab.name === 'read'">
				<p>
					The <b>sand cat</b> (<i>Felis margarita</i>), also known as
					the <b>sand dune cat</b>, is a small wild
					<a href="#" title="Felis">cat</a> that inhabits
					sandy and stony <a href="#" title="Desert">deserts</a>
					far from water sources. With its sandy to light grey fur, it
					is well camouflaged in a desert environment.
				</p>
			</template>
			<template v-if="tab.name === 'source'">
				<code>
					The '''sand cat''' (''Felis margarita''), also known as the
					'''sand dune cat''', is a small wild [[Felis|cat]] that
					inhabits sandy and stony [[deserts]] far from water sources.
					With its sandy to light grey fur, it is well camouflaged in
					a desert environment.
				</code>
			</template>
			<template v-if="tab.name === 'history'">
				<h3>Revisions</h3>
				<ul>
					<li>Revision 3</li>
					<li>Revision 2</li>
					<li>Revision 1</li>
				</ul>
			</template>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

// @vue/component
module.exports = defineComponent( {
	name: 'BasicTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData: [ {
				name: 'read',
				label: 'Read',
				heading: 'Sand cat'
			}, {
				name: 'source',
				label: 'View source',
				heading: 'View source for Sand cat'
			}, {
				name: 'history',
				label: 'View history',
				heading: 'Sand cat: Revision history'
			} ],

			currentTab: 'read'
		};
	}
} );
</script>

framed

Reading direction

Header row scroll ​

When the width of the header row exceeds the width of its container, arrow buttons will appear to enable scrolling through tab names.

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
			:disabled="tab.disabled"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
import { CdxTabs, CdxTab } from '@wikimedia/codex';
import { defineComponent } from 'vue';

const tabsData = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab with a really really really really long name'
}, {
	name: 'tab3',
	label: 'Third Tab'
}, {
	name: 'tab4',
	label: 'Fourth Tab',
	disabled: true
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

export default defineComponent( {
	name: 'ManyTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData,
			currentTab: 'tab1'
		};
	}
} );
</script>

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
			:disabled="tab.disabled"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

const tabsData = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab with a really really really really long name'
}, {
	name: 'tab3',
	label: 'Third Tab'
}, {
	name: 'tab4',
	label: 'Fourth Tab',
	disabled: true
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

// @vue/component
module.exports = defineComponent( {
	name: 'ManyTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData,
			currentTab: 'tab1'
		};
	}
} );
</script>

framed

Reading direction

Dynamic replacement of slot content ​

The Tabs component will re-render if the provided slot content changes. Clicking the button below will replace the initial tabs with a new set; the header row will update to match.

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>

	<cdx-button @click="swapTabs">
		Swap out tabs
	</cdx-button>
</template>

<script>
import { CdxTabs, CdxTab, CdxButton } from '@wikimedia/codex';
import { defineComponent } from 'vue';

const firstSetOfTabs = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab'
}, {
	name: 'tab3',
	label: 'Third Tab'
} ];

const secondSetOfTabs = [ {
	name: 'tab4',
	label: 'Fourth Tab'
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

export default defineComponent( {
	name: 'DynamicallyGeneratedTabs',
	components: {
		CdxTabs,
		CdxTab,
		CdxButton
	},
	data() {
		return {
			tabsData: firstSetOfTabs,
			currentTab: 'tab1'
		};
	},

	methods: {
		swapTabs() {
			if ( this.tabsData[ 0 ].name === 'tab1' ) {
				this.tabsData = secondSetOfTabs;
			} else {
				this.tabsData = firstSetOfTabs;
			}

			this.currentTab = this.tabsData[ 0 ].name;
		}
	}
} );
</script>

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>

	<cdx-button @click="swapTabs">
		Swap out tabs
	</cdx-button>
</template>

<script>
const { CdxTabs, CdxTab, CdxButton } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

const firstSetOfTabs = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab'
}, {
	name: 'tab3',
	label: 'Third Tab'
} ];

const secondSetOfTabs = [ {
	name: 'tab4',
	label: 'Fourth Tab'
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

// @vue/component
module.exports = defineComponent( {
	name: 'DynamicallyGeneratedTabs',
	components: {
		CdxTabs,
		CdxTab,
		CdxButton
	},
	data() {
		return {
			tabsData: firstSetOfTabs,
			currentTab: 'tab1'
		};
	},

	methods: {
		swapTabs() {
			if ( this.tabsData[ 0 ].name === 'tab1' ) {
				this.tabsData = secondSetOfTabs;
			} else {
				this.tabsData = firstSetOfTabs;
			}

			this.currentTab = this.tabsData[ 0 ].name;
		}
	}
} );
</script>

Usage ​

Props ​

Methods ​

Events ​

Slots ​

CSS-only version ​

Markup structure ​

The non-JS version of the Tabs component should be seen as a navigational tool. It relies on HTML form submission to trigger a change in the current active tab. When the user clicks on a tab button (or hits "Enter" while focused over one), the browser will load a new page.

Basic setup: ​

• The outermost element should be a <div> element with the class "cdx-tabs".
• The cdx-tabs__header element should be a <form> with the following attributes:
  • method="get": we will send the form with a GET request
  • action="myURL": The value of action should be whatever URL the form data will be sent to; in this example it's simply the same URL as the page, but appended with a different URL query parameter based on the user's tab selection. In a real-world use-case, this might be a URL that can accept query parameters (say for performing a different kind of search based on which tab the user selects).
• Within the tablist element, every tab label is represented by a <button> element (this is the same as in the Vue version). However, since we are submitting the data as a form, each tab button must contain a name and a value attribute. In a real application, this might correspond to key-value pairs used for a given query parameter.
• The tab corresponding to the current view should contain the aria-selected="true" attribute. All other tabs should have aria-selected="false". If you are using a server-side templating language like Mustache, this should be set there.
• Each tab should also have an aria-controls attribute with a value of the ID of the corresponding tabpanel.
• Don't mess with <button> tabindex – since the CSS-only version of this component has no way to bind left and right arrow keys to handler methods, the user is going to need to rely on the mouse or the tab key to navigate between tabs.
• To disable a tab, simply add a disabled attribute to that tab's <button> in the tablist.

The tabs below have long labels, making the tab list too long for its container. When this happens, you can horizontally scroll to reach the rest of the tabs list.

<!-- Wrapper div. -->
	<div class="cdx-tabs">
		<!-- Header with tab buttons -->
		<form class="cdx-tabs__header" method="get" action="">
			<!-- List of tabs. -->
			<div class="cdx-tabs__list" tabindex="-1" role="tablist">
				<!-- Tab list item. -->
				<button
					id="form-tabs-1-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-1"
					value="form-tabs-1"
					name="tab"
				>
					Tab number one
				</button>
				<button
					id="form-tabs-2-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-2"
					value="form-tabs-2"
					name="tab"
				>
					Tab number two with a longer label
				</button>
				<button
					id="form-tabs-3-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-3"
					value="form-tabs-3"
					name="tab"
					disabled
				>
					Tab number three
				</button>
				<button
					id="form-tabs-4-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-4"
					value="form-tabs-4"
					name="tab"
				>
					Tab number four
				</button>
			</div>
		</form>
		<!-- Tabs. -->
		<div class="cdx-tabs__content">
			<!-- <section> element for each tab, with any content inside. -->
			<section
				id="form-tabs-1"
				aria-hidden="true"
				aria-labelledby="form-tabs-1-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 1 content
			</section>
			<section
				id="form-tabs-2"
				aria-hidden="true"
				aria-labelledby="form-tabs-2-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 2 content
			</section>
			<section
				id="form-tabs-3"
				aria-hidden="true"
				aria-labelledby="form-tabs-3-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 3 content
			</section>
			<section
				id="form-tabs-4"
				aria-hidden="true"
				aria-labelledby="form-tabs-4-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 4 content
			</section>
		</div>
	</div>