Alerte

VAlert affiche un message dans le flux de la page, avec un titre, des actions et un bouton de fermeture facultatifs. Pour les notifications temporaires, utilisez toast().

Utilisation

vue

Scheduled maintenance

The service will be unavailable on Sunday from 2:00 to 4:00.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert title="Scheduled maintenance">
    The service will be unavailable on Sunday from 2:00 to 4:00.
  </VAlert>
</template>

Exemples

Variantes

variant choisit soft, une surface teintée, ou outline, la surface de la page dans une bordure teintée.

vue

A tinted surface, the default.

The page surface inside a tinted border.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert variant="soft">A tinted surface, the default.</VAlert>
  <VAlert variant="outline">The page surface inside a tinted border.</VAlert>
</template>

Tons

tone définit la couleur sémantique et l’icône par défaut.

vue

Drafts are kept for 30 days.

A new version is available.

Your changes are saved.

You have used 90% of your storage.

The payment failed. Check the card details.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert tone="neutral">Drafts are kept for 30 days.</VAlert>
  <VAlert tone="accent">A new version is available.</VAlert>
  <VAlert tone="success">Your changes are saved.</VAlert>
  <VAlert tone="warning">You have used 90% of your storage.</VAlert>
  <VAlert tone="danger">The payment failed. Check the card details.</VAlert>
</template>

Icône

icon remplace l’icône du ton. hideIcon la retire. L’icône est décorative : le texte doit porter le sens.

vue

Drag a file onto the page to upload it.

Drafts are kept for 30 days.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
import { cloud_upload as cloudUpload } from 'vectis-ui/icons'
</script>

<template>
  <VAlert tone="neutral" :icon="cloudUpload">Drag a file onto the page to upload it.</VAlert>
  <VAlert tone="neutral" hide-icon>Drafts are kept for 30 days.</VAlert>
</template>

Actions

Le slot actions place des boutons ou des liens sous le message.

vue

Payment failed

Check the card details and try again.

<script setup lang="ts">
import { VAlert, VButton } from 'vectis-ui'
</script>

<template>
  <VAlert tone="danger" title="Payment failed">
    Check the card details and try again.
    <template #actions>
      <VButton size="sm" tone="danger">Retry</VButton>
      <VButton size="sm" variant="ghost" tone="neutral">View details</VButton>
    </template>
  </VAlert>
</template>

Fermeture

closable ajoute un bouton de fermeture qui passe open à false et émet close. Liez v-model:open pour réafficher l’alerte.

vue

Scheduled maintenance

The service will be unavailable on Sunday from 2:00 to 4:00.

<script setup lang="ts">
import { ref } from 'vue'
import { VAlert, VButton } from 'vectis-ui'

const open = ref(true)
</script>

<template>
  <div class="demo">
    <VAlert v-model:open="open" class="alert" closable title="Scheduled maintenance">
      The service will be unavailable on Sunday from 2:00 to 4:00.
    </VAlert>
    <VButton v-if="!open" variant="outline" tone="neutral" @click="open = true">
      Show the alert again
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vectis-space-3);
}

.alert {
  align-self: stretch;
}
</style>

Annonce

Par défaut, l’alerte est lue avec le reste de la page. live l’annonce : role="status", ou role="alert" pour le ton danger. Utilisez-le pour les alertes qui apparaissent après une action.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VAlert, VButton } from 'vectis-ui'

const sent = ref(false)
</script>

<template>
  <div class="demo">
    <VButton @click="sent = true">Send the form</VButton>
    <VAlert v-if="sent" live class="alert" tone="success">The form was sent.</VAlert>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vectis-space-3);
}

.alert {
  align-self: stretch;
}
</style>

API

Props

Prop	Type	Défaut
`variant`	`AlertVariant'soft' \| 'outline'`	`'soft'`
Style visuel.
`tone`	`AlertTone'neutral' \| 'accent' \| 'danger' \| 'success' \| 'warning'`	`'accent'`
Ton de couleur. Choisit aussi l’icône par défaut.
`title`	`string`	aucune
Texte au-dessus du message. Remplacé par le slot `title`.
`icon`	`IconSource`	aucune
Icône remplaçant celle du ton.
`hideIcon`	`boolean`	`false`
Masque l’icône.
`closable`	`boolean`	`false`
Affiche un bouton de fermeture.
`closeLabel`	`string`	aucune
Nom accessible du bouton de fermeture. Utilise le dictionnaire par défaut.
`live`	`boolean`	`false`
Annonce l’alerte avec `role="status"`, ou `role="alert"` pour le ton `danger`.
`v-model:open`	`boolean`	`true`
Indique si l’alerte est affichée. Le bouton de fermeture la passe à `false`.

Événements

Événement	Type
`close`	`[]`
Le bouton de fermeture a été activé. `open` vaut déjà `false`.

Slots

Slot	Type
`default`	`{}`
Message.
`title`	`{}`
Contenu personnalisé du titre.
`actions`	`{}`
Boutons ou liens sous le message.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender