Composant d’onglets pour les applications Stripe

Utilisez des onglets pour afficher des sections de contenu.

Version du SDK

Les onglets sont des sections qui affichent un panneau de contenu à la fois. Les différents onglets disponibles apparaissent sur le bord supérieur du panneau actuellement sélectionné.

Pour ajouter le composant Tabs à votre application :

import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';

Chargement de l'exemple...

<Box css={{width: 'fill'}}>
  <Tabs fitted>
    <TabList>
      {[1, 2].map((i) => (
        <Tab key={i} tabKey={i}>
          Tab {i}
        </Tab>
      ))}
    </TabList>
    <TabPanels>
      {[1, 2].map((i) => (
        <TabPanel key={i} tabKey={i}>
          <Box css={{backgroundColor: 'container', padding: 'large'}}>
            Tab panel {i}
          </Box>
        </TabPanel>
      ))}
    </TabPanels>
  </Tabs>
</Box>

Propriétés des onglets

Propriété	Type
`children`	Obligatoire `React.ReactNode` Un ou plusieurs composants `TabList` ou `TabPanels`.
`fitted`	Facultatif `boolean \| undefined` Indique si la `TabList` doit ou non occuper toute la largeur de son conteneur.
`onSelectionChange`	Facultatif `((event: React.Key) => void) \| undefined` Rappel à déclencher lorsqu’un `Tab` est sélectionné.
`selectedKey`	Facultatif `React.Key \| undefined` Touche du composant `Tab` sélectionné lorsque vous l’utilisez en tant que composant contrôlé. À utiliser avec `onSelectionChange` pour contrôler l’état de sélection de l’onglet.
`size`	Facultatif `("small" \| "medium" \| "large") \| undefined` La taille du composant.

Onglet

Le composant TabList prend en charge la sélection de contenu. TabList est composé d’un ensemble de composants Tab. Chaque Tab peut être identifié de façon unique à l’aide d’une propriété tabKey. Si vous affichez des composants Tab à l’aide d’une fonction map, vous devez tout de même ajouter une key pour respecter les règles de React.

Propriétés TabList

Propriété Type

Propriété	Type
`children`	Obligatoire `React.ReactNode` Un ou plusieurs composants `Tab`.

children

Obligatoire

React.ReactNode

Un ou plusieurs composants Tab.

Propriétés de l’onglet

Propriété	Type
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`disabled`	Facultatif `boolean \| undefined` Indique si l’onglet doit être désactivé ou non.
`id`	Facultatif `string \| undefined` Un identifiant unique qui contrôle la sélection à l’aide de la propriété `selectedKey` du composant `Tabs`.
`tabKey`	FacultatifObsolète Utilisez plutôt la propriété `id`. `(React.Key \| null) \| undefined` Identifiant unique à utiliser avec la `selectedKey` de `Tabs`.

TabPanel

Le composant TabPanels prend en charge l’affichage de panneaux de contenu avec des onglets. TabPanels est constitué d’un ensemble de composants TabPanel. Chaque TabPanel peut être identifié à l’aide d’une propriété tabKey. Si vous affichez des composants TabPanel à l’aide d’une fonction map, vous devez tout de même ajouter une key pour respecter les règles de React.

Propriétés TabPanel

Propriété Type

children

Obligatoire

React.ReactNode

Le contenu du composant.

id

Facultatif

string | undefined

Un identifiant unique qui contrôle la sélection à l’aide de la propriété selectedKey du composant Tabs.

tabKey

FacultatifObsolète

Utilisez plutôt la propriété id.

(React.Key | null) | undefined

Identifiant unique à utiliser avec la selectedKey de Tabs.

Petits onglets

Chargement de l'exemple...

<Box css={{width: 'fill'}}>
  <Tabs size="small">
    <TabList>
      {[1, 2, 3, 4, 5].map((i) => (
        <Tab key={i} tabKey={i}>
          Tab {i}
        </Tab>
      ))}
    </TabList>
    <TabPanels>
      {[1, 2, 3, 4, 5].map((i) => (
        <TabPanel key={i} tabKey={i}>
          <Box css={{backgroundColor: 'container', padding: 'large'}}>
            Tab panel {i}
          </Box>
        </TabPanel>
      ))}
    </TabPanels>
  </Tabs>
</Box>

Onglets désactivés

Chargement de l'exemple...

<Box css={{width: 'fill'}}>
  <Tabs size="large" fitted>
    <TabList>
      <Tab tabKey="1">Tab</Tab>
      <Tab tabKey="2">Another Tab</Tab>
      <Tab tabKey="3" disabled>
        Disabled Tab
      </Tab>
    </TabList>
    <TabPanels>
      <TabPanel tabKey="1">
        <Box css={{backgroundColor: 'container', padding: 'large'}}>
          Test Tab Panel 1
        </Box>
      </TabPanel>
      <TabPanel tabKey="2">
        <Box css={{backgroundColor: 'container', padding: 'large'}}>
          Test Tab Panel 2
        </Box>
      </TabPanel>
      <TabPanel tabKey="3">
        <Box css={{backgroundColor: 'container', padding: 'large'}}>
          Test Tab Panel 3
        </Box>
      </TabPanel>
    </TabPanels>
  </Tabs>
</Box>

Utilisations non prises en charge

Les onglets ne prennent pas en charge le contenu conditionnel dans les fragments, sauf si le fragment enfant reçoit une clé identique.

const [result, setResult] = React.useState(null);

return (
  <Box css={{width: 'fill'}}>
    <Tabs>
      <TabList>
        <Tab tabKey="1">
          <>
            {result ? (
              <Inline>View results</Inline>
            ) : (
              <Inline>Create results</Inline>
            )}
          </>
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel tabKey="1">
          <>
            {result ? (
              <Inline>Results</Inline>
            ) : (
              <Inline>No results yet</Inline>
            )}
          </>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </Box>
)

Utilisez des composants au lieu de fragments afin d’éviter les utilisations non prises en charge des onglets. Vous pouvez aussi donner une key partagée aux fragments enfants.

Chargement de l'exemple...

const [result, setResult] = React.useState(null);

return (
  <Box css={{width: 'fill'}}>
    <Tabs>
      <TabList>
        <Tab tabKey="1">
          <Box>
            {result ? (
              <Inline>View results</Inline>
            ) : (
              <Inline>Create results</Inline>
            )}
          </Box>
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel tabKey="1">
          <>
            {result ? (
              <Inline key="tab-panel-results">Results</Inline>
            ) : (
              <Inline key="tab-panel-no-results">No results yet</Inline>
            )}
          </>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </Box>
)

Onglets contrôlés

Utilisez la propriété selectedKey de Tabs avec la propriété tabKey de Tab et de TabPanel pour créer un composant contrôlé.

Chargement de l'exemple...

const [key, setSelectedKey] = React.useState<React.Key>('c');

return (
  <Box css={{width: 'fill'}}>
    <Tabs selectedKey={key} onSelectionChange={setSelectedKey}>
      <TabList>
        {['a', 'b', 'c', 'd', 'e'].map((key) => (
          <Tab key={key} tabKey={key}>
            Tab {key}
          </Tab>
        ))}
      </TabList>
      <TabPanels>
        {['a', 'b', 'c', 'd', 'e'].map((key) => (
          <TabPanel key={key} tabKey={key}>
            <Box css={{backgroundColor: 'container', padding: 'large'}}>
              Tab panel {key}
            </Box>
          </TabPanel>
        ))}
      </TabPanels>
    </Tabs>
  </Box>
)

Composant d’onglets pour les applications Stripe

Utilisez des onglets pour afficher des sections de contenu.

Propriétés des onglets

Onglet

Propriétés TabList

Propriétés de l’onglet

TabPanel

Propriétés TabPanel

Petits onglets

Onglets désactivés

Utilisations non prises en charge

Onglets contrôlés

Voir aussi