From 70e7e7978435195cbd8c4be7f279e155b1d3298d Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 20 Sep 2024 09:35:37 +0200 Subject: [PATCH] i18n(fr): add `components/tabs` (#2375) Co-authored-by: Thomas Bonnet <14293805+thomasbnt@users.noreply.github.com> --- docs/src/content/docs/fr/components/tabs.mdx | 221 +++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 docs/src/content/docs/fr/components/tabs.mdx diff --git a/docs/src/content/docs/fr/components/tabs.mdx b/docs/src/content/docs/fr/components/tabs.mdx new file mode 100644 index 0000000000..277992cd91 --- /dev/null +++ b/docs/src/content/docs/fr/components/tabs.mdx @@ -0,0 +1,221 @@ +--- +title: Onglets +description: Apprenez à créer des interfaces à onglets dans Starlight pour regrouper des informations équivalentes. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Pour créer une interface à onglets, utilisez les composants `` et ``. +Des onglets sont utiles pour regrouper des informations équivalentes où un utilisateur n'a besoin de voir qu'une des options. + +import Preview from '~/components/component-preview.astro'; + + + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + + + + +## Import + +```tsx +import { Tabs, TabItem } from '@astrojs/starlight/components'; +``` + +## Utilisation + +Affichez une interface à onglets en utilisant les composants `` et ``. +Chaque composant `` doit avoir un [`label`](#label) à afficher aux utilisateurs. + + + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + +``` + + + +```markdoc +{% tabs %} +{% tabitem label="Étoiles" %} +Sirius, Véga, Bételgeuse +{% /tabitem %} + +{% tabitem label="Lunes" %} +Io, Europe, Ganymède +{% /tabitem %} +{% /tabs %} +``` + + + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + + + + +### Synchroniser des onglets + +Conservez plusieurs groupes d'onglets synchronisés en ajoutant l'attribut [`syncKey`](#synckey). + +Tous les composants `` avec la même valeur `syncKey` afficheront le même label actif. +Cela permet à votre lecteur de choisir une fois (par exemple, leur système d'exploitation ou leur gestionnaire de paquets) et de voir leur choix persisté au travers de navigations entre différentes pages. + +Pour synchroniser des onglets liés, ajoutez une propriété `syncKey` identique à chaque composant `` et assurez-vous qu'ils utilisent tous les mêmes libellés avec le composant `` : + + + +```mdx 'syncKey="constellations"' +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +_Quelques étoiles :_ + + + Bellatrix, Rigel, Bételgeuse + Pollux, Castor A, Castor B + + +_Quelques exoplanètes :_ + + + HD 34445 b, Gliese 179 b, Wasp-82 b + Pollux b, HAT-P-24b, HD 50554 b + +``` + + + +```markdoc 'syncKey="constellations"' +_Quelques étoiles :_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +Bellatrix, Rigel, Bételgeuse +{% /tabitem %} + +{% tabitem label="Gémeaux" %} +Pollux, Castor A, Castor B +{% /tabitem %} +{% /tabs %} + +_Quelques exoplanètes :_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +HD 34445 b, Gliese 179 b, Wasp-82 b +{% /tabitem %} + +{% tabitem label="Gémeaux" %} +Pollux b, HAT-P-24b, HD 50554 b +{% /tabitem %} +{% /tabs %} +``` + + + + + +_Quelques étoiles :_ + + + Bellatrix, Rigel, Bételgeuse + Pollux, Castor A, Castor B + + +_Quelques exoplanètes :_ + + + HD 34445 b, Gliese 179 b, Wasp-82 b + Pollux b, HAT-P-24b, HD 50554 b + + + + + + +### Ajouter des icônes aux onglets + +Incluez une icône dans un onglet en utilisant l'attribut [`icon`](#icon) défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes) pour afficher une icône à côté du libellé. + + + +```mdx /icon="\w+"/ +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + + Sirius, Véga, Bételgeuse + + + Io, Europe, Ganymède + + +``` + + + +```markdoc /icon="\w+"/ +{% tabs %} +{% tabitem label="Étoiles" icon="star" %} +Sirius, Véga, Bételgeuse +{% /tabitem %} + +{% tabitem label="Lunes" icon="moon" %} +Io, Europe, Ganymède +{% /tabitem %} +{% /tabs %} +``` + + + + + + Sirius, Véga, Bételgeuse + + + Io, Europe, Ganymède + + + + + +## Props de `` + +**Implémentation :** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro) + +Le composant `` regroupe plusieurs composants `` et accepte les props suivantes : + +### `syncKey` + +**Type :** `string` + +Une clé utilisée pour conserver plusieurs groupes d'onglets synchronisés sur plusieurs pages. + +## Props de `` + +**Implémentation :** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro) + +Un ensemble d'onglets est composé d'onglets, chacun avec les props suivantes : + +### `label` + +**Obligatoire** +**Type :** `string` + +Un onglet doit inclure un attribut `label` défini avec le texte qui sera affiché dans l'onglet. + +### `icon` + +**Type :** `string` + +Chaque onglet peut inclure un attribut `icon` défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes) pour afficher une icône à côté du libellé.