Registerkarten

Registerkarten in Storybook

Verwendung

Überblick

Mithilfe von Registerkarten können Benutzer durch ähnliche Inhalte auf derselben Seite navigieren. Sie könnten beispielsweise eine Reihe von Registerkarten mit den Beschriftungen „Angebot erhalten“, „Kontoanmeldung“ und „Schadenfälle“ haben. Sie helfen dabei, Inhalte in mehrere Kategorien zu ordnen und so die kognitive Belastung für den Benutzer zu reduzieren.

Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.

Formatierung

Aufbau

Die Registerkarten erscheinen in einem Set; jede Registerkarte hat eine Beschriftung und einen Inhaltsbereich.

Registerkarten bestehen aus:

1. Beschriftung: Beschreibt den Inhalt der Registerkarte. Jede Registerkarte hat eine Beschriftung, die dem Benutzer einen Kontext bietet.
2. Inhaltsbereich: Enthält Inhalte, die sich auf diese Kategorie beziehen. Der Inhalt innerhalb von Registerkarten sollte aus einem zusammenhängenden Satz von Elementen mit einem gemeinsamen Theme bestehen.
3. Anzeige für aktive Registerkarte: Wird unter einer aktiven Registerkarte angezeigt. Es kann jeweils nur eine Registerkarte aktiv sein.
4. Chevron-Symbol: ermöglicht es Benutzern, überlaufende Registerkarten in die Ansicht zu bringen.

Inhalt

Überlegungen zum UX-Schreiben

• Der Inhalt der einzelnen Registerkarten sollte zusammenhängend sein und eine Reihe gemeinsamer Merkmale aufweisen.
• Verwenden Sie Beschriftungen, die den Inhalt der einzelnen Registerkarten klar und prägnant beschreiben.
• Die Registerkarten sollten parallel sein, ohne die Sprache zu verdrehen, um sie parallel zu machen.
• Die Beschriftungen der Registerkarten sollten kurz sein (1 bis 2 Wörter) und einfache Sprache verwenden.
• Beim Beschriftungstext von Registerkarten sollte das erste Wort eines Satzes und Eigennamens groß geschrieben werden.

Best Practices

• Verwenden Sie Registerkarten, um Ansichten innerhalb desselben Kontexts zu wechseln. Benutzer sollten nicht zu verschiedenen Bereichen navigieren müssen. Registerkarten ermöglichen es ihnen, Ansichten zu wechseln, während sie an Ort und Stelle bleiben.
• Fassen Sie Inhalte logisch zusammen, so dass jeder Benutzer leicht erkennen kann, was er auf den einzelnen Registerkarten finden wird.
• Ordnen Sie Registerkarten logisch an, aber verwenden Sie keine Registerkarten für aufeinander folgende Inhalte, die in einer bestimmten Reihenfolge gelesen werden müssen.
• Legen Sie standardmäßig die erste Registerkarte in einem Set als aktiv fest.
• Widerstehen Sie der Versuchung, mehr als eine Reihe von Registerkarten zu verwenden. Wir empfehlen in der Regel nicht mehr als sechs Registerkarten in einem Satz.
• Verwenden Sie Registerkarten nur, wenn die Benutzer die Inhalte nicht über mehrere Registerkarten hinweg vergleichen müssen.
• Heben Sie die aktuell ausgewählte Registerkarte hervor.
• Stellen Sie sicher, dass nicht ausgewählte Registerkarten deutlich sichtbar und lesbar sind.
• Zeigen Sie die Registerkarten oben im Registerkarten-Panel an und nicht an den Seiten oder unten.

Verhalten

Zustände

Registerkarten haben als möglichen Zustand „Schwebend“, „Fokus“ und „Aktiv“:

• Schwebend: Zeigt an, dass der Benutzer den Mauszeiger über dem Element platziert hat (nur Desktop). Die Schriftfarbe der Registerkartenbeschriftungen ändern sich, wenn Sie den Mauszeiger darüber bewegen.
• Fokus: Gibt eine Rückmeldung darüber, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Maus.
• Aktiv: Gibt eine Rückmeldung darüber, dass der Benutzer auf das Element klickt oder tippt. Aktive Registerkarten werden unterstrichen angezeigt.

Interaktionen

Tastatur

Die TAB-Taste verschiebt den Fokus auf das erste Registerkartenelement in der Sequenz. Verwenden Sie die Pfeiltasten, um zwischen den Registerkarten-Panels zu wechseln. Wenn das Registerkarten-Panel fokussierbare Elemente enthält (z. B. eine Verknüpfung oder Schaltfläche), wird durch Drücken der TAB-Taste der Fokus auf das fokussierbare Element verschoben. Wenn keine fokussierbaren Elemente vorhanden sind, verschiebt die TAB-Taste den Fokus weg vom Registerkarten-Panel hin zum nächsten fokussierbaren Element nach der Komponente.

Screenreader

Die WAI-ARIA-Rollen „tablist“, „tab“ und „tabpanel“ sind enthalten, um assistiven Technologien Bedeutung zu verleihen. Wenn ein Registerkarten-Panel aktiv ist, wird der Wert aria-selected auf „true“ gesetzt, um kontextbezogene Informationen bereitzustellen.

Navigation

• Bei der Interaktion mit Registerkarten navigieren die Benutzer nicht zu verschiedenen Bereichen. Stattdessen wechseln sie innerhalb desselben Kontexts zwischen verschiedenen Ansichten.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Befolgen Sie die Anweisungen in diesem Abschnitt sowie in den WAI-ARIA-Erstellungspraktiken für Registerkarten.

Bei Verwendung dieser Komponente in Ihren Anwendungen:

• Geben Sie aussagekräftige und beschreibende Titel für jede Registerkarte an. Dies hilft den Benutzern, die Inhalte in den einzelnen Registerkarten-Panels zu verstehen, und sorgt für eine effiziente Navigation.
• Stellen Sie sicher, dass der Inhalt der einzelnen Registerkarten zugänglich ist, indem Sie z. B. semantische Überschriftenkomponenten verwenden, auf Farbkontraste achten und Bilder mit Alternativtext versehen.

Code

Importanweisung

import { TabSet, Tab } from '@jutro/components/';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

TabSet

activeTab

Typ

string

Beschreibung

The tabId of the active tab. It must be used in conjunction with onTabChange.

children

Typ

ComponentPropTypes.childOfComponentType(Tab)

Beschreibung

A set of <Tab> children for this component.

className

Typ

string

Beschreibung

CSS class name for this component.

defaultActiveTab

Typ

string

Beschreibung

Sets which tab is active by default.

label

Typ

string

Beschreibung

An optional label describing the purpose of the tab list.

onTabChange

Typ

(tab?: string) => unknown

Beschreibung

The callback to call when the tab is changed; if provided, activeTab must also be provided.

idVerworfen

Typ

string

Beschreibung

Unique identifier for the component.

showFrameVerworfen

Typ

boolean

Beschreibung

Displays a frame surrounding TabSet when set to true.

Registerkarte

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

children

Typ

PropTypes.node

Beschreibung

The content of this tab, child components to display.

className

Typ

string

Beschreibung

CSS class name for this component.

disabled

Typ

boolean

Beschreibung

If set to true, the tab is disabled.

heading

Typ

PropTypes.oneOfType([PropTypes.node, intlMessageShape])

Beschreibung

The heading for the tab. This prop is not rendered by the Tab component directly, but rather is extracted out by the TabSet component and rendered by it instead. Can be either a simple string or a renderer function which must accept rendering props object as an argument.

noContainerFocus

Typ

boolean

Beschreibung

If set to true, makes the tab contain nested focusable elements and pressing the Tab key does not focus on the tabpanel.

visible

Typ

boolean

Beschreibung

If set to true, the tab is visible.

Standardwert

true

Hooks

Für Tabset sind keine Hooks verfügbar.

Übersetzungsschlüssel

Mit den Komponenten Tabset und Tab sind keine Übersetzungsschlüssel verknüpft.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Benutzerdefinierte Verhalten

Registerkarten-Überlauf

Wenn die Breite der Registerkarten die Breite des Containers überschreitet, werden die zusätzlichen Registerkarten ausgeblendet und ein Pfeil zum Scrollen zu diesen Registerkarten angezeigt.

Beispiele

Einfache Registerkarten

Die Komponenten TabSet und Tab sind im Paket @jutro/components verfügbar. Die Komponente Tab kann nur innerhalb einer Komponente TabSet platziert werden. Tab benötigt einen id-Satz.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const BasicTabs = () => {
  return (
    <TabSet activeTab="tab-1">
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Tab heading 2"
        id="tab-2"
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Tab heading 3"
        id="tab-3"
      >
        Tab 3 content
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Tab 4 content
      </Tab>
    </TabSet>
  );
};

Beispiele für den Registerkartenstatus

Sie können eine Registerkarte mit der Eigenschaft visible sichtbar machen oder nicht. In diesem Beispiel ist die dritte Registerkarte nicht sichtbar, aber wenn Sie auf die erste Registerkarte klicken, ruft die Eigenschaft onTabChange die Funktion handleTabChange auf und macht die dritte Registerkarte sichtbar.

Darüber hinaus wird die zweite Registerkarte mit der Eigenschaft disabled deaktiviert.

import React, { useState } from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const StatusTabs = () => {
  const [isTab3Visible, setIsTab3Visible] = useState(false);
  const [activeTab, setActiveTab] = useState('tab-4');
  const handleTabChange = (tabId) => {
    setActiveTab(tabId);
    setIsTab3Visible(tabId === 'tab-1' || tabId === 'tab-3');
  };

  return (
    <TabSet
      defaultActiveTab="tab-4"
      activeTab={activeTab}
      onTabChange={handleTabChange}
    >
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Disabled tab"
        id="tab-2"
        disabled
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Hidden tab"
        id="tab-3"
        visible={isTab3Visible}
      >
        This tab is only visible after clicking on the fist tab.
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Click on the first tab to enable the hidden tab.
      </Tab>
    </TabSet>
  );
};

Verschachtelte Tabs und Überlauf

Sie können eine TabSet-Komponente in Tab einfügen, um einen neuen Satz von Registerkarten zu verschachteln.

Wenn die Breite der Registerkarten größer als der Container ist, laufen die Registerkarten automatisch über.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const NestedOverflowTabs = () => {
  return (
    <div style={{ width: '600px' }}>
      <TabSet activeTab="tab-1">
        <Tab
          heading="Tab heading 1"
          id="tab-1"
        >
          <p>Here are some nested tabs:</p>
          <TabSet activeTab="ntab-1">
            <Tab
              heading="Nested Tab heading 1"
              id="ntab-1"
            >
              Nested Tab 1 content
            </Tab>
            <Tab
              heading="Nested Tab heading 2"
              id="ntab-2"
            >
              Nested Tab 2 content
            </Tab>
          </TabSet>
        </Tab>
        <Tab
          heading="Tab heading 2"
          id="tab-2"
        >
          Tab 2 content
        </Tab>
        <Tab
          heading="Tab heading 3"
          id="tab-3"
        >
          Tab 3 content
        </Tab>
        <Tab
          heading="Tab heading 4"
          id="tab-4"
        >
          Tab 4 content
        </Tab>
        <Tab
          heading="Tab heading 5"
          id="tab-5"
        >
          Tab 5 content
        </Tab>
        <Tab
          heading="Tab heading 6"
          id="tab-6"
        >
          Tab 6 content
        </Tab>
        <Tab
          heading="Tab heading 7"
          id="tab-7"
        >
          Tab 7 content
        </Tab>
      </TabSet>
    </div>
  );
};

Änderungsprotokoll

10.2.0

Die folgenden Tabset-Eigenschaften sind abgekündigt:

• id
• showFrame