Bandeau d'information importante - Notice - 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 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).

🛠️ Props

nom	type	défaut	obligatoire
title	string	''
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

📝 Toutes les variantes 🌈 de Notice

Démo

Code de la démo

<script lang="ts" setup>
import DsfrNotice from '../DsfrNotice.vue'
import { ref } from '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>
  </div>
</template>

DsfrNotice.vue

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

export type { DsfrNoticeProps }

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

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

<template>
  <div class="fr-notice  fr-notice--info">
    <div class="fr-container">
      <div class="fr-notice__body">
        <p class="fr-notice__title">
          <slot>
            {{ title }}
          </slot>
        </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>