mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
86 lines
3.6 KiB
Text
86 lines
3.6 KiB
Text
---
|
|
components: ["InlineNotification", "NotificationActionButton"]
|
|
---
|
|
|
|
<script>
|
|
import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
The `InlineNotification` component displays contextual messages inline with content. It supports various types of notifications (error, warning, success, info) and can include actions. Use it to provide feedback or important information to users.
|
|
|
|
See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
|
|
See also: [ToastNotification](ToastNotification)
|
|
|
|
## Default
|
|
|
|
Display a basic error notification with title and subtitle by default.
|
|
|
|
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
|
|
|
|
## Prevent default close behavior
|
|
|
|
The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
|
|
|
|
<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
|
|
e.preventDefault();
|
|
// custom close logic (e.g., transitions)
|
|
}} />
|
|
|
|
## Slottable title and subtitle
|
|
|
|
Customize the notification content using slots for more flexibility.
|
|
|
|
<InlineNotification>
|
|
<strong slot="title">Error: </strong>
|
|
<strong slot="subtitle">An internal server error occurred.</strong>
|
|
</InlineNotification>
|
|
|
|
## Accessible icon descriptions
|
|
|
|
Make notifications more accessible by providing custom descriptions for icons.
|
|
|
|
<InlineNotification
|
|
title="错误"
|
|
subtitle="发生内部服务器错误"
|
|
statusIconDescription="错误图标"
|
|
closeButtonDescription="关闭通知"
|
|
/>
|
|
|
|
## Hidden close button
|
|
|
|
Create a persistent notification by hiding the close button.
|
|
|
|
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
|
|
|
## With actions
|
|
|
|
Add interactive elements to notifications using the actions slot.
|
|
|
|
<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
|
|
|
|
The component supports different notification types:
|
|
|
|
<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
|
|
|
|
Use low contrast variants for less prominent notifications.
|
|
|
|
<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." />
|