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.
Name | Value |
---|---|
Props | |
framed | |
View | |
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.
Content for tab1
This is the content for the First Tab
Name | Value |
---|---|
Props | |
framed | |
View | |
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.
Content for tab1
This is the content for the First Tab
Usage
Props
Prop name | Description | Type | Default |
---|---|---|---|
active (required) | The name of the currently active Tab in the layout.Provided by v-model:active binding in the parent component. | string | |
framed | Whether or not the component should be displayed in a framed visual style. | boolean | false |
Methods
Method name | Description | Signature |
---|---|---|
select | Programmatically select a tab based on its "name" prop | Params:
void |
next | Set the next tab to active, if one exists | Params:
void |
prev | Set the previous tab to active, if one exists | Params:
void |
Events
Event name | Properties | Description |
---|---|---|
update:active | active string - The name of the current active tab | Emitted whenever the active tab changes |
Slots
Name | Description | Bindings |
---|---|---|
default | One or more Tab components must be provided here |
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 requestaction="myURL"
: The value ofaction
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 aname
and avalue
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 havearia-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 correspondingtabpanel
. - 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.
WARNING
Keyboard navigation between tabs can only be done via the Tab key. Arrow keys will not work here.