Skip to content

Commit ada4a71

Browse files
laruisslaruiss
committed
docs: 📝 ajoute la doc de DsfrButtonGroup
1 parent deba7ec commit ada4a71

File tree

6 files changed

+366
-0
lines changed

6 files changed

+366
-0
lines changed

‎.vitepress/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default defineConfig({
1414
appearance: { listenToStorageChanges: false }, // handling this in Story.vue itself to avoid flickering
1515

1616
rewrites: {
17+
'src/components/DsfrButton/DsfrButtonGroup.md': 'composants/DsfrButtonGroup.md',
1718
'src/components/DsfrSegmented/DsfrSegmentedSet.md': 'composants/DsfrSegmentedSet.md',
1819
'src/components/:comp/:comp.md': 'composants/:comp.md',
1920
'docs/:splat*': ':splat*',

‎src/components/DsfrButton/DsfrButtonGroup.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Groupe de boutons - DsfrButtonGroup
2+
3+
## 🌟 Introduction
4+
5+
Les boutons dans le contexte d'un groupe suivent les même règles que le composant bouton :
6+
7+
- Il prend en charge les 2 types de boutons (primaire, secondaire) ;
8+
- Il gère les 3 tailles (prop `size` valeurs `sm`, `md`, `lg`) et les variantes ( Icônes / texte seul, avec icônes à gauche / droite).
9+
10+
## 📐 Structure
11+
12+
Ce composant est une simple balise `ul` qui peut recevoir un tableau de `DsfrButtonProps & ButtonHTMLAttributes` pour mettre chaque bouton dans un `li`.
13+
14+
Le slot par défaut peut être utilisé pour mettre vos boutons si la prop `buttons` est absente (ou un tableau vide).
15+
16+
## 🛠️ Les props
17+
18+
Aucune prop n’est obligatoire
19+
20+
| Nom | Type | Défaut | Description |
21+
|------------------|--------------------------|--------------- |-------------|
22+
| align | 'right' / 'center' / String | undefined | Définit l'alignement des boutons dans le groupe. Peut être 'right' ou 'center'. |
23+
| buttons | `(DsfrButtonProps & ButtonHTMLAttributes)[]` | () => [] | Liste des boutons à afficher. Chaque bouton est un objet qui peut inclure toutes les pros d’un [DsfrButton](/composants/DsfrButton), y compris un gestionnaire `onClick`. |
24+
| equisized | `boolean` | false | Si `true`, tous les boutons du groupe auront la même largeur. |
25+
| inlineLayoutWhen | `string \| boolean` | 'never' | Détermine quand les boutons doivent être affichés sur une seule linge. Peut être `'always'`, `'never'`, ou correspondre à une taille spécifique (`'sm'`, `'md'`, `'lg'`). |
26+
| iconRight | `boolean` | false | Si `true`, place les icônes à droite du texte dans tous les boutons. |
27+
| size | `'sm' \| 'md' \| 'lg'` | 'md' | Détermine la taille des boutons. Peut être `'sm'` (petit), `'md`' (moyen, défaut), `'lg'` (grand). |
28+
29+
## 🧩 Les slots
30+
31+
Le slot par défaut peut être utilisé pour mettre des boutons personnalisés.
32+
33+
::: warning Important
34+
35+
Si vous utilisez le slot, il faut bien envelopper chaque bouton dans une balise `<li>` Cf. les exemples
36+
37+
:::
38+
39+
## 📝 Des exemples
40+
41+
::: code-group
42+
43+
<Story data-title="Démo" min-h="620px">
44+
<DsfrButtonGroupDemo />
45+
</Story>
46+
47+
<<< docs-demo/DsfrButtonGroupDemo.vue [Code de la démo]
48+
49+
<<< DsfrButtonGroup.vue
50+
51+
<<< DsfrButton.types.ts
52+
:::
53+
54+
Et voilà ! Vous êtes prêt à ajouter une touche de sophistication à votre interface avec DsfrButtonGroup. Bonne création ! 🎨✨
55+
56+
<script setup lang="ts">
57+
import DsfrButtonGroupDemo from './docs-demo/DsfrButtonGroupDemo.vue'
58+
</script>

‎src/components/DsfrButton/docs-demo/DsfrButtonDemo.vue‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<script lang="ts" setup>
2+
import DsfrButton from '../DsfrButton.vue'
3+
</script>
4+
5+
<template>
6+
<div class="fr-container fr-my-2w">
7+
<div class="flex gap-4 flex-end w-full">
8+
<div class="flex flex-col gap-4 flex-end w-full">
9+
<DsfrButton
10+
label="Bouton primaire"
11+
primary
12+
/>
13+
<DsfrButton
14+
label="Bouton secondaire"
15+
secondary
16+
/>
17+
<DsfrButton
18+
label="Bouton tertiaire"
19+
tertiary
20+
/>
21+
<DsfrButton
22+
label="Bouton tertiaire sans bordure"
23+
tertiary
24+
no-outline
25+
/>
26+
</div>
27+
<div class="flex flex-col gap-4 flex-end w-full">
28+
<DsfrButton
29+
label="Petit bouton primaire"
30+
size="sm"
31+
primary
32+
/>
33+
<DsfrButton
34+
label="Petit bouton secondaire"
35+
size="sm"
36+
secondary
37+
/>
38+
<DsfrButton
39+
label="Petit bouton tertiaire"
40+
size="sm"
41+
tertiary
42+
/>
43+
<DsfrButton
44+
label="Petit bouton tertiaire sans bordure"
45+
size="sm"
46+
tertiary
47+
no-outline
48+
/>
49+
</div>
50+
</div>
51+
<div class="flex flex-col gap-4 flex-end w-full">
52+
<DsfrButton
53+
label="Gros bouton primaire"
54+
size="lg"
55+
primary
56+
/>
57+
<DsfrButton
58+
label="Gros bouton secondaire"
59+
size="lg"
60+
secondary
61+
/>
62+
<DsfrButton
63+
label="Gros bouton tertiaire"
64+
size="lg"
65+
tertiary
66+
/>
67+
<DsfrButton
68+
label="Gros bouton tertiaire sans bordure"
69+
size="lg"
70+
tertiary
71+
no-outline
72+
/>
73+
<div class="flex flex-col gap-4 flex-end w-full">
74+
<DsfrButton
75+
label="Bouton primaire avec icône DSFR"
76+
icon="fr-icon-moon-line"
77+
primary
78+
/>
79+
<DsfrButton
80+
label="Bouton secondaire avec icône DSFR"
81+
icon="fr-icon-moon-line"
82+
secondary
83+
/>
84+
<DsfrButton
85+
label="Bouton tertiaire avec icône DSFR"
86+
icon="fr-icon-moon-line"
87+
tertiary
88+
/>
89+
<DsfrButton
90+
label="Bouton tertiaire sans bordure avec icône DSFR"
91+
icon="fr-icon-moon-line"
92+
tertiary
93+
no-outline
94+
/>
95+
</div>
96+
<div class="flex flex-col gap-4 flex-end w-full">
97+
<DsfrButton
98+
label="Bouton primaire avec icône oh-vue-icon"
99+
icon="ri-moon-line"
100+
primary
101+
/>
102+
<DsfrButton
103+
label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
104+
:icon="{name: 'ri-refresh-line', animation: 'spin'}"
105+
secondary
106+
/>
107+
<DsfrButton
108+
label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
109+
:icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
110+
tertiary
111+
/>
112+
<DsfrButton
113+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
114+
title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
115+
:icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
116+
tertiary
117+
no-outline
118+
/>
119+
</div>
120+
<div class="flex gap-4 flex-end w-full">
121+
<div class="flex flex-col gap-4 flex-end w-full">
122+
<DsfrButton
123+
label="Bouton primaire icône seulement avec icône DSFR"
124+
icon="fr-icon-moon-line"
125+
icon-only
126+
primary
127+
/>
128+
<DsfrButton
129+
label="Bouton secondaire avec icône DSFR"
130+
icon="fr-icon-moon-line"
131+
icon-only
132+
secondary
133+
/>
134+
<DsfrButton
135+
label="Bouton tertiaire avec icône DSFR animée"
136+
icon="fr-icon-moon-line"
137+
icon-only
138+
tertiary
139+
/>
140+
<DsfrButton
141+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
142+
title="Bouton tertiaire sans bordure avec icône DSFR colorée avec une couleur du DSFR"
143+
icon="fr-icon-moon-line"
144+
icon-only
145+
tertiary
146+
no-outline
147+
/>
148+
</div>
149+
<div class="flex flex-col gap-4 flex-end w-full">
150+
<DsfrButton
151+
label="Bouton primaire icône seulement avec icône oh-vue-icon"
152+
icon="ri-moon-line"
153+
icon-only
154+
primary
155+
/>
156+
<DsfrButton
157+
label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
158+
:icon="{name: 'ri-refresh-line', animation: 'spin'}"
159+
icon-only
160+
secondary
161+
/>
162+
<DsfrButton
163+
label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
164+
:icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
165+
icon-only
166+
tertiary
167+
/>
168+
<DsfrButton
169+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
170+
title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
171+
:icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
172+
icon-only
173+
tertiary
174+
no-outline
175+
/>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</template>

‎src/components/DsfrButton/docs-demo/DsfrButtonExample1.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
import DsfrButton from '../DsfrButton.vue'
5+
6+
const nb = ref(0)
7+
const handleClick = () => {
8+
nb.value++
9+
}
10+
</script>
11+
12+
<template>
13+
<div class="fr-container fr-my-2w">
14+
<DsfrButton
15+
size="lg"
16+
icon="fr-icon-home-4-fill"
17+
label="Accueil"
18+
@click="handleClick()"
19+
/>
20+
Cliqué {{ nb }} fois
21+
</div>
22+
</template>

‎src/components/DsfrButton/docs-demo/DsfrButtonExample2.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
import DsfrButton from '../DsfrButton.vue'
5+
6+
const nb = ref(0)
7+
const handleClick = () => {
8+
nb.value++
9+
}
10+
</script>
11+
12+
<template>
13+
<div class="fr-container fr-my-2w">
14+
<DsfrButton
15+
size="sm"
16+
label="Aller plus loin"
17+
icon="fr-icon-arrow-right-line"
18+
icon-right
19+
@click="handleClick()"
20+
>
21+
(Contenu <em>supplémentaire</em>)
22+
</DsfrButton>
23+
Cliqué {{ nb }} fois
24+
</div>
25+
</template>

‎src/components/DsfrButton/docs-demo/DsfrButtonGroupDemo.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
import DsfrButton from '../DsfrButton.vue'
5+
import DsfrButtonGroup from '../DsfrButtonGroup.vue'
6+
7+
const nb1 = ref(0)
8+
const nb2 = ref(0)
9+
10+
const buttons = [
11+
{
12+
label: 'Bouton du premier groupe',
13+
onclick: () => {
14+
nb1.value++
15+
},
16+
},
17+
{
18+
label: 'Bouton secondaire du premier groupe',
19+
secondary: true,
20+
onclick: () => {
21+
nb2.value++
22+
},
23+
},
24+
]
25+
</script>
26+
27+
<template>
28+
<div class="fr-container fr-my-2w">
29+
<div>
30+
<p class="fr-text--lg">
31+
Premier groupe, 2 petits boutons avec utilisation de la prop `buttons`
32+
</p>
33+
<DsfrButtonGroup
34+
size="sm"
35+
:buttons="buttons"
36+
/>
37+
<p class="fr-text--sm">
38+
Bouton primaire cliqué {{ nb1 }} fois
39+
</p>
40+
<p class="fr-text--sm">
41+
Bouton secondaire cliqué {{ nb2 }} fois
42+
</p>
43+
</div>
44+
<div>
45+
<p class="fr-text--lg">
46+
Deuxième groupe, avec utilisation du slot
47+
</p>
48+
<DsfrButtonGroup
49+
equisized
50+
inline-layout-when="always"
51+
>
52+
<li>
53+
<DsfrButton
54+
label="1re"
55+
primary
56+
/>
57+
</li>
58+
<li>
59+
<DsfrButton
60+
label="2re"
61+
secondary
62+
/>
63+
</li>
64+
<li>
65+
<DsfrButton
66+
label="3re"
67+
tertiary
68+
/>
69+
</li>
70+
<li>
71+
<DsfrButton
72+
label="3re ss bord"
73+
tertiary
74+
no-outline
75+
/>
76+
</li>
77+
</DsfrButtonGroup>
78+
</div>
79+
</div>
80+
</template>

0 commit comments

Comments
 (0)