Zum Hauptinhalt springen

Registerkarten

Registerkarten in Storybook

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>
  );
};