Tuile - DsfrTile

🌟 Introduction

Le composant DsfrTiles utilise le composant .

Le composant DsfrTiles permet d'afficher une collection de tuiles (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

La story sur la tuile sur le storybook de VueDsfr

📐 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.

Démo

Code de la démo

<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>

⚙️ Code source du composant

DsfrTiles.vue

<script lang="ts" setup>
import DsfrTile from './DsfrTile.vue'
import type { DsfrTilesProps } from './DsfrTiles.types'

export type { DsfrTilesProps }

withDefaults(defineProps<DsfrTilesProps>(), {
  tiles: () => [],
})
</script>

<template>
  <div class="fr-grid-row fr-grid-row--gutters">
    <div
      v-for="(tile, idx) of tiles"
      :key="idx"
      :class="{
        [tile.containerClass ?? 'no-class']: tile.containerClass,
        'fr-col-6 fr-col-md-4 fr-col-lg-3': !tile.containerClass && !horizontal,
        'fr-col-12': horizontal,
      }"
    >
      <DsfrTile
        :horizontal="horizontal"
        v-bind="tile"
      />
    </div>
  </div>
</template>

DsfrTiles.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrTileProps = {
  title?: string
  imgSrc?: string
  svgPath?: string
  svgAttrs?: Record<string, unknown>
  description?: string
  details?: string
  disabled?: boolean
  horizontal?: boolean
  vertical?: 'md' | 'lg'
  to?: RouteLocationRaw
  titleTag?: string
  download?: boolean
  small?: boolean
  icon?: boolean
  noBorder?: boolean
  shadow?: boolean
  noBackground?: boolean
  grey?: boolean
  enlarge?: boolean
}

export type DsfrTilesProps = {
  tiles?: (DsfrTileProps & { containerClass?: string })[]
  horizontal?: boolean
}