KMessageBox

A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.

Install

pnpm

pnpm add @ikun-ui/message-box

yarn

yarn add @ikun-ui/message-box

npm

npm install @ikun-ui/message-box

Basic usage

Alert MessageBox

Alert MessageBox is used for message notification type scenarios

Confirm MessageBox

Confirm MessageBox is used in scenarios where confirmation messages are required

Display different emotion category message box by emoType attributes

Prompt MessageBox

Prompt MessageBox is used for scenarios where you need to confirm a message and fill out a simple form

TIP

inputErrorMessage and inputValidator properties can be verified

Customize button text

The cancelBtnText and confirmBtnText attributes set the button text

Custom title and content

You can render content and title through slots

TIP

When customizing the title and content, if you want to perform form validation, then you can handle it yourself through the onConfirm event.

MessageBox Options

Name	Type	Default	Description
type	'confirm' / 'alert'/ 'prompt'	-	The category of the message box
emoType	'info' / 'warning' 'error' / 'success'	-	The emotion category of the message box (only type='confirm')
title	string / SvelteComponent	-	The title content of the message box, which can be a html string or a svelte component
content	string / SvelteComponent	-	The content of the message box, which can be a html string or a svelte component
cancelBtnText	string	Cancel	cancel button text (only type != 'alert')
confirmBtnText	string	Confirm	confirm button text
cancelBtnCls	string	-	cancel button class (only type != 'alert')
confirmBtnCls	string	-	confirm button class
onConfirm	((r?: boolean, v?: string) => void)	-	The callback method when the confirm, Only type='prompt' will return parameters, r represents the verification result, v represents the input data
onCancel	IKunUncertainFunction	-	The callback method when the cancel
layout	'center' / 'right'	-	confirm button and cancel button layout
inputValidator	RegExp / (v: string) => boolean	-	validation function for the input. (only type='confirm')
inputErrorMessage	string	-	error message when validation fails (only type='confirm')
inputPlaceholder	string	-	input placeholder (only type='confirm')
cls	string	-	Additional class
attrs	Record<string, string>	{}	Additional attributes

MessageBox Api

Name	Type	Description
KMsgBox	<T,C>(options: MsgBoxOptions<T,C>)=>MsgBoxInst	Render a message box according to the incoming options and return the message box instance
KMsgBox.confirm	<T,C>(options: MsgBoxOptions<T,C>)=>MsgBoxInst	Render a message box of confirm type according to the incoming options and return the message box instance
KMsgBox.alert	<T,C>(options: MsgBoxOptions<T,C>)=>MsgBoxInst	Render a message box of alert type according to the incoming options and return the message box instance
KMsgBox.prompt	<T,C>(options: MsgBoxOptions<T,C>)=>MsgBoxInst	Render a message box of prompt type according to the incoming options and return the message box instance