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="true">North</rh-tab>
<rh-tab-panel>The North</rh-tab-panel>
<rh-tab slot="tab" id="south" ssr-hint-has-slotted-default="true">South</rh-tab>
<rh-tab-panel>The South</rh-tab-panel>
<rh-tab slot="tab" id="east" ssr-hint-has-slotted-default="true">East</rh-tab>
<rh-tab-panel>The East</rh-tab-panel>
<rh-tab slot="tab" id="west" ssr-hint-has-slotted-default="true">West</rh-tab>
<rh-tab-panel>
The West end is the <a id="best"><em>best</em></a> end.
</rh-tab-panel>
</rh-tabs>a {
color: var(--rh-color-interactive-primary-default);
&:hover { color: var(--rh-color-interactive-primary-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-focus); }
&:active { color: var(--rh-color-interactive-primary-active); }
&:visited {
color: var(--rh-color-interactive-primary-visited);
&:hover { color: var(--rh-color-interactive-primary-visited-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
&:active { color: var(--rh-color-interactive-primary-visited-active); }
}
}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="true">TypeScript</rh-tab>
<rh-tab-panel>
<rh-code-block dedent="" highlighting="client" language="ts" ssr-hint-has-slotted-default="true">
<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="true">CSS</rh-tab>
<rh-tab-panel>
<rh-code-block dedent="" highlighting="client" ssr-hint-has-slotted-default="true">
<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) solid var(--rh-color-border-subtle);
border-radius: var(--rh-border-radius-default);
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.
