@rhelements/rh-tabs NPM

RHElements Tabs Element

Usage

<rh-tabs>
  <rh-tab role="heading" slot="tab">Tab 1</rh-tab>
  <rh-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </rh-tab-panel>
  <rh-tab role="heading" slot="tab">Tab 2</rh-tab>
  <rh-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </rh-tab-panel>
</rh-tabs>

For each rh-tab, you are responsible for setting the role="heading"and slot="tab".

For each rh-tab-panel, you are responsible for setting role="region" and slot="panel".

Slots

Default slot in rh-tabs

Place the rh-tab and rh-tab-panel elements here.

Default slot in rh-tab

Add the text for your tab here.

Default slot in rh-tab-panel

Add the content for your tab panel here.

Attributes

vertical (observed)

Orients the tabs vertically on the left and pushes the content panes to the right.

<rh-tabs vertical>
  ...
</rh-tabs>

selected-index (observed)

Sets and reflects the currently selected tab index.

<rh-tabs selected-index="2">
  ...
</rh-tabs>

Events

rh-tabs:shown-tab

Fires when a new tab is selected. The event.detail.tab will be the tab that has been selected.

rh-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 Var Hook	Description	Default
`--rh-theme--container-padding`	Tab padding and panel padding	16px
`--rh-theme--color--surface--border`	Link color for default CTA	`$rh-color--surface--border`
`--rh-theme--ui--border-style`	Border style for selected tab	solid
`--rh-theme--ui--border-width`	Border width for selected tab	1px
`--rh-theme--color--surface--lightest`	Selected tab background color	`$rh-color--surface--lightest`
`--rh-theme--color--surface--lightest--text`	Default tab text color	`$rh-color--surface--lightest--text`
`--rh-theme--color--surface--lightest--link`	Tab hover and selected indicator color	`$rh-color--surface--lightest--link`
`--rh-theme--color--surface--lightest--link--focus`	Focused tab outline color	`$rh-color--surface--lightest--link--focus`
`--rh-tabs__indicator--Display`	Tab indicator display	block
`--rh-tabs__indicator--Height`	Tab indicator height	4px
`--rh-tabs__indicator--Width`	Tab indicator width	22px
`--rh-tabs__tab--TextTransform`	Tab text transform	none

Test

npm run test

Build

npm run build

Demo

From the RHElements root directory, run:

npm start

Code style

Tabs (and all RHElements) 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.

@rhelements/rh-sass @rhelements/rhelement

@everything-registry/sub-chunk-780 @zalastax/nolb-_rh

1.0.0-prerelease.7

6 years ago

1.0.0-prerelease.6

6 years ago

0.0.1

6 years ago