PFElements Tabs Element
Usage
<pfe-tabs>
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 1</h2>
<p>Tab 1 panel content.</p>
</pfe-tab-panel>
<pfe-tab role="heading" slot="tab">Tab 2</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 2</h2>
<p>Tab 2 panel content.</p>
</pfe-tab-panel>
</pfe-tabs>
For each pfe-tab
, you are responsible for setting the role="heading"
and
slot="tab"
.
For each pfe-tab-panel
, you are responsible for setting role="region"
and
slot="panel"
.
Slots
Default slot in pfe-tabs
Place the pfe-tab
and pfe-tab-panel
elements here.
Default slot in pfe-tab
Add the heading for your tab here.
Default slot in pfe-tab-panel
Add the content for your tab panel here.
Attributes
variant
(observed)
Possible values are:
-
wind
: Borders are removed, only an accent colored indicator appears under the active heading. -
earth
: Headings are encased in a block. The active heading has an accent colored border on one side.
- Note - when using earth with a white background you should set the padding-left, padding-right, and padding-bottom to 0, so it lines up with the wind variant.
<pfe-tabs variant="wind">
...
</pfe-tabs>
vertical
(observed)
Orients the tabs vertically on the left and pushes the content panes to the right.
<pfe-tabs vertical>
...
</pfe-tabs>
selected-index
(observed)
Sets and reflects the currently selected tab index.
<pfe-tabs selected-index="2">
...
</pfe-tabs>
context
(observed)
Changes the context of the call-to-action to one of 3 possible options:
-
light
(default) dark
saturated
This will override any context being passed from a parent component and will add a style attribute setting the --context
variable.
tab-history
(observed)
Updates window.history and the URL to create sharable links. With the
tab-history
attribute, the tabs and each tab must have an id
.
The URL pattern will be ?{id-of-tabs}={id-of-selected-tab}
. In the example
below, selecting "Tab 2" will update the URL as follows: ?my-tabs=tab2
.
<pfe-tabs tab-history id="my-tabs">
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 1</h2>
<p>Tab 1 panel content.</p>
</pfe-tab-panel>
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 2</h2>
<p>Tab 2 panel content.</p>
</pfe-tab-panel>
</pfe-tabs>
Note: This feature is not supported in IE11.
Using the URL to open a specific tab
By default, pfe-tabs
will read the URL and look for a query string parameter
that matches the id of a pfe-tabs
component and a value of a specific
pfe-tab
.
For example, ?my-tabs=tab2
would open the second tab in the code sample below.
"my-tabs" is equal to the id of the pfe-tabs
component and "tab2" is equal to
the id of the second tab in the tab set.
<pfe-tabs id="my-tabs">
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 1</h2>
<p>Tab 1 panel content.</p>
</pfe-tab-panel>
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
<pfe-tab-panel role="region" slot="panel">
<h2>Content 2</h2>
<p>Tab 2 panel content.</p>
</pfe-tab-panel>
</pfe-tabs>
In the event that a tab with the supplied id in the URL does not exist,
pfe-tabs
will fall back to the selected-index
attribute if one is supplied
in the markup, or the first tab if selected-index
is not provided.
Note: This feature is not supported in IE11.
Events
pfe-tabs:shown-tab
Fires when a new tab is selected. The event.detail.tab
will be the tab that has been selected.
pfe-tabs:hidden-tab
Fires when a selected tab is no longer the selected tab. The event.detail.tab
will be the tab that is no longer selected.
Styling
Theme hook | Description | Default |
---|---|---|
--pfe-tabs--Display |
block | |
--pfe-tabs--Padding |
Tab padding and panel padding | 0 |
--pfe-tabs__tabs--FlexDirection |
row | |
--pfe-tabs__tabs--Width |
auto | |
--pfe-tabs__tabs--Padding |
0 | |
--pfe-tabs__tabs--BorderTop |
0 | |
--pfe-tabs__tabs--BorderRight |
0 | |
--pfe-tabs__tabs--BorderLeft |
0 | |
--pfe-tabs__tabs--BorderColor |
var(--pfe-theme--color--surface--border, #d2d2d2) | |
--pfe-tabs__tabs--BorderBottom |
var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs__tabs--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2)) | |
--pfe-tabs__panels--Width |
auto | |
--pfe-tabs--BackgroundColor |
transparent | |
--pfe-tabs--BackgroundColor--inactive |
var(--pfe-theme--color--surface--lighter, #f0f0f0) | |
--pfe-tabs--Color |
Default tab text color | var(--pfe-theme--color--text--muted, #6a6e73) |
--pfe-tabs--BorderColor--hover |
#b8bbbe | |
--pfe-tabs--BorderWidth |
var(--pfe-theme--ui--border-width--active, 3px) | |
--pfe-tabs__tab--FontSize |
var(--pfe-theme--font-size, 1rem) | |
--pfe-tabs__tab--Margin |
0 0 calc( var(--pfe-theme--ui--border-width, 1px) * -1) | |
--pfe-tabs__tab--PaddingTop |
var(--pfe-theme--container-padding, 1rem) | |
--pfe-tabs__tab--PaddingBottom |
var(--pfe-theme--container-padding, 1rem) | |
--pfe-tabs__tab--PaddingRight |
calc(var(--pfe-theme--container-padding, 1rem) * 2) | |
--pfe-tabs__tab--PaddingLeft |
calc(var(--pfe-theme--container-padding, 1rem) * 2) | |
--pfe-tabs__tab--TextTransform |
none | |
--pfe-tabs--Color--focus |
var(--pfe-tabs--focus, var(--pfe-theme--color--text, #151515)) | |
--pfe-tabs--highlight |
Border style for selected tab | var(--pfe-theme--color--ui-accent, #06c) |
--pfe-tabs--BorderColor |
Border style for selected tab | var(--pfe-tabs--highlight, var(--pfe-theme--color--ui-accent, #06c)) |
--pfe-tabs--focus |
var(--pfe-theme--color--link, #06c) | |
--pfe-tabs__panel--BackgroundColor |
transparent | |
--pfe-tabs__panel--Padding |
var(--pfe-theme--container-spacer, 1rem) | |
--pfe-tabs__panel--BorderTop |
0 | |
--pfe-tabs__panel--BorderRight |
0 | |
--pfe-tabs__panel--BorderBottom |
0 | |
--pfe-tabs__panel--BorderLeft |
0 |
Test
npm run test
Build
npm run build
Demo
From the PFElements root directory, run:
npm start
Code style
Tabs (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.