ikun-uiKNotification
Display a notification message globally.
Install
bash
pnpm add @ikun-ui/notifypnpm add @ikun-ui/notifybash
yarn add @ikun-ui/notifyyarn add @ikun-ui/notifybash
npm install @ikun-ui/notifynpm install @ikun-ui/notifyBasic 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
| Name | Type | Default | Description |
|---|---|---|---|
| placement | 'right-top' / 'left-top' / 'right-bottom' / 'left-bottom' | right-top | Where the notification appears |
| close | boolean | false | Whether the notification can be closed manually |
| autoClose | boolean | false | Whether the notification is automatically closed |
| duration | number | 3000 | Notification's auto-close timing (only when autoClose = true) takes effect |
| onClose | IKunUncertainFunction | - | The callback method when the notification is closed |
| type | 'info' / 'warning' 'error' / 'success' | - | The emotion category of the notification |
| offset | number | 0 | Notification is offset on the y-axis |
| title | string / SvelteComponent | - | The title content of the notification, which can be a html string or a svelte component |
| content | string / SvelteComponent | {} | The content of the notification, which can be a html string or a svelte component |
| cls | string | - | Additional class |
| attrs | any | {} | Additional attributes |
Notification Api
| Name | Type | Description |
|---|---|---|
| KNotify | (options: NotifyOptions)=>NotifyInst | Render a notification according to the incoming options and return the notification instance |
| KNotify.info | (options: NotifyOptions)=>NotifyInst | Render a notification of info type according to the incoming options and return the notification instance |
| KNotify.warning | (options: NotifyOptions)=>NotifyInst | Render a notification of warning type according to the incoming options and return the notification instance |
| KNotify.success | (options: NotifyOptions)=>NotifyInst | Render a notification of success type according to the incoming options and return the notification instance |
| KNotify.error | (options: NotifyOptions)=>NotifyInst | Render a notification of error type according to the incoming options and return the notification instance |
| KNotify.update | (inst: typeof NotifyInst, options: NotifyOptions)=>void | Update the specified notification |
| KNotify.clearAll | () => void | Clear all notifications |
| KNotify.clear | (inst: typeof NotifyInst) => Promise<void> | Clear the specified notification |