Notification - Svelte - Semi Design Next

Demos

How to import

<script lang="ts">
    import { Notification } from '@fibrae/semi-ui-svelte';
</script>

The static methods can only be called in the browser (calling them on the server throws); call them in event handlers. They read Notification.config(), the global defaults and the default locale, and do not inherit the ConfigProvider or LocaleProvider of their position; use Notification.useNotification() when you need those.

Basic Usage

Close after 3 seconds.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        title: 'Hi, Bytedance',
        content: 'ies dance dance dance',
        duration: 3,
    };
</script>

<Button onclick={() => Notification.open(opts)}>Display Notification</Button>

Position

Use position to set pop up position, supporting one of: top、bottom、topLeft、topRight(default)、bottomLeft、bottomRight。

Code

<script lang="ts">
    import { Button, ButtonGroup, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        duration: 3,
        position: 'topRight',
        content: 'semi-ui-notification',
        title: 'Hi bytedance',
    } as const;
</script>

<ButtonGroup>
    <Button onclick={() => Notification.info({ ...opts, position: 'top' })}>top</Button>
    <Button onclick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>
    <Button onclick={() => Notification.info(opts)}>topRight</Button>
</ButtonGroup>
<br />
<br />
<ButtonGroup>
    <Button onclick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>
    <Button onclick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>
    <Button onclick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>
</ButtonGroup>

With Icons

Use different methods to show Notification with icons or you can pass in icon for customized icon.

默认的图标

自定义图标

Code

<script lang="ts">
    import { IconToutiaoLogo, IconVigoLogo } from '@fibrae/semi-icons-svelte';
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        title: 'Hi, Bytedance',
        content: 'ies dance dance dance',
        duration: 3,
    };
</script>

{#snippet toutiao()}<IconToutiaoLogo style="color: red" />{/snippet}
{#snippet vigo()}<IconVigoLogo />{/snippet}
{#snippet pinkVigo()}<IconVigoLogo style="color: pink" />{/snippet}

<h5>默认的图标</h5>
<Button style="margin: 4px" type="primary" onclick={() => Notification.success(opts)}>Success</Button>
<Button style="margin: 4px" onclick={() => Notification.info(opts)}>Info</Button>
<Button style="margin: 4px" type="warning" onclick={() => Notification.warning(opts)}>Warning</Button>
<Button style="margin: 4px" type="danger" onclick={() => Notification.error(opts)}>Error</Button>
<h5>自定义图标</h5>
<Button aria-label="Toutiao 图标通知" style="margin-right: 5px" onclick={() => Notification.info({ ...opts, icon: toutiao })}>
    {#snippet icon()}
        <IconToutiaoLogo />
    {/snippet}
</Button>
<Button aria-label="Vigo 图标通知" style="margin-right: 5px" onclick={() => Notification.info({ ...opts, icon: vigo })}>
    {#snippet icon()}
        <IconVigoLogo />
    {/snippet}
</Button>
<Button aria-label="粉色 Vigo 图标通知" onclick={() => Notification.info({ ...opts, icon: pinkVigo })}>
    {#snippet icon()}
        <IconVigoLogo />
    {/snippet}
</Button>

Colored Background

You could use theme for a colored background style. Default is normal.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        title: 'Hi, Bytedance',
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        theme: 'light',
    } as const;
</script>

<Button onclick={() => Notification.info(opts)}>Info</Button>
<br />
<br />
<Button onclick={() => Notification.success(opts)}>Success</Button>
<br />
<br />
<Button type="warning" onclick={() => Notification.warning(opts)}>Warning</Button>
<br />
<br />
<Button type="danger" onclick={() => Notification.error(opts)}>Error</Button>

Custom Children with Link

Use with Typography to create operation links for more complicated situations.

title, content and icon accept a string or a snippet: define it with {#snippet} in the component and pass it in; components such as Typography can be used directly inside the snippet.

Code

<script lang="ts">
    import { Button, Notification, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

{#snippet content()}
    <div>Hi, Bytedance dance dance</div>
    <div style="margin-top: 8px">
        <TypographyText link>查看详情</TypographyText>
        <TypographyText link style="margin-left: 20px">一会再看</TypographyText>
    </div>
{/snippet}

<Button onclick={() => Notification.info({ title: 'This is a title', content, duration: 3 })}>Display Notification</Button>

Delay

Use duration to set up time delay. By default it closes after 3 seconds.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
    };
</script>

<Button onclick={() => Notification.info(opts)}>Close After 10s</Button>

Manual Close

Set duration to 0 if you do not want the Notification to close by itself. In this case, it could only be closed manually.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Not auto close',
        title: 'Hi',
        duration: 0,
    };
    const ids: string[] = [];

    const show = () => {
        ids.push(Notification.info(opts));
    };

    const hide = () => {
        const first = ids.shift();
        if (first) {
            Notification.close(first);
        }
    };
</script>

<Button type="primary" onclick={show}>Show Notification</Button>
<br />
<br />
<Button type="primary" onclick={hide}>Hide Notification</Button>

Stack

With stack, the notifications at one position stack once there are more than the threshold, and expand on hover. true sets the threshold to 3, and a number sets a custom one; a stack shows its front 3 layers only.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const opts = {
        title: 'Hi',
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        stack: true,
    };
</script>

<Button onclick={() => Notification.info(opts)}>Click multiple times</Button>

Update content

You can use id to update notification content.

Code

<script lang="ts">
    import { Button, Notification } from '@fibrae/semi-ui-svelte';

    const show = () => {
        const id = Notification.open({
            title: 'Hi, Bytedance',
            content: 'ies dance dance dance',
            duration: 3,
        });
        setTimeout(() => {
            Notification.open({
                title: 'Hi, Bytedance',
                content: 'updated',
                duration: 10,
                id,
            });
        }, 1000);
    };
</script>

<Button onclick={show}>Display Notification</Button>

Consume Context

Call Notification.useNotification() during component initialization: notifications inherit the context, ConfigProvider and locale of the calling component, no Holder is needed, and they enter and leave with the same animations as the static methods. They are mounted under document.body and removed when the calling component is destroyed. A snippet passed as content, icon or title can call getContext to read the calling component's context.

Code

<script lang="ts">
    import { getContext, setContext } from 'svelte';
    import { Button, Notification, Space } from '@fibrae/semi-ui-svelte';

    const reachableKey = Symbol('reachable');
    setContext(reachableKey, 'Light');

    const notification = Notification.useNotification();
    const ids: string[] = [];

    const show = () => {
        ids.push(notification.info({ title: 'Hook Notification', content: reachable, duration: 0 }));
    };

    const hide = () => {
        const first = ids.shift();
        if (first) {
            notification.close(first);
        }
    };
</script>

<!-- The snippet renders inside the list mounted with this component's contexts, so it reads the context set above -->
{#snippet reachable()}ReachableContext: {getContext(reachableKey)}{/snippet}

<Space>
    <Button onclick={show}>Show Notification</Button>
    <Button onclick={hide}>Hide Notification</Button>
</Space>

API Reference

The static methods provided are as follows:

Display: You can pass in options object directly. Methods return the value of id: const id = Notification.open({ /*...options*/ })

Notification.open({content: 'message', duration: 3})
Notification.info({content: 'message', duration: 3})
Notification.error({content: 'message', duration: 3})
Notification.warning({content: 'message', duration: 3})
Notification.success({content: 'message', duration: 3})

Close Manually (id is the return value of the display methods)

Notification.close(id)

Property	Description	Type	Default
class	Class name of the notification element	string \| object \| array
content	Content, a string or a snippet; the snippet is rendered inside the notification	string \| Snippet	''
direction	Text direction. A per-notification option only, not part of the global configuration; follows ConfigProvider when omitted	`ltr` \| `rtl`
duration	Automatic close delay in seconds; 0 disables auto-close	number	3
getPopupContainer	The parent DOM node the popup renders into; it needs `position: relative`. This changes where the popup sits in the DOM tree, not where it is shown. Only takes effect when the container is first created	() => HTMLElement	() => document.body
icon	Icon at the top left, a string or a snippet	string \| Snippet
id	Custom notification id; updates the content when a notification with the same id exists	string
position	Pop-up position, one of `top`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`	string	`topRight`
showClose	Whether to show the close button	boolean	true
stack	Stack the notifications at one position once there are more than this many; `true` means 3, `false` never stacks. The newest notification at the position decides	boolean \| number	false
style	Inline style of the notification element, a string only	string
theme	Style of background fill, one of `light`, `normal`	string	`normal`
title	Title, a string or a snippet	string \| Snippet	''
zIndex	Z-index value. Applied each time a notification is shown.	number	1010
onClick	Called when the notification is clicked; lands on the notification element	(e: MouseEvent) => void
onClose	Called when the notification closes, automatically or manually, once per close	() => void
onCloseClick	Called when the close button is clicked	(id: string) => void

class, style and native attributes and events (such as aria-* and data-*) land on the root div of the notification. onClick, onClose and onCloseClick keep their key names in the options; pass functions directly.

The global configuration is set before any method call, and takes effect only once:

Notification.config(config)
Notification.resetConfig() restores the global configuration to its defaults; only notifications shown afterwards are affected

Notification.config does not accept direction; text direction is an option of a single notification only.

Properties	Instructions	type	Default
bottom	Bottom, absolute position	number \| string	-
duration	Automatic close delay, no auto-close when set to 0	number(second)	3
left	Left, absolute position	number \| string	-
position	Pop-up position, one of `top`、`bottom`、`topLeft`、`topRight`、`bottomLeft`、`bottomRight`	string	`topRight`
right	Right, absolute position	number \| string	-
stack	Stack the notifications at one position once there are more than this many; `true` means 3, `false` never stacks	boolean \| number	false
top	Top, absolute position	number \| string	-
zIndex	Z-index	number	1010

Globally Destroy:

Notification.destroyAll()

Hook Notification

Notification.useNotification()
Call it during component initialization; it returns the notification object. Notifications created through it can access the context of the calling component. The notification object has the methods info, success, warning, error, open and close; the first five take the options without type, id, zIndex and getPopupContainer and return the notification id, and close(id) closes one manually. Notifications created by the hook use the built-in defaults and ignore Notification.config(); close(id) removes the notification after its leave animation without calling onClose. The values of ConfigProvider and LocaleProvider cannot be read by the static Notification; use useNotification() when you need them.

Accessibility

ARIA

The role of a notification depends on its type: warning and error are alert; info, success and open are status
status notifications are read by a persistent aria-live="polite" region owned by the list; the notification itself is aria-live="off", and only the text of the title and content is announced. warning and error still announce themselves as alert
The notification's aria-labelledby is marked as the corresponding notification title

Keyboard and Focus

The close button is a native button: focus it with Tab, and activate it with Enter or Space
A notification does not take focus when it appears
When the pointer or keyboard focus enters a notification, its auto-close timer pauses and a stack expands; both resume when it leaves

Content Guidelines

Task completed

400 tasks succeed and 600 failed

Check failed tasks

Title
- Explain in clear and concise language
- Avoid punctuation such as commas, periods, etc.
Text
- On the premise of complete information transmission, try to compress the text to 1-2 sentences
- A detailed description or explanation of the title, rather than a repetition of the title
- Use correct punctuation, commas within sentences and periods between sentences
Operate
- The copy needs to show the specific meaning of the operation

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-notification-show	300ms	出现时-动画持续时间
$animation_function-notification-show	cubic-bezier(0.62, 0.63, 0, 1.13)	出现时-过渡曲线
$animation_delay-notification-show	0ms	出现时-延迟时间
$animation_duration-notification-hide	300ms	消失时-动画持续时间
$animation_function-notification-hide	cubic-bezier(0.62, 0.63, 0, 1.13)	消失时-过渡曲线
$animation_delay-notification-hide	0ms	消失时-延迟时间
$animation_opacity-notification-show	0	出现时-初始透明度
$animation_opacity-notification-hide	0	消失时-结束透明度
$color-notification-bg-default	var(--semi-color-bg-3)	通知背景色
$color-notification_info-icon	var(--semi-color-info)	通知信息图标颜色
$color-notification_warning-icon	var(--semi-color-warning)	通知警告图标颜色
$color-notification_danger-icon	var(--semi-color-danger)	通知危险图标颜色
$color-notification_success-icon	var(--semi-color-success)	通知成功图标颜色
$color-notification_title-text	var(--semi-color-text-0)	通知标题文本颜色
$color-notification_content-text	var(--semi-color-text-1)	通知内容文本颜色
$color-notification_closeBtn-icon	var(--semi-color-text-2)	通知关闭按钮图标颜色
$color-notification_warning_light-bg	var(--semi-color-warning-light-default)	彩色通知警告背景色
$color-notification_warning_light-border	var(--semi-color-warning)	彩色通知警告描边色
$color-notification_success_light-bg	var(--semi-color-success-light-default)	彩色通知成功背景色
$color-notification_success_light-border	var(--semi-color-success)	彩色通知成功描边色
$color-notification_info_light-bg	var(--semi-color-info-light-default)	彩色通知信息背景色
$color-notification_info_light-border	var(--semi-color-info)	彩色通知信息描边色
$color-notification_danger_light-bg	var(--semi-color-danger-light-default)	彩色通知危险背景色
$color-notification_danger_light-border	var(--semi-color-danger)	彩色通知危险描边色
$color-notification_ambient-bg	var(--semi-color-bg-0)	透明背景色叠加层(与bg0保持一致不建议修改)
$width-notification_notice	auto	通知宽度
$width-notification_notice_minWidth	320px	通知最小宽度
$width-notification_notice-icon	$width-icon-extra-large	通知图标宽度
$width-notification_notice-border	1px	通知描边宽度
$spacing-notification_list-margin	0	通知列表外边距
$spacing-notification_list-padding	0	通知列表内边距
$spacing-notification_notice-paddingTop	$spacing-base	通知卡片顶部内边距
$spacing-notification_notice-paddingRight	$spacing-base-tight	通知卡片右侧内边距
$spacing-notification_notice-paddingBottom	$spacing-base	通知卡片底部内边距
$spacing-notification_notice-paddingLeft	$spacing-base-loose	通知卡片左侧内边距
$spacing-notification_notice-margin	$spacing-base-loose	通知卡片外边距
$spacing-notification_notice_title-marginBottom	$spacing-extra-tight	通知卡片标题底部外边距
$spacing-notification_notice_content_wrapper-marginRight	8px	通知卡片内容右侧外边距
$spacing-notification_notice_icon-marginRight	$spacing-base-tight	通知卡片图标右侧外边距
$radius-notification_notice	var(--semi-border-radius-medium)	通知卡片圆角大小
$font-notification_notice_title-fontWeight	$font-weight-bold	通知卡片标题字重
$font-notification_notice_content-fontWeight	$font-weight-regular	通知卡片内容字重