carbon-components-svelte/src/components/Notification/NotificationTextDetails.svelte
2019-12-20 18:56:56 -08:00

25 lines
763 B
Svelte

<script>
export let title = 'title';
export let subtitle = '';
export let caption = 'caption';
export let notificationType = 'toast';
import { cx } from '../../lib';
</script>
{#if notificationType === 'toast'}
<div class={cx('--toast-notification__details')}>
<h3 class={cx('--toast-notification__title')}>{title}</h3>
<div class={cx('--toast-notification__subtitle')}>{subtitle}</div>
<div class={cx('--toast-notification__caption')}>{caption}</div>
<slot />
</div>
{/if}
{#if notificationType === 'inline'}
<div class={cx('--inline-notification__text-wrapper')}>
<p class={cx('--inline-notification__title')}>{title}</p>
<div class={cx('--inline-notification__subtitle')}>{subtitle}</div>
<slot />
</div>
{/if}