mirror of
https://github.com/bitwarden/clients.git
synced 2025-12-05 19:17:06 -06:00
42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
|
|
|
|
import * as stories from "./tabs.stories";
|
|
import * as dialogStories from "../dialog/dialog/dialog.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
# Tabs
|
|
|
|
The tab navigation and content tabs share the same styling. The tab navigation uses links to
|
|
navigate between pages, whereas the tab list uses `<buttons>` to toggle content on a single page.
|
|
|
|
Tabs should be displayed on the `background-alt` color, with their content area set to background
|
|
and 1rem of padding on the left and right.
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Content Tabs
|
|
|
|
<Canvas of={stories.ContentTabs} />
|
|
|
|
## Navigation Tabs
|
|
|
|
<Canvas of={stories.NavigationTabs} />
|
|
|
|
## Content tabs in dialogs
|
|
|
|
Tabs can be used in dialogs to separate related content.
|
|
|
|
<Canvas of={dialogStories.TabContent} />
|
|
|
|
## Accessibility
|
|
|
|
**Navigation tabs** are implemented using the `<nav>` element and `<a>` for each tab.
|
|
|
|
**Content tabs** should be implemented with the `tablist` role and:
|
|
|
|
- Use `<button>` for the tab elements
|
|
- Set `aria-selected` for each tab; “true” for selected and “false” for unselected
|
|
- See WCAG for more: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
|