Components
Toast
Toast, dressed in the paper-and-ink system: each notice rides the popup vessel while a pigment accents the title by type, and the machine's translate variables carry the slide. The parts — Toaster, Root, Title, Description, ActionTrigger, CloseTrigger, plus createToaster.
#Basic usage
<script setup lang="ts">
import { Button, createToaster, Toast, Toaster } from "@bysages/vue";
const toaster = createToaster({
placement: "bottom-end",
max: 3,
});
function announce() {
toaster.create({
title: "Deposited",
description: "The scroll joined the archive.",
type: "success",
});
}
</script>
<template>
<Button @click="announce">Show notice</Button>
<Toaster :toaster="toaster" v-slot="toast">
<Toast.Root>
<Toast.Title>{{ toast.title }}</Toast.Title>
<Toast.Description>{{ toast.description }}</Toast.Description>
<Toast.CloseTrigger aria-label="Close">×</Toast.CloseTrigger>
</Toast.Root>
</Toaster>
</template>
#Props
#ActionTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#CloseTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Description
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
A styled part — no props of its own; it takes the anatomy's shared styling.
#Title
A styled part — no props of its own; it takes the anatomy's shared styling.