Tabs
<nav id="simulate-nav" aria-labelledby="simulate-nav-heading">
<h3 id="simulate-nav-heading">Navigate to tab</h3>
<ul>
<li><a href="#north">North tab</a></li>
<li><a href="#south">South tab</a></li>
<li><a href="#east">East tab</a></li>
<li><a href="#west">West tab</a></li>
<li><a href="#best">Content inside the West tab</a></li>
</ul>
</nav>
<rh-tabs>
<rh-tab slot="tab" id="north" ssr-hint-has-slotted-default="">North</rh-tab>
<rh-tab-panel>The North</rh-tab-panel>
<rh-tab slot="tab" id="south" ssr-hint-has-slotted-default="">South</rh-tab>
<rh-tab-panel>The South</rh-tab-panel>
<rh-tab slot="tab" id="east" ssr-hint-has-slotted-default="">East</rh-tab>
<rh-tab-panel>The East</rh-tab-panel>
<rh-tab slot="tab" id="west" ssr-hint-has-slotted-default="">West</rh-tab>
<rh-tab-panel>
The West end is the <a id="best"><em>best</em></a> end.
</rh-tab-panel>
</rh-tabs>/* stylelint-disable no-descending-specificity --
* CSS nesting creates a false positive: &:hover inside &:visited
* is a different selector than &:hover at the top level, but
* stylelint cannot distinguish them.
* See https://github.com/stylelint/stylelint/issues/4271 */
a {
color:
var(--rh-color-interactive-primary-default,
light-dark(
var(--rh-color-interactive-primary-default-on-light, #0066cc),
var(--rh-color-interactive-primary-default-on-dark, #92c5f9)));
&:hover {
color:
var(--rh-color-interactive-primary-hover,
light-dark(
var(--rh-color-interactive-primary-hover-on-light, #003366),
var(--rh-color-interactive-primary-hover-on-dark, #b9dafc)));
}
&:focus-within {
color:
var(--rh-color-interactive-primary-focus,
light-dark(
var(--rh-color-interactive-primary-focus-on-light, #003366),
var(--rh-color-interactive-primary-focus-on-dark, #b9dafc)));
}
&:active {
color:
var(--rh-color-interactive-primary-active,
light-dark(
var(--rh-color-interactive-primary-active-on-light, #003366),
var(--rh-color-interactive-primary-active-on-dark, #b9dafc)));
}
&:visited {
color:
var(--rh-color-interactive-primary-visited-default,
light-dark(
var(--rh-color-interactive-primary-visited-default-on-light, #5e40be),
var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9)));
&:hover {
color:
var(--rh-color-interactive-primary-visited-hover,
light-dark(
var(--rh-color-interactive-primary-visited-hover-on-light, #21134d),
var(--rh-color-interactive-primary-visited-hover-on-dark, #ece6ff)));
}
&:focus-within {
color:
var(--rh-color-interactive-primary-visited-focus,
light-dark(
var(--rh-color-interactive-primary-visited-focus-on-light, #21134d),
var(--rh-color-interactive-primary-visited-focus-on-dark, #ece6ff)));
}
&:active {
color:
var(--rh-color-interactive-primary-visited-active,
light-dark(
var(--rh-color-interactive-primary-visited-active-on-light, #21134d),
var(--rh-color-interactive-primary-visited-active-on-dark, #ece6ff)));
}
}
}import '@rhds/elements/rh-tabs/rh-tabs.js';
import { RhTab } from '@rhds/elements/rh-tabs/rh-tab.js';
function activateTabByHash() {
const { hash } = location;
if (!hash) { return; }
const hashTarget = document.querySelector(hash);
const tabs = hashTarget.closest('rh-tabs');
if (!tabs) { return; }
if (hashTarget instanceof RhTab) {
tabs.select(hashTarget);
} else {
const panel = hashTarget?.closest('rh-tab-panel');
const panelIndex = Array.from(tabs.querySelectorAll('rh-tab-panel')).indexOf(panel);
if (panelIndex >= 0) {
tabs.select(panelIndex);
}
}
}
addEventListener('hashchange', activateTabByHash);
activateTabByHash();Link to tab
Use to activate a particular tab when the page's URL hash refers to an element within the tab panel, or to the tab itself.
<rh-tabs class="code-tabs">
<rh-tab slot="tab" ssr-hint-has-slotted-default="">TypeScript</rh-tab>
<rh-tab-panel>
<rh-code-block dedent="" highlighting="client" language="ts" ssr-hint-has-slotted-default="">
<script type="sample/typescript">
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { classMap } from 'lit/directives/class-map.js';
import { themable } from '@rhds/elements/lib/themable.js';
@customElement('rh-consumer')
@themable
export class RhConsumer extends LitElement {
render() {
return html`<div id="container"></div>`;
}
}
</script>
</rh-code-block>
</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">CSS</rh-tab>
<rh-tab-panel>
<rh-code-block dedent="" highlighting="client" ssr-hint-has-slotted-default="">
<script type="text/css">
#container {
color: var(--rh-color-text-primary);
background: var(--rh-color-surface);
}
</script>
</rh-code-block>
</rh-tab-panel>
</rh-tabs>.code-tabs {
border:
var(--rh-border-width-sm, 1px) solid
var(--rh-color-border-subtle,
light-dark(
var(--rh-color-border-subtle-on-light, #c7c7c7),
var(--rh-color-border-subtle-on-dark, #707070)));
border-radius: var(--rh-border-radius-default, 3px);
max-width: 56rem; /* warning: magic number */
& rh-tab-panel {
padding: 0;
border-radius: 0;
}
& rh-code-block {
--rh-border-radius-default: 0;
--rh-border-width-sm: 0px;
border-width: 0;
}
}Code Tabs
Use this pattern to display highlighted code blocks of one or more languages, for example: the HTML, CSS, and JavaScript needed to implement a pattern.
