-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #945 from dnum-mi/docs/improve-docs
docs/improve docs
- Loading branch information
Showing
13 changed files
with
387 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
# Contenu d’onglet - `DsfrTabContent` | ||
|
||
## 🌟 Introduction | ||
|
||
Le composant `DsfrTabContent` est conçu pour être utilisé comme panneau de contenu dans une interface à onglets. Il utilise une transition fluide pour animer l'affichage du contenu de l'onglet sélectionné. | ||
|
||
Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs). | ||
|
||
## 📐 Structure | ||
|
||
- `<DsfrTabContent>` : Le composant principal. | ||
- Affiche le contenu associé à un onglet. | ||
- Utilise une transition animée pour l'apparition et la disparition du contenu. | ||
- Utilise des classes pour gérer l'état de sélection de l'onglet. | ||
|
||
## 🛠️ Props | ||
|
||
| Propriété | Type | Description | Valeur par défaut | | ||
|-------------|-----------|------------------------------------------------------------------|-------------------| | ||
| `panelId` | `string` | ID unique pour le panneau, utilisé pour l'accessibilité. | `obligatoire` | | ||
| `tabId` | `string` | ID unique de l'onglet associé, utilisé pour l'accessibilité. | `obligatoire` | | ||
|
||
## 📡 Événements | ||
|
||
Ce composant ne déclenche pas d'événements spécifiques. | ||
|
||
## 🧩 Slots | ||
|
||
- `default` : Slot pour insérer le contenu de l'onglet à afficher. | ||
|
||
## 📝 Exemples | ||
|
||
::: code-group | ||
|
||
<Story data-title="Démo" min-h="600px"> | ||
<DsfrTabsDemoComplex /> | ||
</Story> | ||
|
||
<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo] | ||
|
||
::: | ||
|
||
## ⚙️ Code source du composant | ||
|
||
::: code-group | ||
<<< DsfrTabContent.vue | ||
<<< DsfrTabs.types.ts | ||
<<< injection-key.ts | ||
::: | ||
|
||
<script setup lang="ts"> | ||
import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue' | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
# Onglet - `DsfrTabItem` | ||
|
||
## 🌟 Introduction | ||
|
||
Le composant `DsfrTabItem` représente un onglet individuel dans un ensemble d'onglets. Il gère les interactions utilisateur telles que les clics et les commandes clavier pour naviguer entre les onglets. Ce composant offre également une intégration avec des icônes pour une expérience utilisateur enrichie et intuitive. | ||
|
||
Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs). | ||
|
||
## 📐 Structure | ||
|
||
- `<DsfrTabItem>` : Un élément de liste représentant un onglet. | ||
- Contient un bouton pour activer l'onglet. | ||
- Gère les commandes clavier pour permettre la navigation entre les onglets. | ||
|
||
## 🛠️ Props | ||
|
||
| Propriété | Type | Description | Valeur par défaut | | ||
|-----------|----------|------------------------------------------------------------------|-------------------| | ||
| `panelId` | `string` | ID unique du panneau de contenu associé à cet onglet. | `obligatoire` | | ||
| `tabId` | `string` | ID unique de l'onglet, utilisé pour l'accessibilité. | `obligatoire` | | ||
| `icon` | `string` | Nom de l'icône à afficher dans l'onglet (facultatif). | `undefined` | | ||
|
||
## 📡 Événements | ||
|
||
- `click` : Événement émis lorsque l'onglet est cliqué, envoie l’index de l’onglet (`number`, entier commençant à `0`). | ||
- `next` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche droite" ou "flèche bas". | ||
- `previous` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche gauche" ou "flèche haut". | ||
- `first` : Événement émis lorsque l'utilisateur appuie sur la touche "Home". | ||
- `last` : Événement émis lorsque l'utilisateur appuie sur la touche "End". | ||
|
||
## 🧩 Slots | ||
|
||
- `default` : Slot pour insérer le contenu de l'onglet. | ||
|
||
## 📝 Exemples | ||
|
||
::: code-group | ||
|
||
<Story data-title="Démo" min-h="600px"> | ||
<DsfrTabsDemoComplex /> | ||
</Story> | ||
|
||
<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo] | ||
|
||
::: | ||
|
||
## ⚙️ Code source du composant | ||
|
||
::: code-group | ||
<<< DsfrTabContent.vue | ||
<<< DsfrTabs.types.ts | ||
<<< injection-key.ts | ||
::: | ||
|
||
Le `DsfrTabItem` utilise `v-on:keydown` pour gérer les interactions clavier et permettre la navigation entre les onglets. Le composant utilise également `watch` pour gérer la mise au point automatique lorsque l'onglet est sélectionné, améliorant ainsi l'accessibilité et l'expérience utilisateur. | ||
|
||
<script setup lang="ts"> | ||
import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue' | ||
</script> |
Oops, something went wrong.