Skip to content
Closed
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
28 changes: 19 additions & 9 deletions components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,25 @@
</Tabs>
```

## Properties
## Tabs properties

These properties are set on the `<Tabs>` wrapper component.

Check warning on line 74 in components/tabs.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tabs.mdx#L74

In general, use active voice instead of passive voice ('are set').

<ResponseField name="defaultTabIndex" type="number" default="0">
The index of the tab to display by default (zero-based). For example, set to `1` to show the second tab on page load.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
When `true`, tabs synchronize with other tabs and code groups on the page that have matching titles. Set to `false` to make tabs independent.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs contain content of varying lengths.
</ResponseField>

## Tab properties

These properties are set on each individual `<Tab>` component.

Check warning on line 90 in components/tabs.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tabs.mdx#L90

In general, use active voice instead of passive voice ('are set').

<ResponseField name="title" type="string" required>
The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections.
Expand All @@ -86,11 +104,3 @@
<ResponseField name="iconType" type="string">
For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
When `true`, tabs synchronize with other tabs and code groups on the page that have matching titles. Set to `false` to make tabs independent.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs contain content of varying lengths.
</ResponseField>
46 changes: 29 additions & 17 deletions es/components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@ Usa pestañas para organizar el contenido en varios paneles entre los que los us
}
```
</Tab>
<Tab title="Second tab" icon="leaf">
✌️ Here's content that's only inside the second tab.
<Tab title="Segunda pestaña" icon="leaf">
✌️ Aquí tienes contenido que solo está dentro de la segunda pestaña.

This one has a <Icon icon="leaf" /> icon!
¡Esta tiene un <Icon icon="leaf" />!
</Tab>
<Tab title="Third tab">
💪 Here's content that's only inside the third tab.
<Tab title="Tercera pestaña">
💪 Aquí tienes contenido que solo está dentro de la tercera pestaña.
</Tab>
</Tabs>
````
Expand All @@ -72,16 +72,36 @@ Para desactivar la sincronización de pestañas, agrega `sync={false}` a un comp
</Tabs>
```

<div id="properties">
## Propiedades
<div id="tabs-properties">
## Propiedades de Tabs
</div>

Estas propiedades se establecen en el componente envolvente `<Tabs>`.

<ResponseField name="defaultTabIndex" type="number" default="0">
El índice de la pestaña que se muestra por defecto (comienza en cero). Por ejemplo, establécelo en `1` para mostrar la segunda pestaña al cargar la página.
</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 el mismo título. Establécelo en `false` para que las pestañas sean independientes.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Añade un borde inferior y relleno 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>

<div id="tab-properties">
## Propiedades de Tab
</div>

Estas propiedades se establecen en cada componente `<Tab>` individual.

<ResponseField name="title" type="string" required>
El Título de la Tab. Los títulos cortos facilitan la navegación. Las Tabs con el mismo título sincronizan sus selecciones.
El título de la pestaña. Los títulos cortos facilitan la navegación. Las pestañas con el mismo título sincronizan sus selecciones.
</ResponseField>

<ResponseField name="id" type="string">
Un ID personalizado para la Tab que se usa para enlaces de anclaje. Si no se proporciona, usa por defecto el mismo valor que `title`.
Un ID personalizado para la pestaña que se usa para enlaces de anclaje. Si no se proporciona, usa por defecto el mismo valor que `title`.
</ResponseField>

<ResponseField name="icon" type="string">
Expand All @@ -91,11 +111,3 @@ Para desactivar la sincronización de pestañas, agrega `sync={false}` a un comp
<ResponseField name="iconType" type="string">
Solo para iconos 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 Tabs se sincronizan con otras Tabs y grupos de código de la página que tengan el mismo título. Establécelo en `false` para que las Tabs sean independientes.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Añade un borde inferior y relleno al contenedor de Tabs. Es útil para separar visualmente el contenido con Tabs del resto de la página, especialmente cuando las Tabs contienen contenido de distinta longitud.
</ResponseField>
48 changes: 30 additions & 18 deletions fr/components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ description: "Organisez le contenu avec des onglets pour afficher différentes o
keywords: ["contenu à onglets", "panneaux de contenu", "contenu commutable"]
---

Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesquels les utilisateurs peuvent basculer. Vous pouvez ajouter autant donglets que nécessaire et inclure dautres composants dans chaque onglet.
Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesquels les utilisateurs peuvent basculer. Vous pouvez ajouter autant d'onglets que nécessaire et inclure d'autres composants dans chaque onglet.

<Tabs>
<Tab title="Premier onglet">
☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.

Vous pouvez ajouter autant de composants que vous le souhaitez à lintérieur des onglets. Par exemple, un code block :
Vous pouvez ajouter autant de composants que vous le souhaitez à l'intérieur des onglets. Par exemple, un code block :

```java HelloWorld.java
class HelloWorld {
Expand All @@ -24,7 +24,7 @@ Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesqu
<Tab title="Deuxième onglet" icon="leaf">
✌️ Voici du contenu qui se trouve uniquement dans le deuxième onglet.

Celui-ci a une icône <Icon icon="leaf" /> !
Celui-ci a une icône <Icon icon="leaf" /> !
</Tab>

<Tab title="Troisième onglet">
Expand Down Expand Up @@ -57,7 +57,7 @@ Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesqu
</Tabs>
````

Les onglets dont les titres correspondent restent synchronisés sur toute la page. Par exemple, si vous avez plusieurs groupes donglets qui incluent un titre donglet `JavaScript`, le fait de sélectionner `JavaScript` dans un groupe donglets 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.
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>`.

Expand All @@ -72,30 +72,42 @@ Pour désactiver la synchronisation des onglets, ajoutez `sync={false}` à un co
</Tabs>
```

<div id="properties">
## Propriétés
<div id="tabs-properties">
## Propriétés de Tabs
</div>

Ces propriétés sont définies sur le composant conteneur `<Tabs>`.

<ResponseField name="defaultTabIndex" type="number" default="0">
L'index de l'onglet à afficher par défaut (basé sur zéro). Par exemple, définissez-le sur `1` pour afficher le deuxième onglet au chargement de la page.
</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 dont les titres correspondent. 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>

<div id="tab-properties">
## Propriétés de Tab
</div>

Ces propriétés sont définies sur chaque composant `<Tab>` individuel.

<ResponseField name="title" type="string" required>
Le titre de longlet. Des titres courts facilitent la navigation. Les onglets dont les titres correspondent synchronisent leurs sélections.
Le titre de l'onglet. Des titres courts facilitent la navigation. Les onglets dont les titres correspondent synchronisent leurs sélections.
</ResponseField>

<ResponseField name="id" type="string">
Un ID personnalisé pour longlet, utilisé pour les liens dancrage. Sil nest pas fourni, la valeur par défaut est la même que `title`.
Un ID personnalisé pour l'onglet, utilisé pour les liens d'ancrage. S'il n'est pas fourni, la valeur par défaut est la même que `title`.
</ResponseField>

<ResponseField name="icon" type="string">
Une icône [Font Awesome](https://fontawesome.com/icons), une icône [Lucide](https://lucide.dev/icons), une URL dicône ou un chemin relatif vers une icône.
Une icône [Font Awesome](https://fontawesome.com/icons), une icône [Lucide](https://lucide.dev/icons), une URL d'icône ou un chemin relatif vers une icône.
</ResponseField>

<ResponseField name="iconType" type="string">
Pour les icônes Font Awesome uniquement : lun de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
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 dont les titres correspondent. 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>
50 changes: 31 additions & 19 deletions zh/components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ keywords: ["标签式内容", "内容面板", "可切换内容"]
<Tab title="第一个标签页">
☝️ 欢迎来到只能在第一个标签页中看到的内容。

你可以在选项卡中添加任意数量的组件。例如,一个代码块:
你可以在选项卡中添加任意数量的组件。例如一个代码块
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
Expand All @@ -46,18 +46,18 @@ keywords: ["标签式内容", "内容面板", "可切换内容"]
}
```
</Tab>
<Tab title="Second tab" icon="leaf">
✌️ Here's content that's only inside the second tab.
<Tab title="第二个标签页" icon="leaf">
✌️ 这里是只在第二个标签页中的内容。

This one has a <Icon icon="leaf" /> icon!
这个还带有一个 <Icon icon="leaf" /> 图标!
</Tab>
<Tab title="Third tab">
💪 Here's content that's only inside the third tab.
<Tab title="第三个标签页">
💪 这里是只在第三个标签页中的内容。
</Tab>
</Tabs>
````

具有相同标题的 Tabs 会在整个页面中保持同步。比如,如果你有多个标签页分组都包含一个 `JavaScript` 标签页标题,在其中一个标签页分组中选择 `JavaScript` 时,其他分组中的 `JavaScript` 也会自动被选中。这样,用户只需选择一次语言或框架,就能在所有地方看到相同的选择。Tabs 也会与具有相同标题的[代码分组](/zh/components/code-groups)同步。
具有相同标题的选项卡会在整个页面中保持同步。比如,如果你有多个标签页分组都包含一个 `JavaScript` 标签页标题,在其中一个标签页分组中选择 `JavaScript` 时,其他分组中的 `JavaScript` 也会自动被选中。这样,用户只需选择一次语言或框架,就能在所有地方看到相同的选择。选项卡也会与具有相同标题的[代码分组](/zh/components/code-groups)同步。

要禁用标签页同步,在 `<Tabs>` 组件上添加 `sync={false}`。

Expand All @@ -72,10 +72,30 @@ keywords: ["标签式内容", "内容面板", "可切换内容"]
</Tabs>
```

<div id="properties">
## 属性
<div id="tabs-properties">
## Tabs 属性
</div>

这些属性设置在 `<Tabs>` 包装组件上。

<ResponseField name="defaultTabIndex" type="number" default="0">
默认显示的标签页索引(从零开始)。例如,设置为 `1` 可在页面加载时显示第二个标签页。
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
当为 `true` 时,标签页会与页面上其他具有相同标题的标签页和代码组保持同步。将其设置为 `false` 可使标签页彼此独立。
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
为标签页容器添加底部边框和内边距。可用于在视觉上将标签页内容与页面其余部分区分开来,尤其是在标签页包含不同长度的内容时。
</ResponseField>

<div id="tab-properties">
## Tab 属性
</div>

这些属性设置在每个单独的 `<Tab>` 组件上。

<ResponseField name="title" type="string" required>
标签页的标题。较短的标题更便于导航。标题相同的标签页会同步其选中状态。
</ResponseField>
Expand All @@ -85,17 +105,9 @@ keywords: ["标签式内容", "内容面板", "可切换内容"]
</ResponseField>

<ResponseField name="icon" type="string">
一个 [Font Awesome](https://fontawesome.com/icons) icon、[Lucide](https://lucide.dev/icons) icon、指向 icon 的 URL,或 icon 的相对路径
一个 [Font Awesome](https://fontawesome.com/icons) 图标、[Lucide](https://lucide.dev/icons) 图标、指向图标的 URL,或图标的相对路径
</ResponseField>

<ResponseField name="iconType" type="string">
仅适用于 Font Awesome icon:可选值之一为 `regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
仅适用于 Font Awesome 图标:可选值之一为 `regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
当为 `true` 时,标签页会与页面上其他具有相同标题的标签页和代码组保持同步。将其设置为 `false` 可使标签页彼此独立。
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
为标签页容器添加底部边框和内边距。可用于在视觉上将标签页内容与页面其余部分区分开来,尤其是在标签页包含不同长度的内容时。
</ResponseField>
Loading