Tab

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

Content for first tab

Content for second tab

NPM

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

MediaWiki

<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' );

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>

Name	Value
Props
disabled
tabName
label
Slots
default
View
Reading direction	Left to right (LTR) Right to left (RTL)

Overview

When to use Tab

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.

About Tab

Tab includes the following elements.

Label

• Limit Tab names to one or two words. Concise & Clear

• Avoid mixing verbs and nouns for the labels. Consistent & Clear

Content

Tab content appears underneath the Tab when selected, and can include any type of content or components.

Technical implementations

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.

Must be used with Tabs component

This component is only meant to be used inside the default <slot> of the <Tabs> component. It cannot be used as a standalone component. See the Tabs documentation for more information.

Props

Prop name	Description	Type	Default
name(required)	String name of the tab, used for programmatic selection. Each Tab inside a layout must have a unique name. This prop will also be used as the tab label if no "label" prop is provided.	string
label	Label that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated.	string	''
disabled	Whether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation.	boolean	false

Slots

Name	Description	Bindings
default	Tab content

CSS-only version

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