ikun-uiKMessage
Display global messages as feedback in response to user operations.
Install
bash
pnpm add @ikun-ui/messagepnpm add @ikun-ui/messagebash
yarn add @ikun-ui/messageyarn add @ikun-ui/messagebash
npm install @ikun-ui/messagenpm install @ikun-ui/messageBasic usage
Determine the display position by setting the placement option
Different emotion categories
Display different emotion category messages by calling different methods
TIP
The method of MessageInst.info/success/error/warning takes precedence over options.type.
Closable message
Through the options, you can set whether the message can be closed, the duration of existence, automatic close and close callback
message with offset
Sometimes you may need the message to be slightly offset by a distance in the y-axis direction
Update the message
Custom content
You can render content through slots
Message Options
| Name | Type | Default | Description |
|---|---|---|---|
| placement | 'right-top' / 'left-top' / 'right-bottom' / 'left-bottom' | right-top | Where the message appears |
| close | boolean | false | Whether the message can be closed manually |
| autoClose | boolean | false | Whether the message is automatically closed |
| duration | number | 3000 | Message's auto-close timing (only when autoClose = true) takes effect |
| onClose | IKunUncertainFunction | - | The callback method when the message is closed |
| type | 'info' / 'warning' 'error' / 'success' | - | The emotion category of the message |
| offset | number | 0 | Message is offset on the y-axis |
| title | string / SvelteComponent | - | The title content of the message, which can be a html string or a svelte component |
| content | string / SvelteComponent | {} | The content of the message, which can be a html string or a svelte component |
| cls | string | - | Additional class |
| attrs | any | {} | Additional attributes |
Message Api
| Name | Type | Description |
|---|---|---|
| KMessage | (options: MessageOptions)=>MessageInst | Render a message according to the incoming options and return the message instance |
| KMessage.info | (options: MessageOptions)=>MessageInst | Render a message of info type according to the incoming options and return the message instance |
| KMessage.warning | (options: MessageOptions)=>MessageInst | Render a message of warning type according to the incoming options and return the message instance |
| KMessage.success | (options: MessageOptions)=>MessageInst | Render a message of success type according to the incoming options and return the message instance |
| KMessage.error | (options: MessageOptions)=>MessageInst | Render a message of error type according to the incoming options and return the message instance |
| KMessage.update | (inst: typeof MessageInst, options: MessageOptions)=>void | Update the specified message |
| KMessage.clearAll | () => void | Clear all messages |
| KMessage.clear | (inst: typeof MessageInst) => Promise<void> | Clear the specified message |