Skip to content

Commit 01ac366

Browse files
laruisslaruiss
committed
docs(DsfrTiles): 📝 améliore la doc
- améliore la documentation de `DsfrTile` - ajoute la documentation de `DsfrTiles`
1 parent 35fc290 commit 01ac366

File tree

5 files changed

+120
-6
lines changed

5 files changed

+120
-6
lines changed

‎src/components/DsfrTile/DsfrTile.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ La tuile est un raccourci ou point d’entrée qui redirige les utilisateurs ver
66

77
Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour afficher des informations sous forme de cartes visuelles dans une interface utilisateur. Ce composant permet d'intégrer des images, des SVG, des descriptions, des détails et des liens, tout en offrant de nombreuses options de personnalisation visuelle.
88

9-
🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/<nom-dsfr>)
9+
🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
1010

11-
<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfr<nom-composant>--docs)
11+
<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtile--docs)
1212

1313
## 📐 Structure
1414

@@ -38,7 +38,7 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
3838
| `small` | `boolean` | Si vrai, affiche une tuile plus petite. | `false` | |
3939
| `icon` | `boolean` | Si faux, n'affiche pas d'icône dans la tuile. | `true` | |
4040
| `noBorder` | `boolean` | Si vrai, n'affiche pas de bordure autour de la tuile. | `false` | |
41-
| `shadow` | `boolean` | Si vrai, affiche une ombre autour de la tuile. | `false` | |
41+
| `shadow` | `boolean` | Si vrai, affiche une ombre autour de la tuile. | `false` | |
4242
| `noBackground` | `boolean` | Si vrai, n'affiche pas de fond dans la tuile. | `false` | |
4343
| `grey` | `boolean` | Si vrai, affiche un fond gris pour la tuile. | `false` | |
4444

‎src/components/DsfrTile/DsfrTiles.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Tuile - `DsfrTile`
2+
3+
## 🌟 Introduction
4+
5+
Le composant `DsfrTiles` utilise le composant .
6+
7+
Le composant `DsfrTiles` permet d'afficher une collection de tuiles ([`DsfrTile`](/composants/DsfrTile)) de manière organisée dans une grille. Il offre la possibilité de personnaliser la disposition de chaque tuile, de les afficher en mode horizontal ou vertical, et d'appliquer des classes spécifiques pour un style personnalisé. Ce composant est idéal pour créer des galeries ou des listes d'éléments visuels interactifs.
8+
9+
🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
10+
11+
<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtiles--docs)
12+
13+
## 📐 Structure
14+
15+
- `<DsfrTiles>` : Le composant principal.
16+
- Gère une liste de tuiles à afficher en grille.
17+
- Utilise le composant `DsfrTile` pour le rendu de chaque élément.
18+
19+
## 🛠️ Props
20+
21+
| Propriété | Type | Description | Valeur par défaut |
22+
|---------------|-------------------------------------------|-------------------------------------------------------------------------------------|-------------------|
23+
| `tiles` | `(DsfrTileProps & { containerClass: string })[]` | Tableau d'objets représentant les tuiles à afficher, incluant les props de `DsfrTile` et une classe personnalisée pour chaque conteneur. | `[]` |
24+
| `horizontal` | `boolean` | Si vrai, affiche les tuiles en mode horizontal. | `false` |
25+
26+
## 📡 Événements
27+
28+
Ce composant ne déclenche pas d'événements spécifiques.
29+
30+
## 🧩 Slots
31+
32+
Ce composant n'utilise pas de slots.
33+
34+
## 📝 Exemples
35+
36+
Le composant `DsfrTiles` utilise une boucle pour rendre chaque tuile dans une grille responsive. Il permet d'appliquer des classes spécifiques à chaque tuile et de définir si les tuiles doivent s'afficher horizontalement ou verticalement.
37+
38+
::: code-group
39+
40+
<Story data-title="Démo" min-h="400px">
41+
<DsfrTilesDemo />
42+
</Story>
43+
44+
<<< docs-demo/DsfrTilesDemo.vue [Code de la démo]
45+
46+
:::
47+
48+
## ⚙️ Code source du composant
49+
50+
::: code-group
51+
52+
<<< DsfrTiles.vue
53+
<<< DsfrTiles.types.ts
54+
55+
:::
56+
57+
<script setup lang="ts">
58+
import DsfrTilesDemo from './docs-demo/DsfrTilesDemo.vue'
59+
</script>

‎src/components/DsfrTile/DsfrTiles.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ export type DsfrTileProps = {
2323
}
2424

2525
export type DsfrTilesProps = {
26-
tiles?: (DsfrTileProps & { containerClass: string })[]
26+
tiles?: (DsfrTileProps & { containerClass?: string })[]
2727
horizontal?: boolean
2828
}

‎src/components/DsfrTile/DsfrTiles.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts" setup>
22
import DsfrTile from './DsfrTile.vue'
3-
43
import type { DsfrTilesProps } from './DsfrTiles.types'
54
65
export type { DsfrTilesProps }
@@ -16,7 +15,7 @@ withDefaults(defineProps<DsfrTilesProps>(), {
1615
v-for="(tile, idx) of tiles"
1716
:key="idx"
1817
:class="{
19-
[tile.containerClass]: tile.containerClass,
18+
[tile.containerClass ?? 'no-class']: tile.containerClass,
2019
'fr-col-6 fr-col-md-4 fr-col-lg-3': !tile.containerClass && !horizontal,
2120
'fr-col-12': horizontal,
2221
}"

‎src/components/DsfrTile/docs-demo/DsfrTilesDemo.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts" setup>
2+
import { getCurrentInstance, ref } from 'vue'
3+
import { createRouter, createWebHistory } from 'vue-router'
4+
import DsfrToggleSwitch from '../../DsfrToggleSwitch/DsfrToggleSwitch.vue'
5+
import DsfrTiles from '../DsfrTiles.vue'
6+
import type { DsfrTileProps } from '../DsfrTiles.types'
7+
8+
const horizontal = ref(false)
9+
const tiles: DsfrTileProps[] = [
10+
{
11+
title: 'Ma formidable tuile 1',
12+
imgSrc: 'https://loremflickr.com/80/80/cat?random=1',
13+
description: 'Une tuile absolument formidable',
14+
},
15+
{
16+
title: 'Ma formidable tuile 2',
17+
imgSrc: 'https://loremflickr.com/80/80/cat?random=2',
18+
description: 'Une tuile absolument formidable',
19+
},
20+
{
21+
title: 'Ma formidable tuile 3',
22+
imgSrc: 'https://loremflickr.com/80/80/cat?random=3',
23+
description: 'Une tuile absolument formidable',
24+
},
25+
{
26+
title: 'Ma formidable tuile 4',
27+
imgSrc: 'https://loremflickr.com/80/80/cat?random=4',
28+
description: 'Une tuile absolument formidable',
29+
},
30+
]
31+
const app = getCurrentInstance()
32+
app?.appContext.app.use(
33+
createRouter({
34+
history: createWebHistory(),
35+
routes: [
36+
{ path: '', component: { template: '<div>Accueil</div>' } },
37+
{ path: '/dummy-path', component: { template: '<div>DummyPath</div>' } },
38+
],
39+
}),
40+
)
41+
</script>
42+
43+
<template>
44+
<div class="fr-container fr-my-2v">
45+
<div class="fr-my-4v">
46+
<DsfrToggleSwitch
47+
v-model="horizontal"
48+
label="Tuiles à l’horizontal"
49+
/>
50+
</div>
51+
<DsfrTiles
52+
:tiles
53+
:horizontal
54+
/>
55+
</div>
56+
</template>

0 commit comments

Comments
 (0)