77c6a16040
* chore: update unovis deps * chore: update color to use the themePrimary * docs: use gradient for overview component * docs: add themePopover to MainLayout * docs: enable global theme on every page * feat: introduce area, line, bar, donut chart * feat: add more props * fix: revert old pipeline * fix: patch @unovis/vue deps * fix: patch @unovis/vue deps again * chore: revert unovis/ts to 1.2.1 * chore: wip * docs: add alpha tag, fix tooltipo styling * docs: add charts installations step * feat: use generic, add better color * chore: build registry * feat: improve generic props * chore: build registry * docs: add alpha label * fix: collapsible not open correctly * docs: add badge to mobile nav * chore: better types * chore: run registry * chore: wip * fix: crosshair issue * chore: fix type, import missing error * chore: build registry * chore: arrange interface, expose margin, slot * chore: build registry * docs: guide page feat: add prop to barchart * chore: fix pnpm-lock * chore: add feature * chore: run build registry * refactor: change color var * feat: codegen * chore: add meta tables * feat: add line, area example * feat: bar and donut examples * docs: codege * chore: build registry * docs: improve chart doc * chore: fix missing icon package
1.6 KiB
1.6 KiB
| title | description | source | primitive |
|---|---|---|---|
| Toast | A succinct message that is displayed temporarily. | apps/www/src/lib/registry/default/ui/toast | https://www.radix-vue.com/components/toast.html |
Installation
Run the following command
npx shadcn-vue@latest add toast
Add the Toaster component
Add the following Toaster component to your App.vue file:
<script setup lang="ts">
import Toaster from '@/components/ui/toast/Toaster.vue'
</script>
<template>
<Toaster />
</template>
Usage
The useToast hook returns a toast function that you can use to display a toast.
import { useToast } from '@/components/ui/toast/use-toast'
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { useToast } from '@/components/ui/toast/use-toast'
import { Toaster } from '@/components/ui/toast'
const { toast } = useToast()
</script>
<template>
<Toaster />
<Button
@click="() => {
toast({
title: 'Scheduled: Catch up',
description: 'Friday, February 10, 2023 at 5:57 PM',
});
}"
>
Add to calendar
</Button>
</template>
To display multiple toasts at the same time, you can update the TOAST_LIMIT in use-toast.ts.
Examples
Simple
With Title
With Action
Destructive
Use toast({ variant: "destructive" }) to display a destructive toast.