mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<script>
|
|
/**
|
|
* Set the type of notification
|
|
* @type {"toast" | "inline"} [notificationType="toast"]
|
|
*/
|
|
export let notificationType = "toast";
|
|
|
|
/**
|
|
* Specify the title text
|
|
* @type {string} [title="Title"]
|
|
*/
|
|
export let title = "Title";
|
|
|
|
/**
|
|
* Specify the subtitle text
|
|
* @type {string} [subtitle=""]
|
|
*/
|
|
export let subtitle = "";
|
|
|
|
/**
|
|
* Specify the caption text
|
|
* @type {string} [caption="Caption"]
|
|
*/
|
|
export let caption = "Caption";
|
|
</script>
|
|
|
|
{#if notificationType === 'toast'}
|
|
<div class:bx--toast-notification__details="{true}">
|
|
<h3 class:bx--toast-notification__title="{true}">{title}</h3>
|
|
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
|
|
<div class:bx--toast-notification__caption="{true}">{caption}</div>
|
|
<slot />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if notificationType === 'inline'}
|
|
<div class:bx--inline-notification__text-wrapper="{true}">
|
|
<p class:bx--inline-notification__title="{true}">{title}</p>
|
|
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
|
|
<slot />
|
|
</div>
|
|
{/if}
|