Skip to content

KNotification

Display a notification message globally.

Install

bash
pnpm add @ikun-ui/notify
bash
yarn add @ikun-ui/notify
bash
npm install @ikun-ui/notify

Basic usage

Determine the display position by setting the placement option

Different emotion categories

Display different emotion category notifications by calling different methods

TIP

The method of NotifyInst.info/success/error/warning takes precedence over options.type.

Closable notification

Through the options, you can set whether the notification can be closed, the duration of existence, automatic close and close callback

notification with offset

Sometimes you may need the notification to be slightly offset by a distance in the y-axis direction

Update the notification

Custom title and content

You can render content through slots

Notification Options

NameTypeDefaultDescription
placement'right-top' / 'left-top' / 'right-bottom' / 'left-bottom'right-topWhere the notification appears
closebooleanfalseWhether the notification can be closed manually
autoClosebooleanfalseWhether the notification is automatically closed
durationnumber3000Notification's auto-close timing (only when autoClose = true) takes effect
onCloseIKunUncertainFunction-The callback method when the notification is closed
type'info' / 'warning' 'error' / 'success'-The emotion category of the notification
offsetnumber0Notification is offset on the y-axis
titlestring / SvelteComponent-The title content of the notification, which can be a html string or a svelte component
contentstring / SvelteComponent-The content of the notification, which can be a html string or a svelte component
clsstring-Additional class
attrsRecord<string, string>{}Additional attributes

Notification Api

NameTypeDescription
KNotify<T, C>(options: NotifyOptions<T, C>)=>NotifyInstRender a notification according to the incoming options and return the notification instance
KNotify.info<T, C>(options: NotifyOptions<T, C>)=>NotifyInstRender a notification of info type according to the incoming options and return the notification instance
KNotify.warning<T, C>(options: NotifyOptions<T, C>)=>NotifyInstRender a notification of warning type according to the incoming options and return the notification instance
KNotify.success<T, C>(options: NotifyOptions<T, C>)=>NotifyInstRender a notification of success type according to the incoming options and return the notification instance
KNotify.error<T, C>(options: NotifyOptions<T, C>)=>NotifyInstRender a notification of error type according to the incoming options and return the notification instance
KNotify.update<T, C>(inst: typeof NotifyInst, options: NotifyOptions<T, C>)=>voidUpdate the specified notification
KNotify.clearAll() => voidClear all notifications
KNotify.clear(inst: typeof NotifyInst) => voidClear the specified notification

MIT Licensed