Tab ​

A Tab is one of the selectable items included within Tabs.

Guidelines ​

Using tab items ​

Two or more tab items are grouped to create a Tabs component. Tab items cannot be used individually. For example, different tab items can represent the different sections of an article. A tab includes a label, which displays in the tabs list, and its associated content.

Specifications ​

Each tab item may include the following elements:

1. Text
   Currently, tab items solely consist of text elements within the tab, without the inclusion of icons or visual indicators.
2. Selected indicator
   Both quiet and framed tabs feature a visual indicator when selected. In the case of quiet tabs, this indicator is a blue line positioned below the tab text, which is also colored blue. In contrast, framed tabs use a white background behind the tab text to indicate their selected state.

A Tab will also contain the content that should display when that tab is active.

Types ​

As documented in Tabs, there are two different type of tab items depending on the tabs' style and where they are employed:

Interaction states ​

Both quiet and framed tab items have the following visually separate states:

Quiet tab item.

Framed tab item.

1. Default (unselected)
2. Hover
3. Active
4. Selected
5. Focus
6. Disabled

Content ​

Tabs allow a reader to access contained, structured content blocks that make pages easier to read. To make the UI effective and consistent, keep tab names short and descriptive.

Demos ​

Configurable example ​

The demo below allows for configuration of name, label, and disabled props, as well as slot content.

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			:name="tabName"
			:disabled="disabled"
			:label="label"
		>
			<p>
				<slot />
			</p>
		</cdx-tab>

		<cdx-tab name="tab2">
			<p>
				Content for second tab
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

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

export default defineComponent( {
	name: 'ConfigurableTabDemo',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		tabName: {
			type: String,
			required: true
		},

		disabled: {
			type: Boolean,
			default: false
		},

		label: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			currentTab: ''
		};
	},

	watch: {
		tabName( newVal, oldVal ) {
			if ( this.currentTab === oldVal ) {
				this.currentTab = newVal;
			}
		}
	},

	mounted() {
		this.currentTab = this.tabName;
	}
} );
</script>

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			:name="tabName"
			:disabled="disabled"
			:label="label"
		>
			<p>
				<slot></slot>
			</p>
		</cdx-tab>

		<cdx-tab name="tab2">
			<p>
				Content for second tab
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'ConfigurableTabDemo',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		tabName: {
			type: String,
			required: true
		},

		disabled: {
			type: Boolean,
			default: false
		},

		label: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			currentTab: ''
		};
	},

	watch: {
		tabName( newVal, oldVal ) {
			if ( this.currentTab === oldVal ) {
				this.currentTab = newVal;
			}
		}
	},

	mounted() {
		this.currentTab = this.tabName;
	}
} );
</script>

disabled

tabName

label

default

Reading direction

Vue usage ​

This component can display arbitrary content, including markup, via its default slot. The provided content is wrapped in a <section> tag and given an HTML ID.

Props ​

Slots ​

CSS-only version ​

See the Tabs page to learn how to build a CSS-only tabbed layout.