mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
dce2dda72a* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
49 lines
2.3 KiB
Text
49 lines
2.3 KiB
Text
---
|
|
source: Notification/InlineNotification.svelte
|
|
---
|
|
|
|
<script>
|
|
import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default (error)
|
|
|
|
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
|
|
|
|
### Slottable title, subtitle
|
|
|
|
<InlineNotification>
|
|
<strong slot="title">Error: </strong>
|
|
<strong slot="subtitle">An internal server error occurred.</strong>
|
|
</InlineNotification>
|
|
|
|
### Hidden close button
|
|
|
|
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
|
|
|
### With actions
|
|
|
|
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
|
|
<svelte:fragment slot="actions">
|
|
<NotificationActionButton>Learn more</NotificationActionButton>
|
|
</svelte:fragment>
|
|
</InlineNotification>
|
|
|
|
### Notification variants
|
|
|
|
<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
|
|
<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
|
<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
|
<InlineNotification kind="success" title="Success:" subtitle="Your settings have been saved." />
|
|
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
|
<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
|
|
|
### Low contrast
|
|
|
|
<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
|
|
<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
|
<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
|
<InlineNotification lowContrast kind="success" title="Success:" subtitle="Your settings have been saved." />
|
|
<InlineNotification lowContrast kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
|
<InlineNotification lowContrast kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|