Views of the same page, one at a time: underlined sections, a segmented switch or pills.

WebBêtaNavigation

Web uniquement — React, depuis @krizaka/ui/tabs. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

To split a page into sections the user switches between without leaving it: videos, stories, about.
variant="segmented" for a view switch (grid, list); pills for a feed's sections.

Quand ne pas l’utiliser

For a filter that narrows a list.À la place : Chip
To go to other pages: use links in the navigation.
For a choice in a form.À la place : Radio group

Installation

Installer

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Tabs } from "@krizaka/ui/tabs";

Exemples

Underline

The sections of a page; a disabled tab is skipped.

Twelve videos, newest first.

import { Tabs } from "@krizaka/ui/tabs";

export default function TabsUnderline() {
  return (
    <Tabs.Root defaultValue="videos">
      <Tabs.List aria-label="Profile">
        <Tabs.Trigger value="videos">Videos</Tabs.Trigger>
        <Tabs.Trigger value="stories">Stories</Tabs.Trigger>
        <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
        <Tabs.Trigger value="about" disabled>
          About
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="videos" className="text-sm text-fg-secondary">
        Twelve videos, newest first.
      </Tabs.Content>
      <Tabs.Content value="stories" className="text-sm text-fg-secondary">
        Stories of the last 24 hours.
      </Tabs.Content>
      <Tabs.Content value="collections" className="text-sm text-fg-secondary">
        Three public collections.
      </Tabs.Content>
      <Tabs.Content value="about" className="text-sm text-fg-secondary">
        About this channel.
      </Tabs.Content>
    </Tabs.Root>
  );
}

Segmented

A view switch: equal segments in a track.

Four columns of cards.

import { Tabs } from "@krizaka/ui/tabs";

// A view switch: equal segments in a track, the active one filled.
export default function TabsSegmented() {
  return (
    <Tabs.Root variant="segmented" defaultValue="grid">
      <Tabs.List aria-label="View">
        <Tabs.Trigger value="grid">Grid</Tabs.Trigger>
        <Tabs.Trigger value="list">List</Tabs.Trigger>
        <Tabs.Trigger value="cinema">Cinema</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="grid" className="text-sm text-fg-secondary">
        Four columns of cards.
      </Tabs.Content>
      <Tabs.Content value="list" className="text-sm text-fg-secondary">
        One line per video.
      </Tabs.Content>
      <Tabs.Content value="cinema" className="text-sm text-fg-secondary">
        One large player per video.
      </Tabs.Content>
    </Tabs.Root>
  );
}

Pills

A feed's sections, scrolling sideways on a phone.

Twelve videos, newest first.

import { Tabs } from "@krizaka/ui/tabs";

// A feed's sections: pills that scroll sideways on a phone.
export default function TabsPills() {
  return (
    <Tabs.Root variant="pills" defaultValue="videos">
      <Tabs.List aria-label="Profile">
        <Tabs.Trigger value="videos">Videos</Tabs.Trigger>
        <Tabs.Trigger value="stories">Stories</Tabs.Trigger>
        <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="videos" className="text-sm text-fg-secondary">
        Twelve videos, newest first.
      </Tabs.Content>
      <Tabs.Content value="stories" className="text-sm text-fg-secondary">
        Stories of the last 24 hours.
      </Tabs.Content>
      <Tabs.Content value="collections" className="text-sm text-fg-secondary">
        Three public collections.
      </Tabs.Content>
    </Tabs.Root>
  );
}

Vertical

orientation="vertical": the list on the side.

Twelve videos, newest first.

import { Tabs } from "@krizaka/ui/tabs";

// `orientation="vertical"`: up and down arrows, the list on the side.
export default function TabsVertical() {
  return (
    <Tabs.Root orientation="vertical" defaultValue="videos">
      <Tabs.List aria-label="Profile">
        <Tabs.Trigger value="videos">Videos</Tabs.Trigger>
        <Tabs.Trigger value="stories">Stories</Tabs.Trigger>
        <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="videos" className="text-sm text-fg-secondary">
        Twelve videos, newest first.
      </Tabs.Content>
      <Tabs.Content value="stories" className="text-sm text-fg-secondary">
        Stories of the last 24 hours.
      </Tabs.Content>
      <Tabs.Content value="collections" className="text-sm text-fg-secondary">
        Three public collections.
      </Tabs.Content>
    </Tabs.Root>
  );
}

Props

value/defaultValue + onValueChange, orientation (horizontal by default), variant for the list.

Prop	Type	Défaut	Description
`variant`	`"underline" \| "segmented" \| "pills"`	`underline`	underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections).

Accessibilité

Radix Tabs: tablist, tab with aria-selected and aria-controls, tabpanel; name the list with aria-label.
A disabled tab is skipped.

Clavier

Touches	Action
`Tab`	Moves to the active tab, then into its panel.
`Arrow keys / Home / End`	Move between tabs and activate them.

Bonnes pratiques

Short labels of one or two words; the active one should be clear without colour.
Keep the URL in sync with the active tab when a tab is worth sharing.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Tabs

Quand l’utiliser

Quand ne pas l’utiliser

Installation

Exemples

Underline

Segmented

Pills

Vertical

Props

Accessibilité

Clavier

Bonnes pratiques

Composants liés

Sur cette page