Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions es/components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,25 @@ Usa pestañas para organizar el contenido en varios paneles entre los que los us
</Tabs>
````

Las pestañas se sincronizan automáticamente con otras pestañas y [grupos de código](/es/components/code-groups) en la misma página cuando sus etiquetas coinciden. Cuando seleccionas una pestaña, todas las demás pestañas y grupos de código con la misma etiqueta se actualizan para reflejar tu selección. Puedes desactivar este comportamiento configurando `sync={false}`.
Las pestañas con el mismo título se mantienen sincronizadas en toda la página. Por ejemplo, si tienes varios grupos de pestañas que incluyen una pestaña titulada `JavaScript`, al seleccionar `JavaScript` en un grupo de pestañas se selecciona automáticamente `JavaScript` en los demás. Esto ayuda a que los usuarios que eligen un lenguaje o framework una vez vean reflejada esa elección en todas partes. Las pestañas también se sincronizan con los [grupos de código](/es/components/code-groups) que tienen el mismo título.

Para desactivar la sincronización de pestañas, agrega `sync={false}` a un componente `<Tabs>`.

```mdx Disable tab sync example
<Tabs sync={false}>
<Tab title="Primera pestaña">
Este grupo de pestañas opera de forma independiente.
</Tab>
<Tab title="Segunda pestaña">
Seleccionar pestañas aquí no afectará a otros grupos de pestañas.
</Tab>
</Tabs>
```

<div id="properties">
## Propiedades
</div>

<ResponseField name="sync" type="boolean" default="true">
Cuando es `true`, las pestañas se sincronizan con otras pestañas y grupos de código de la página que tengan etiquetas coincidentes. Establécelo en `false` para que las pestañas sean independientes.
</ResponseField>

<ResponseField name="title" type="string" required>
El title de la Tab. Los títulos cortos facilitan la navegación. Las pestañas con el mismo título sincronizan sus selecciones.
</ResponseField>
Expand All @@ -79,6 +88,10 @@ Las pestañas se sincronizan automáticamente con otras pestañas y [grupos de c
Solo para icon de Font Awesome: Uno de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
Cuando es `true`, las pestañas se sincronizan con otras pestañas y grupos de código de la página que tengan títulos coincidentes. Establécelo en `false` para que las pestañas sean independientes.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Añade un borde inferior y un padding al contenedor de pestañas. Es útil para separar visualmente el contenido con pestañas del resto de la página, especialmente cuando las pestañas contienen contenido de distinta longitud.
</ResponseField>
23 changes: 18 additions & 5 deletions fr/components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,25 @@ Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesqu
</Tabs>
````

Les onglets se synchronisent automatiquement avec les autres onglets et les [groupes de code](/fr/components/code-groups) sur la même page lorsque leurs libellés sont identiques. Lorsque vous sélectionnez un onglet, tous les autres onglets et groupes de code portant le même libellé sont mis à jour pour correspondre à votre sélection. Vous pouvez désactiver ce comportement en définissant `sync={false}`.
Les onglets dont les titres correspondent restent synchronisés sur toute la page. Par exemple, si vous avez plusieurs groupes d’onglets qui incluent un titre d’onglet `JavaScript`, le fait de sélectionner `JavaScript` dans un groupe d’onglets sélectionne automatiquement `JavaScript` dans les autres. Cela permet aux utilisateurs qui choisissent un langage ou un framework une fois de voir ce choix reflété partout. Les onglets se synchronisent également avec les [groupes de code](/fr/components/code-groups) dont les titres correspondent.

Pour désactiver la synchronisation des onglets, ajoutez `sync={false}` à un composant `<Tabs>`.

```mdx Disable tab sync example
<Tabs sync={false}>
<Tab title="Premier onglet">
Ce groupe d'onglets fonctionne de manière indépendante.
</Tab>
<Tab title="Deuxième onglet">
La sélection d'onglets ici n'affectera pas les autres groupes d'onglets.
</Tab>
</Tabs>
```

<div id="properties">
## Propriétés
</div>

<ResponseField name="sync" type="boolean" default="true">
Lorsque `true`, les onglets se synchronisent avec les autres onglets et groupes de code de la page ayant des labels correspondants. Définissez cette valeur sur `false` pour rendre les onglets indépendants.
</ResponseField>

<ResponseField name="title" type="string" required>
Le titre de l’onglet. Des titres courts facilitent la navigation. Les onglets ayant des titres identiques synchronisent leurs sélections.
</ResponseField>
Expand All @@ -79,6 +88,10 @@ Les onglets se synchronisent automatiquement avec les autres onglets et les [gro
Pour les icônes Font Awesome uniquement : l’un de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
Lorsque `true`, les onglets se synchronisent avec les autres onglets et groupes de code de la page ayant des titres identiques. Définissez cette valeur sur `false` pour rendre les onglets indépendants.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Ajoute une bordure inférieure et un padding au conteneur des onglets. Utile pour séparer visuellement le contenu présenté dans des onglets du reste de la page, en particulier lorsque les onglets contiennent un contenu de longueurs variables.
</ResponseField>
Loading