-
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.
- améliore la documentation de `DsfrTile` - ajoute la documentation de `DsfrTiles`
- Loading branch information
Showing
5 changed files
with
122 additions
and
6 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,61 @@ | ||
# Tuile - `DsfrTile` | ||
|
||
## 🌟 Introduction | ||
|
||
Le composant `DsfrTiles` utilise le composant . | ||
|
||
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. | ||
|
||
🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile) | ||
|
||
<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) | ||
|
||
## 📐 Structure | ||
|
||
- `<DsfrTiles>` : Le composant principal. | ||
- Gère une liste de tuiles à afficher en grille. | ||
- Utilise le composant `DsfrTile` pour le rendu de chaque élément. | ||
|
||
## 🛠️ Props | ||
|
||
| Propriété | Type | Description | Valeur par défaut | | ||
|---------------|-------------------------------------------|-------------------------------------------------------------------------------------|-------------------| | ||
| `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. | `[]` | | ||
| `horizontal` | `boolean` | Si vrai, affiche les tuiles en mode horizontal. | `false` | | ||
|
||
## 📡 Événements | ||
|
||
Ce composant ne déclenche pas d'événements spécifiques. | ||
|
||
## 🧩 Slots | ||
|
||
Ce composant n'utilise pas de slots. | ||
|
||
## 📝 Exemples | ||
|
||
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. | ||
|
||
## 📝 Exemples | ||
|
||
::: code-group | ||
|
||
<Story data-title="Démo" min-h="400px"> | ||
<DsfrTilesDemo /> | ||
</Story> | ||
|
||
<<< docs-demo/DsfrTilesDemo.vue [Code de la démo] | ||
|
||
::: | ||
|
||
## ⚙️ Code source du composant | ||
|
||
::: code-group | ||
|
||
<<< DsfrTiles.vue | ||
<<< DsfrTiles.types.ts | ||
|
||
::: | ||
|
||
<script setup lang="ts"> | ||
import DsfrTilesDemo from './docs-demo/DsfrTilesDemo.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
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,56 @@ | ||
<script lang="ts" setup> | ||
import { getCurrentInstance, ref } from 'vue' | ||
import { createRouter, createWebHistory } from 'vue-router' | ||
import DsfrToggleSwitch from '../../DsfrToggleSwitch/DsfrToggleSwitch.vue' | ||
import DsfrTiles from '../DsfrTiles.vue' | ||
import type { DsfrTileProps } from '../DsfrTiles.types' | ||
const horizontal = ref(false) | ||
const tiles: DsfrTileProps[] = [ | ||
{ | ||
title: 'Ma formidable tuile 1', | ||
imgSrc: 'https://loremflickr.com/80/80/cat?random=1', | ||
description: 'Une tuile absolument formidable', | ||
}, | ||
{ | ||
title: 'Ma formidable tuile 2', | ||
imgSrc: 'https://loremflickr.com/80/80/cat?random=2', | ||
description: 'Une tuile absolument formidable', | ||
}, | ||
{ | ||
title: 'Ma formidable tuile 3', | ||
imgSrc: 'https://loremflickr.com/80/80/cat?random=3', | ||
description: 'Une tuile absolument formidable', | ||
}, | ||
{ | ||
title: 'Ma formidable tuile 4', | ||
imgSrc: 'https://loremflickr.com/80/80/cat?random=4', | ||
description: 'Une tuile absolument formidable', | ||
}, | ||
] | ||
const app = getCurrentInstance() | ||
app?.appContext.app.use( | ||
createRouter({ | ||
history: createWebHistory(), | ||
routes: [ | ||
{ path: '', component: { template: '<div>Accueil</div>' } }, | ||
{ path: '/dummy-path', component: { template: '<div>DummyPath</div>' } }, | ||
], | ||
}), | ||
) | ||
</script> | ||
|
||
<template> | ||
<div class="fr-container fr-my-2v"> | ||
<div class="fr-my-4v"> | ||
<DsfrToggleSwitch | ||
v-model="horizontal" | ||
label="Tuiles à l’horizontal" | ||
/> | ||
</div> | ||
<DsfrTiles | ||
:tiles | ||
:horizontal | ||
/> | ||
</div> | ||
</template> |