Les onglets sont utilisés pour aider à regrouper divers contenus connexes dans des sections distinctes. Ces sections peuvent être toutes ou contenues dans une partie de l'écran. Nous vous recommandons d'utiliser un ensemble d'onglets par écran et de ne l'utiliser que pour différents types de contenu associés. Par exemple, lorsque vous disposez de données différentes sur une seule entité, vous pouvez regrouper les données dans différentes sections.
NE PAS séparer une action, comme créer, des autres sections de contenu dans les onglets. L'action doit être déclenchée par une icône ou un bouton et ouvrir une page modale ou empilée.
Usage
import { Tabs } from 'nr1'Exemples
Basique
<Tabs defaultValue="tab-3"> <TabsItem value="tab-1" label="Tab 1"> Tab 1 content </TabsItem> <TabsItem value="tab-2" label="Another tab with a longer name"> Tab 2 content </TabsItem> <TabsItem value="tab-3" label="A tab open by default"> Tab 3 content </TabsItem></Tabs>Rendre rappel
function render() { const items = new Array(10000).fill().map((_, i) => ({ value: i, content: `Tab ${i} content...`, label: `Item ${i}`, }));
return ( <div className="nr1-Example--tabs"> <Tabs items={items}> {({ item }) => ( <TabsItem value={item.value} label={item.label}> {item.content} </TabsItem> )} </Tabs> </div> );}Accessoires
chaîne | Fournir une étiquette d'accessibilité qui décrit l'objectif de l'ensemble d'onglets, par exemple |
OBLIGATOIRENœud|fonction | Il peut s'agir soit d'un éventail d'éléments |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
n'importe lequel |
|
forme[] | Les éléments à restituer, requis lors du rendu des éléments avec le rappel de rendu (Fonction en tant qu'enfants). L'élément doit contenir les propriétés forme
OBLIGATOIREtout
OBLIGATOIREchaîne
booléen |
fonction | Rappel déclenché à chaque fois que l'onglet sélectionné change. function ( |
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
objet | Style en ligne pour un style personnalisé. |
chaîne | Ajoute un attribut Remarque : vous ne verrez peut-être pas l'attribut |
n'importe lequel | Lorsque vous avez besoin d'avoir un onglet autre que le premier ouvert par défaut, utilisez l'onglet présélectionné. Avant d'utiliser cette option, nous vous recommandons de vérifier si vous disposez du bon ordre d'onglets pour votre expérience. S'il est défini, il transforme le composant en un composant contrôlé. |
Définitions de types
RenderCallbackArguments
{item: any, Item to render.
index: number, Index of the item in the items array.
items: any[], Array of items which we're iterating on.
}