Tabs · Synatix Components

Demo

Ein Markup, drei Adapter, austauschbare Themes. Framework und Theme lassen sich frei kombinieren – die Komponente sieht immer gleich aus und verhält sich gleich. Der Code unter der Vorschau zeigt genau die gewählte Kombination.

Zinssatz, Rate und Laufzeit.

Vanilla@synatix/vanilla + @synatix/theme-kredit

import { enhanceTabs } from "@synatix/vanilla";
import "@synatix/theme-kredit/theme.css";

// Ein Container im Markup trägt data-theme="kredit".
const root = document.querySelector(
  "[data-scope='tabs']"
);
const cleanup = enhanceTabs(root);

Vanilla@synatix/vanilla + @synatix/theme-cpool

import { enhanceTabs } from "@synatix/vanilla";
import "@synatix/theme-cpool/theme.css";

// Ein Container im Markup trägt data-theme="cpool".
const root = document.querySelector(
  "[data-scope='tabs']"
);
const cleanup = enhanceTabs(root);

Vanilla@synatix/vanilla

import { enhanceTabs } from "@synatix/vanilla";

const root = document.querySelector(
  "[data-scope='tabs']"
);
const cleanup = enhanceTabs(root);

React@synatix/react + @synatix/theme-kredit

import { Tabs } from "@synatix/react";
import "@synatix/theme-kredit/theme.css";

export function Example() {
  return (
    <div data-theme="kredit">
      <Tabs defaultValue="overview">
        <Tabs.List>
          <Tabs.Trigger value="overview">Übersicht</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="overview">Inhalt</Tabs.Content>
      </Tabs>
    </div>
  );
}

React@synatix/react + @synatix/theme-cpool

import { Tabs } from "@synatix/react";
import "@synatix/theme-cpool/theme.css";

export function Example() {
  return (
    <div data-theme="cpool">
      <Tabs defaultValue="overview">
        <Tabs.List>
          <Tabs.Trigger value="overview">Übersicht</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="overview">Inhalt</Tabs.Content>
      </Tabs>
    </div>
  );
}

React@synatix/react

import { Tabs } from "@synatix/react";

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <Tabs.List>
        <Tabs.Trigger value="overview">Übersicht</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview">Inhalt</Tabs.Content>
    </Tabs>
  );
}

Svelte@synatix/svelte + @synatix/theme-kredit

<script>
  import { Tabs } from "@synatix/svelte";
  import "@synatix/theme-kredit/theme.css";
</script>

<div data-theme="kredit">
  <Tabs items={tabs} bind:value />
</div>

Svelte@synatix/svelte + @synatix/theme-cpool

<script>
  import { Tabs } from "@synatix/svelte";
  import "@synatix/theme-cpool/theme.css";
</script>

<div data-theme="cpool">
  <Tabs items={tabs} bind:value />
</div>

Svelte@synatix/svelte

<script>
  import { Tabs } from "@synatix/svelte";
</script>

<Tabs items={tabs} bind:value />

Anatomie

Feste Parts dienen als Selektoren für CSS und Tests.

<div data-scope="tabs" data-part="root">
  <span data-part="list">…</span>
  <span data-part="trigger">…</span>
  <span data-part="indicator">…</span>
  <span data-part="panel">…</span>
</div>

Props

Prop	Typ	Standard	Beschreibung
`value`	`string`	`—`	Steuert den aktiven Tab.
`activationMode`	`"automatic" \| "manual"`	`"automatic"`	Bestimmt den Aktivierungszeitpunkt.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Bestimmt Ausrichtung und Tasten.

Tastatur

Taste	Verhalten
`Tab`	Setzt den Fokus auf das nächste bedienbare Element.
`Shift + Tab`	Setzt den Fokus auf das vorherige Element.
`Pfeil links / rechts`	Wechselt zum vorherigen oder nächsten Tab.
`Pos1 / Ende`	Springt zum ersten oder letzten Tab.