content-tabs
Tabs and accordions — single, multi, or toggle selection, paired by name or position.
Features
- Single / multi / toggle Radio-like tabs, an accordion, or re-click to close
- Pair by name or position Match headers to bodies with
tab-name, or by index when unnamed - Isolated nesting Nested
<content-tabs>groups never cross-wire - Bindable state
.provisionis{ tabType, openTabs, activeTab }— read the active tab from Quark withprop("provision") - Included looks
.underlineand.file-tabsstyles ship built in
Installation
This package is available in the
<script src="https://unpkg.com/@excom/kit-utils@0.3.0/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@excom/neutron@0.2.0/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@excom/content-tabs@0.1.5/dist/index.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@excom/content-tabs@0.1.5/dist/index.css">npm install @excom/content-tabs<!-- import path to `node_modules` will depend on your build setup -->
<script type="module" src="/node_modules/@excom/content-tabs"></script>
<link rel="stylesheet" href="/node_modules/@excom/content-tabs">import "@excom/content-tabs";@import "@excom/content-tabs/index.css";Peer dependencies (0)
Packages a consumer must install alongside this one. Workspace deps are bundled.
| Package | Version |
|---|---|
|
Usage
Put <content-tabs-header> and <content-tabs-body> elements inside
<content-tabs>. A header pairs with the body sharing its tab-name,
or by position when both are unnamed.
<content-tabs class="underline">
<content-tabs-header is-open>Overview</content-tabs-header>
<content-tabs-header>Details</content-tabs-header>
<content-tabs-body is-open><p>Overview copy.</p></content-tabs-body>
<content-tabs-body><p>Details copy.</p></content-tabs-body>
</content-tabs><content-tabs class="underline">
<content-tabs-header is-open>Overview</content-tabs-header>
<content-tabs-header>Details</content-tabs-header>
<content-tabs-body is-open><p>Overview copy.</p></content-tabs-body>
<content-tabs-body><p>Details copy.</p></content-tabs-body>
</content-tabs>The open state is a fact, not just an event: .provision holds
{ tabType, openTabs, activeTab }, where a tab is its header's tab-name
(or its index when unnamed) and activeTab is the first open one. Quark
reads it on the group and binds it anywhere below:
content-tabs {
$tab: prop("provision").activeTab;
h2 { content: $tab; }
}content-tabs {
$tab: prop("provision").activeTab;
h2 { content: $tab; }
}API Reference
Attributes
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
Provision
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
Events
Type
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements
Child or descendant elements are recognized by and relevant to its functionality.Styles
@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
content-tabs
Attributes (1)
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
tab-type
Selection mode.
single opens one header at a time (radio-like); multi allows any number open at once (accordion); toggle is like single, but re-clicking the open header closes it.
tabType
string
"single" | "multi" | "toggle""single"Provision (1)
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
provision
Open state:
{ tabType, openTabs, activeTab }. A tab is its header's tab-name, or its index among this group's own headers when unnamed; activeTab is the first open one (null when none). Set after mount and after every header change (batched with the body sync). Not reflected as an attribute.
provision
ContentTabsProvision
Events (1)
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
Type
content-tabs-header-openedContentTabsHeaderOpenedEvent
tab-type is single (default) or toggle.
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements (2)
Child or descendant elements are recognized by content-tabs and relevant to its functionality.
Panels shown / hidden to match their header.
Clickable tab headers.
Styles (10)
.file-tabs.underline
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
--content-tabs-active-indicator-height<length>2px--content-tabs-body-padding<length>{1,4}var(--v-spacing, 15px)--content-tabs-border-color<color>var(--v-muted-border-color, currentColor)--content-tabs-border-width<length>var(--v-border-width, 2px)--content-tabs-color-active<color>var(--v-color-primary, inherit)--content-tabs-header-padding<length>{1,4}10px 15px@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
:--content-tab--is-open[is-open], [aria-selected="true"]:--content-tabscontent-tabs, .tag-content-tabscontent-tabs-body
Attributes (2)
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
tab-name
Pairs this body with the
<content-tabs-header> sharing the same tab-name. Unset headers / bodies pair by position instead.
tabName
string
nullis-open
Visibility, kept in sync with the paired header's
is-open. Set directly only if this body is not paired with a header.
isOpen
boolean
falseProvision (0)
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
Events (0)
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
Type
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements (0)
Child or descendant elements are recognized by content-tabs-body and relevant to its functionality.Styles (1)
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
:--content-tabs-bodycontent-tabs-body, .tag-content-tabs-bodycontent-tabs-header
Attributes (2)
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
tab-name
Pairs this header with the
<content-tabs-body> sharing the same tab-name. Unset headers / bodies pair by position instead.
tabName
string
nullis-open
Open state. Click sets or toggles this depending on the parent's
tab-type; set it directly to drive the tab programmatically.
isOpen
boolean
falseProvision (0)
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
Events (1)
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
Type
content-tabs-header-opened
Whenever
is-open is set. The parent <content-tabs> listens for this to close sibling headers.
Type
ContentTabsHeaderOpenedEvent
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements (0)
Child or descendant elements are recognized by content-tabs-header and relevant to its functionality.Styles (1)
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
:--content-tabs-headercontent-tabs-header, .tag-content-tabs-headerRelease notes (1)
0.1.1
- Ship only dist (and declared extras) in the npm tarball; drop build logs, tests and sources
Release notes
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
Examples
File tabs
.file-tabs renders each header like a folder tab, joined to its body.
Multi-select accordion
tab-type="multi" lets any number of headers stay open — clicking one does not close the others. Also displayed are the tab headers as buttons, if using Valence.css.
Useful for building your own UI toggle systems.
Pair by tab-name
Give a header and body matching tab-name values to pair them regardless of their order in the DOM.