mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
27ba4350cf* chore(deps-dev): upgrade carbon-components to v10.48.0 * feat(ui-shell): support HeaderNavMenu with current item * refactor(tile): remove unnecessary "position: relative" style * refactor(tile): remove unused ref * feat(inline-notification): make title/subtitle slottable Closes #883 * feat(toast-notification): make title/subtitle/caption slottable * chore(notification): deprecate NotificationTextDetails
42 lines
2.6 KiB
Text
42 lines
2.6 KiB
Text
---
|
|
source: Notification/ToastNotification.svelte
|
|
---
|
|
|
|
<script>
|
|
import { ToastNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default (error)
|
|
|
|
<ToastNotification 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>
|
|
|
|
### 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()}" />
|