Mixins for tab components e.g. Bootstrap Nav Tabs, Python-Markdown Tabbed Extension.
| Mixin | Description |
|---|---|
.x-tabs |
container of tab elements |
.x-tabs--custom-properties |
custom properties for tab elements |
.x-tabs--focus-within |
container on interactive element focus |
.x-tabs__toggle |
interactive element that toggles visibility |
.x-tabs__tab |
a tab |
.x-tabs__tab--hover |
a tab over which user hovers |
.x-tabs__tab--active |
the tab of the visible content |
.x-tabs__tab--not-active |
a tab of not visible content |
.x-tabs__content |
content of the tabs |
.x-tabs__content--active |
visible content |
.x-tabs__content--force-active |
to force content to be visible |
<div class="x-tabs x-tabs--custom-properties">
<input class="x-tabs__toggle" type="radio">
<label class="x-tabs__tab x-tabs__tab--active">Tab (Active)</label>
<label class="x-tabs__tab x-tabs__tab--hover">Tab (Hover)</label>
<label class="x-tabs__tab x-tabs__tab--not-active">Tab (Not Active)</label>
<div class="x-tabs__content x-tabs__content--active">
<p>Content (Active)</p>
</div>
<div class="x-tabs__content">
<p>Content (Not Active)</p>
</div>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.x-tabs label {
cursor: default; /* to suggest tabs are not functional */
}
{
"shouldSkipPattern": false,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "tools",
"📝 shouldSkipPattern": "because core-styles.….css does not import this"
}