You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/icones.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ title: Utiliser des icônes
9
9
Pour utiliser les icônes officielles avec les classes CSS du DSFR, il n’y a pas d’actions en plus à faire,
10
10
puisque c’est le CSS officiel du DSFR qui est utilisé.
11
11
12
-
Ci-dessous un exemple:
12
+
Ci-dessous un exemple:
13
13
14
14
::: code-group
15
15
@@ -24,7 +24,7 @@ Ci-dessous un exemple :
24
24
25
25
Plusieurs composants (`DsfrButton`, `DsfrBadge`, `DsfrCallout`...) ont la prop `icon` qui permet d’ajouter une icône.
26
26
27
-
Attention, cette icône n’est pas forcément une icône officielle du DSFR. En effet, VueDsfr utilise la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/). Cette prop `icon` est donc:
27
+
Attention, cette icône n’est pas forcément une icône officielle du DSFR. En effet, VueDsfr utilise la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/). Cette prop `icon` est donc:
28
28
29
29
- soit une `string` qui doit être un nom d’icône valide pour OhVueIcon ;
30
30
- soit la prop complète attendue par le composant `OhVueIcon` de la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/).
@@ -44,7 +44,7 @@ Dans les deux cas il faut que cette icône ait été ajoutée (cf. plus loin)
44
44
45
45
## Les icônes déjà enregistrées dans VIcon (OhVueIcon) dans VueDsfr
46
46
47
-
Voici la liste des icônes déjà enregistrées dans la bibliothèque VueDsfr:
47
+
Voici la liste des icônes déjà enregistrées dans la bibliothèque VueDsfr:
48
48
49
49
::: code-group
50
50
<<< ../src/icons.ts
@@ -57,11 +57,11 @@ Ces icônes ont été ajoutées parce qu’elles sont utilisées dans les compos
57
57
::: warning
58
58
Il faudra utiliser le nom en **kebab-case** dans la prop `icon` des composants ou dans la prop `name` de `VIcon`
59
59
60
-
exemple:
60
+
exemple:
61
61
62
62
```vue
63
63
<template>
64
-
Une icône ici: <VIcon name="ri-close-line" />
64
+
Une icône ici: <VIcon name="ri-close-line" />
65
65
</template>
66
66
```
67
67
@@ -78,14 +78,14 @@ Il est fort probable que vous vouliez utiliser d’autres icônes que celle qui
78
78
### Ajouter des icônes Remix icons
79
79
80
80
Il est possible d’utiliser facilement toutes les icônes [Remix Icon](https://remixicon.com/) grâce à
81
-
[OhVueIcons](https://oh-vue-icons.js.org/): le composant `VIcon` est enregistré globalement si la bibliothèque est
81
+
[OhVueIcons](https://oh-vue-icons.js.org/): le composant `VIcon` est enregistré globalement si la bibliothèque est
82
82
utilisée en tant que plugin.
83
83
84
84
#### 1. Réexporter les icônes souhaitées depuis `oh-vue-icons`
85
85
86
86
La première étape est de créer un fichier `src/icons.ts` qui ré-exporte les icônes que vous souhaitez utiliser (il est déjà créé si vous avez utilisé `create-vue-dsfr` pour créer votre projet).
87
87
88
-
Ci-dessous un exemple:
88
+
Ci-dessous un exemple:
89
89
90
90
```typescript
91
91
// src/icons.ts
@@ -97,11 +97,11 @@ export {
97
97
} from'oh-vue-icons/icons/ri/index.js'// Import de quelques icônes de Remix Icon (ri)
98
98
```
99
99
100
-
Ensuite, deux possibilités: soit on les ajoute au plugin, soit directement à `OhVueIcon`. Cf. les prochaines sections selon votre projet.
100
+
Ensuite, deux possibilités: soit on les ajoute au plugin, soit directement à `OhVueIcon`. Cf. les prochaines sections selon votre projet.
101
101
102
102
#### 2.a. Si VueDsfr est utilisé en tant que plugin
103
103
104
-
Si vous utilisez VueDsfr en tant que plugin, il faudra importer ce fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`) et donner dans l’objet `options` du plugin VueDsfr la propriété `icons` avec un tableau des icônes à enregistrer, comme ci-dessous:
104
+
Si vous utilisez VueDsfr en tant que plugin, il faudra importer ce fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`) et donner dans l’objet `options` du plugin VueDsfr la propriété `icons` avec un tableau des icônes à enregistrer, comme ci-dessous:
105
105
106
106
```typescript{10,13}
107
107
// src/main.ts
@@ -123,7 +123,7 @@ createApp(App)
123
123
124
124
#### 2.b. Si VueDsfr n’est *pas* utilisé en tant que plugin
125
125
126
-
Si vous n’utilisez VueDsfr en tant que plugin, il faudra importer le fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`), importer `addIcons` (import nommé) de `oh-vue-icons` et donner les icônes à enregistrer, c’est-à-dire celles qui sont exportées par `src/icons.ts`, comme ci-dessous:
126
+
Si vous n’utilisez VueDsfr en tant que plugin, il faudra importer le fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`), importer `addIcons` (import nommé) de `oh-vue-icons` et donner les icônes à enregistrer, c’est-à-dire celles qui sont exportées par `src/icons.ts`, comme ci-dessous:
127
127
128
128
```typescript{5,14,17}
129
129
// src/main.ts
@@ -156,7 +156,7 @@ mises à disposition par [OhVueIcons](https://oh-vue-icons.netlify.app) en les a
156
156
Ci-dessous des exemples pour
157
157
[Remix Icon](https://remixicon.com/),
158
158
[Font Awesome 5](https://fontawesome.com/icons)
159
-
et [Bootstrap Icons](https://icons.getbootstrap.com/):
159
+
et [Bootstrap Icons](https://icons.getbootstrap.com/):
160
160
161
161
```typescript
162
162
// src/icons.ts
@@ -180,7 +180,7 @@ export {
180
180
181
181
## Pour Nuxt 3
182
182
183
-
Créer/modifier le fichier `vue-dsfr.ts` dans le dossier `plugins` avec un contenu comme celui-ci:
183
+
Créer/modifier le fichier `vue-dsfr.ts` dans le dossier `plugins` avec un contenu comme celui-ci:
Copy file name to clipboardExpand all lines: docs/pour-commencer.md
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,19 @@ Ceci est le guide d̛’utilisation de la bibliothèque. Si vous cherchez à con
7
7
8
8
La façon la plus simple de commencer un projet est d’utiliser le package `create-vue-dsfr`, qui permet de créer un projet NPM avec tout le nécessaire pour développer un projet utilisant VueDsfr, que ce soit pour Vite (Vue3) ou pour Nuxt (Nuxt3), avec ou sans TypeScript.
9
9
10
-
Avec npm:
10
+
Avec npm:
11
11
12
12
```shell
13
13
npm init vue-dsfr
14
14
```
15
15
16
-
Avec pnpm:
16
+
Avec pnpm:
17
17
18
18
```shell
19
19
pnpm create vue-dsfr
20
20
```
21
21
22
-
Avec yarn:
22
+
Avec yarn:
23
23
24
24
```shell
25
25
yarn create vue-dsfr
@@ -31,13 +31,13 @@ Et suivez les indications de l’assistant.
31
31
32
32
### Utiliser la bibliothèque en tant que plugin
33
33
34
-
| Notes: |
34
+
| Notes: |
35
35
|:---------------------------|
36
36
| Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** (et **[Vue-Router 4](https://next.router.vuejs.org/)**). Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)** (plus de détails plus loin). |
37
37
38
38
#### Installer la bibliothèque en tant que dépendance du projet
39
39
40
-
Afin d'installer la bibliothèque, taper ces commandes dans votre console au sein du répertoire du projet:
40
+
Afin d'installer la bibliothèque, taper ces commandes dans votre console au sein du répertoire du projet:
41
41
42
42
```shell
43
43
npm install @gouvfr/dsfr @gouvminint/vue-dsfr
@@ -83,7 +83,7 @@ const app = createApp(App)
83
83
La bibliothèque **`VueDsfr`** fournit bien plusieurs builds (`esm` et `umd`) et Nuxt3 sait lequel choisir.
84
84
85
85
Ensuite, il faut ajouter le plugin en créant le dossier `/plugins` s’il n’existe pas et en créant dedans un fichier `vue-dsfr.js`
Copy file name to clipboardExpand all lines: docs/qu-est-ce-que-vue-dsfr.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ Pour commencer à l’utiliser, [c’est par ici !](/pour-commencer)
11
11
12
12
## Rejoindre le serveur Discord
13
13
14
-
Si vous souhaitez participer au projet, poser une question, émettre une critique (ou nous faire des éloges, elles seront bienvenues aussi), nous vous invitons à rejoindre le serveur Discord grâce à ce lien d’invitation:
14
+
Si vous souhaitez participer au projet, poser une question, émettre une critique (ou nous faire des éloges, elles seront bienvenues aussi), nous vous invitons à rejoindre le serveur Discord grâce à ce lien d’invitation:
Copy file name to clipboardExpand all lines: src/components/DsfrAccordion/DsfrAccordion.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,10 +11,10 @@ Un accordéon est constitué des éléments suivants :
11
11
- un séparateur
12
12
- une zone de contenu, masqué par défaut pouvant contenir tout type d'élément, le `slot` par défaut est fait pour ça
13
13
14
-
Autres props:
14
+
Autres props:
15
15
16
-
-**`id`**: identifiant du contenu de l’accordéon, qui est utilisé aussi pour l’attribut `aria-controls` du bouton qui permet de plier et déplier l’accordéon
17
-
-**`expandedId`**: identifiant de l’accordéon actuellement déplié (pour savoir si l’accordéon doit être déplié)
16
+
-**`id`**: identifiant du contenu de l’accordéon, qui est utilisé aussi pour l’attribut `aria-controls` du bouton qui permet de plier et déplier l’accordéon
17
+
-**`expandedId`**: identifiant de l’accordéon actuellement déplié (pour savoir si l’accordéon doit être déplié)
18
18
19
19
## Les props
20
20
@@ -41,7 +41,7 @@ Un accordéon prend plus de sens lorsqu’il fait partie d’un groupe (comme no
41
41
42
42
Les accordéons sont tous fermés et comprennent l’en tête et l’icône <VIconname="ri-arrow-drop-down-line"scale="1.25" /> si la prop **`expandedId`** est `undefined`.
43
43
44
-
La totalité de la barre de titre est cliquable. L’événement clic sur le titre de l’accordéon peut être intercepté en ajoutant un écouteur sur l’événement `expand` qui envoie l’id de l’accordéon:
44
+
La totalité de la barre de titre est cliquable. L’événement clic sur le titre de l’accordéon peut être intercepté en ajoutant un écouteur sur l’événement `expand` qui envoie l’id de l’accordéon:
45
45
46
46
```vue{6,15,16,25,26}
47
47
<script lang="ts" setup>
@@ -79,7 +79,7 @@ const expandedId = ref('')
79
79
```
80
80
81
81
::: tip
82
-
Comme l’événement `expand` a comme donnée (payload) l’`id` de l’accordéon, les deux lignes suivantes sont équivalentes:
82
+
Comme l’événement `expand` a comme donnée (payload) l’`id` de l’accordéon, les deux lignes suivantes sont équivalentes:
Copy file name to clipboardExpand all lines: src/components/DsfrAlert/DsfrAlert.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,23 +15,23 @@ La story sur l’alerte sur le storybook de [VueDsfr](https://vue-dsfr.netlify.a
15
15
16
16
L’alerte est composée des éléments suivants :
17
17
18
-
- un titre (prop `title`, de type `string`):
18
+
- un titre (prop `title`, de type `string`):
19
19
- obligatoire sur la version MD (si la prop `small` est absente ou à `false`),
20
20
- optionnel sur la version SM (si la prop `small` est à `true`).
21
-
- un pictogramme et une couleur déterminés par la prop `type` qui peut valoir une des chaînes suivantes:
21
+
- un pictogramme et une couleur déterminés par la prop `type` qui peut valoir une des chaînes suivantes:
22
22
-`'info'` (valeur par défaut si la prop `type` est absente)
23
23
-`'success'`
24
24
-`'warning'`
25
25
-`'error'`
26
-
- un texte de description (avec la prop `description`, de type `string`):
26
+
- un texte de description (avec la prop `description`, de type `string`):
27
27
- optionnel sur la version MD
28
28
- obligatoire sur la version SM
29
29
- une croix de fermeture si la prop `closeable` est à `true`
30
30
31
-
Autres props:
31
+
Autres props:
32
32
33
33
-`closed` sert à indiquer si l’alerte doit être présente (`false`) ou non (`true`) dans le DOM.
34
-
-`titleTag` permet d’indiquer la balise à utiliser pour le `title`: il s’agit de `h3` par défaut, cependant, pour passer les tests RGAA, il faut que les niveaux de titres se suivent et soient cohérents (par exemple, si sur la page il n’y a pas de `<h2>`, il faut passer `'h2'` comme valeur à la prop `titleTag` pour que le titre de la modal soit un `<h2>`).
34
+
-`titleTag` permet d’indiquer la balise à utiliser pour le `title`: il s’agit de `h3` par défaut, cependant, pour passer les tests RGAA, il faut que les niveaux de titres se suivent et soient cohérents (par exemple, si sur la page il n’y a pas de `<h2>`, il faut passer `'h2'` comme valeur à la prop `titleTag` pour que le titre de la modal soit un `<h2>`).
0 commit comments