Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 21:27:06 +04:00
Code Issues Projects Releases Wiki Activity
Files
docs-markdown-tables
tabler/docs/content/ui/components/tab.mdx
T

240 lines
9.9 KiB
Plaintext
Raw Permalink Blame History

---
title: Tab
summary: Tabs switch between related views in the same place on the page. They can hold icons, a dropdown or fill the full width.
description: Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.
related: [/ui/layout/navs-tabs]
source: core/scss/ui/_nav.scss
classnames:
component:
- class: nav-tabs
desc: Applied with nav, styles the triggers as tabs
part:
- class: nav-link
desc: One tab trigger; needs role="tab" and aria-controls
- class: tab-content
desc: Wrapper around the panels
- class: tab-pane
desc: One panel; needs role="tabpanel"
style:
- class: nav-underline
desc: Underline marker instead of a filled tab
- class: nav-bordered
desc: Bordered tab style
modifier:
- class: nav-fill
desc: Spreads the tabs across the full width
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';
## Default markup
The default tabs highlight the current one. Each tab trigger points at a panel, and Bootstrap shows one panel at a time.
<Example>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex1">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex1">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
</div>
</div>
</div>
</Example>
## Tabs with icons
An [icon](/ui/components/icon) in the tab label makes tabs easier to tell apart when the labels are similar.
<Example>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"> <Icon name="home" class="me-2" /> Home </a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"> <Icon name="user" class="me-2" /> Profile </a>
</li>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex2">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex2">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-settings-ex2">
<h4>Settings tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>
</Example>
## Tabs only with icons
Tabs with only an icon save space. Give each one an `aria-label`, because there's no text to read.
<Example>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab">
<Icon name="home" />
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"><Icon name="user" /></a>
</li>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab">
<Icon name="settings" />
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex3">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex3">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-settings-ex3">
<h4>Settings tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>
</Example>
## Tabs with dropdown
A tab can open a [dropdown](/ui/components/dropdown) with more views, so a long row of tabs stays short.
<Example>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex4">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex4">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
</div>
</div>
</div>
</Example>
## Full-width tabs
Add the `.nav-fill` class to make the tabs take up the full space of the parent element.
<Example>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab">
<Icon name="home" />
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"><Icon name="user" /></a>
</li>
<li class="nav-item">
<a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab">
<Icon name="activity" />
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex5">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex5">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-activity-ex5">
<h4>Activity tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>
</Example>
## JavaScript
Tabler activates the tab that matches the URL hash on page load, so you can link to a specific tab. This is the code that runs:
<CodeDocs name="tab-init" file="core/js/src/tab.ts" />
## Accessibility
- Wrap the tabs in an element with `role="tablist"`, give each trigger `role="tab"` and each panel `role="tabpanel"`, and link them with `aria-controls` and `aria-labelledby`.
- Bootstrap sets `aria-selected` and moves focus with the arrow keys, but only when the roles above are present. Without them the tabs are plain links.
- Tabler activates a tab from the url hash on page load, so a tab trigger with `href="#billing"` doubles as a deep link. Keep the panel ids stable if you link to them.
- Only the active panel should be reachable. Bootstrap hides the others with `display: none`, which also removes them from the tab order.
Reference in new issue View Git Blame Copy Permalink