Bandeau d'information importante - DsfrNotice

🌟 Introduction

Le bandeau d’information importante permet aux utilisateurs de voir ou d’accéder à une information importante et temporaire.

Il est affiché sur l’ensemble des pages en desktop et en mobile. Il affiche une information importante et urgente (un usage trop fréquent risque de faire “disparaitre” ce bandeau).

🏅 La documentation sur le bandeau d’information importante sur le DSFR

La story sur le bandeau d’information importante sur le storybook de VueDsfr

📐 Structure

La notice est composée des éléments suivants :

• Un titre (prop title, de type string) :
  • Optionnel avec une valeur par défault ''
• Une description (prop desc, de type string) :
  • optionnel avec une valeur par défault ''
• un pictogramme et une couleur déterminés par la prop type qui peut valoir une des chaînes suivantes :
  • 'info' (valeur par défaut si la prop type est absente)
  • 'warning'
  • 'alert'
  • 'weather-orange'
  • 'weather-red'
  • 'weather-purple'
  • 'witness'
  • 'kidnapping'
  • 'attack'
  • 'cyberattack'
• Une icône d'information
• Une croix de fermeture si la prop closeable est à true

Slot(s) disponible(s):

• Le slot par défaut permet d'enrichir le contenu du paragraphe représentant le titre de la notice (tag p avec la classe fr-notice__title).
  • Ceci permet par exemple d'avoir un titre contenant un lien au fil du texte (tag a).
• Le slot par desc permet d'enrichir le contenu du paragraphe représentant le titre de la notice (tag p avec la classe fr-notice__desc).
  • Ceci permet par exemple d'avoir un titre contenant un lien au fil du texte (tag a).

🛠️ Props

nom	type	défaut	obligatoire
title	string	''
desc	string	''
type	'info' | 'warning' | 'alert'...	'info'
closeable	boolean	`false

📡 Évenements

DsfrNotice déclenche l’événement 'close' lors du clic sur la croix de fermeture pour fermer la notice.

nom	donnée (payload)
'close'	aucune

🧩 Slots

DsfrNotice dispose d'un slot par défaut permettant de définir le contenu du titre dans le cas où celui-ci est plus complexe qu'une chaîne de caractères (utilisation de la props title).

nom	contenu par défaut
'default'	aucun
'desc'	aucun

📝 Toutes les variantes 🌈 de Notice

Démo

Code de la démo

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

import DsfrNotice from '../DsfrNotice.vue'

const isClosed = ref(false)
const close = () => {
  isClosed.value = true; setTimeout(() => {
    isClosed.value = false
  }, 3000)
}
</script>

<template>
  <div class="demo-container-col">
    <DsfrNotice
      title="Notice simple"
    />

    <DsfrNotice
      v-if="!isClosed"
      closeable
      @close="close()"
    >
      Notice fermable, avec un
      <a
        href="/composants/DsfrNotice"
        rel="noopener noreferrer"
        target="_blank"
      >
        lien externe
      </a>
    </DsfrNotice>

    <DsfrNotice
      title="Notice simple"
      desc="Texte de description plutot long lorem ipsum sit consectetur adipiscing elit."
    />

    <DsfrNotice
      title="Notice simple"
      type="warning"
    />

    <DsfrNotice
      title="Notice simple"
      type="alert"
    />

    <DsfrNotice
      title="Notice simple"
      type="weather-orange"
    />
  </div>
</template>

DsfrNotice.vue

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

export type { DsfrNoticeProps }

withDefaults(defineProps<DsfrNoticeProps>(), {
  title: '',
  desc: '',
  type: 'info',
})

defineEmits<{ (event: 'close'): void }>()
</script>

<template>
  <div
    class="fr-notice"
    :class="`fr-notice--${type}`"
  >
    <div class="fr-container">
      <div class="fr-notice__body">
        <p>
          <span class="fr-notice__title">
            <slot>
              {{ title }}
            </slot>
          </span>
          <span class="fr-notice__desc">
            <slot name="desc">
              {{ desc }}
            </slot>
          </span>
        </p>
        <button
          v-if="closeable"
          class="fr-btn--close  fr-btn"
          title="Masquer le message"
          @click="$emit('close')"
        >
          Masquer le message
        </button>
      </div>
    </div>
  </div>
</template>