v0.0.2older

Documentation version

Currently searching v0.0.2

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.2NewOpen component

Tabs

Panels behind a row of tabs, advanced by the reader or on their own.

Tabs takes two slots: links, which holds the TabLinks, and the default slot, which holds the panels. They are matched by position — the first link opens the first panel — so there are no ids to keep in step.

astro
<Tabs>
  <Fragment slot="links">
    <TabLink>Strategy</TabLink>
    <TabLink>Design</TabLink>
    <TabLink>Development</TabLink>
  </Fragment>

  <ContentWrapper>…strategy…</ContentWrapper>
  <ContentWrapper>…design…</ContentWrapper>
  <ContentWrapper>…development…</ContentWrapper>
</Tabs>

Props

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
variant"horizontal" | "side""horizontal"Where the tabs sit against their panels: in a row above them, or in a column beside them.
playback"manual" | "auto""manual"How the panels advance. manual waits for the reader and cross-fades between panels. auto advances on its own and slides, and brings arrows, a play control and a progress line with it.
previewbooleanfalseLays every panel out at once while a visual builder is in design mode, so each one can be edited. Nothing changes on the published page.

Tabs on a keyboard

The tab strip is a real tablist: the arrow keys move between tabs — left and right, or up and down on a side set — and only the selected tab is in the tab order, so Tab moves out of the strip and into the panel rather than through every tab in turn. That is what a screen-reader user expects a tab set to do, and it is why these are buttons in a tablist rather than links.

Before reaching for auto

playback="auto" moves content that the reader did not ask to move. That is why it ships with a play control — pausing is a requirement, not a nicety, for anything that animates for more than five seconds. It also pauses itself in three cases you do not have to handle: when the reader has asked for reduced motion, while anything inside it has focus, and while it is scrolled out of view.