carbon-components-svelte/src/Notification/NotificationTextDetails.svelte
Eric Liu 27ba4350cf
Align v10.48 (#907)
* 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
2021-11-12 16:25:02 -08:00

38 lines
1,015 B
Svelte

<script>
/**
* @deprecated
* This component will be removed in version 1.0.0.
*/
/**
* Set the type of notification
* @type {"toast" | "inline"}
*/
export let notificationType = "toast";
/** Specify the title text */
export let title = "Title";
/** Specify the subtitle text */
export let subtitle = "";
/** Specify the caption text */
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}