mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
81 lines
4.1 KiB
Text
81 lines
4.1 KiB
Text
<script>
|
|
import { ToastNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
Toasts are non-modal, time-based window elements used to display short messages;
|
|
they usually appear at the top of the screen and disappear after a few seconds.
|
|
|
|
See [detailed
|
|
usage](https://carbondesignsystem.com/components/notification/usage).
|
|
See also: [InlineNotification](InlineNotification)
|
|
|
|
## Default (error)
|
|
|
|
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
|
|
|
## Autoclose
|
|
|
|
By default, `ToastNotification` does not automatically close.
|
|
|
|
Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).
|
|
|
|
<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />
|
|
|
|
## Prevent default close behavior
|
|
|
|
`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
|
|
|
|
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
|
|
e.preventDefault();
|
|
// custom close logic (e.g., transitions)
|
|
}} />
|
|
|
|
## Full width
|
|
|
|
Set `fullWidth` to `true` for the notification to span the full width of its containing element.
|
|
|
|
<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
|
|
|
## Slottable title, subtitle, caption
|
|
|
|
<ToastNotification>
|
|
<strong slot="title">Error: </strong>
|
|
<strong slot="subtitle">An internal server error occurred.</strong>
|
|
<strong slot="caption">{new Date().toLocaleString()}</strong>
|
|
</ToastNotification>
|
|
|
|
## Accessible icon descriptions
|
|
|
|
The status icon and close button icon descriptions appear on cursor hover and are read
|
|
by assistive technology. Default descriptions are provided in English and can be
|
|
overridden via `statusIconDescription` and `closeButtonDescription`.
|
|
|
|
<ToastNotification
|
|
title="错误"
|
|
subtitle="发生内部服务器错误"
|
|
statusIconDescription="错误图标"
|
|
closeButtonDescription="关闭通知"
|
|
/>
|
|
|
|
## Hidden close button
|
|
|
|
<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
|
|
|
## Notification variants
|
|
|
|
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
|
|
|
## Low contrast
|
|
|
|
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification lowContrast kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
|
<ToastNotification lowContrast kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|