Liste de téléchargements de fichiers - DsfrFileDownloadList

🌟 Introduction

La liste de téléchargements de fichiers permet de grouper plusieurs liens de téléchargement dans une liste organisée avec un style cohérent.

🏅 La documentation du composant téléchargement de fichier sur le DSFR

La story de la liste de téléchargements sur le storybook de VueDsfr

📐 Structure

La liste de téléchargements crée :

• Un conteneur <div> avec les classes fr-downloads-group fr-downloads-group--bordered
• Un titre <h4> optionnel avec la classe fr-downloads-group__title
• Une liste <ul> contenant des éléments DsfrFileDownload

🛠️ Props

nom	type	défaut	obligatoire	description
files	DsfrFileDownloadProps[]	[]	✅	Tableau d'objets définissant les fichiers à télécharger
title	string	''		Titre optionnel de la liste de téléchargements

📡 Événements

DsfrFileDownloadList ne déclenche pas d'événements.

🧩 Slots

DsfrFileDownloadList n'a pas de slots personnalisés.

📝 Exemples

Exemple d'utilisation basique de la liste de téléchargements :

vue

<script setup lang="ts">
import { ref } from 'vue'

const files = ref([
  {
    title: 'Formulaire de demande',
    format: 'PDF',
    size: '1.2 Mo',
    href: '/downloads/formulaire.pdf',
    download: 'formulaire-demande.pdf',
  },
  {
    title: 'Notice explicative',
    format: 'DOCX',
    size: '850 Ko',
    href: '/downloads/notice.docx',
    download: 'notice-explicative.docx',
  },
  {
    title: 'Modèle de courrier',
    format: 'ODT',
    size: '156 Ko',
    href: '/downloads/modele.odt',
    download: 'modele-courrier.odt',
  },
])
</script>

<template>
  <DsfrFileDownloadList
    title="Documents administratifs"
    :files="files"
  />
</template>

⚙️ Code source du composant

DsfrFileDownloadList.vue

<script lang="ts" setup>
import type { DsfrFileDownloadListProps } from './DsfrFileDownload.types'

import DsfrFileDownload from './DsfrFileDownload.vue'

export type { DsfrFileDownloadListProps }

withDefaults(defineProps<DsfrFileDownloadListProps>(), {
  files: () => [],
  title: '',
})
</script>

<template>
  <div class="fr-downloads-group fr-downloads-group--bordered">
    <h4
      v-if="title"
      class="fr-downloads-group__title"
    >
      {{ title }}
    </h4>
    <ul>
      <li
        v-for="(element, idx) of files"
        :key="idx"
      >
        <DsfrFileDownload
          :title="element.title"
          :format="element.format"
          :size="element.size"
          :href="element.href"
          :download="element.download"
        />
      </li>
    </ul>
  </div>
</template>

DsfrFileDownload.types.ts

export type DsfrFileDownloadProps = {
  title?: string
  format?: string
  size?: string
  href?: string
  download?: string
}

export type DsfrFileDownloadListProps = {
  files: DsfrFileDownloadProps[]
  title: string
}