Alert Warning prompt ​

• Source code
• Document editing

introduce ​

DkAlert Used for warning prompts to display information that needs attention.

Basic usage ​

The component provides four types, specified by the type attribute, with a default value of info。

<dk-alert>info alert</dk-alert>
<dk-alert type="success">success alert</dk-alert>
<dk-alert type="warning">warning alert</dk-alert>
<dk-alert type="error">error alert</dk-alert>

icon ​

icon is used to customize the front icon,closeIcon is used to customize the close icon.

<dk-alert :icon="'IconSysInformation'">dk-plus-alert</dk-alert>
<dk-alert :closeIcon="'IconCollectActive'">dk-plus-alert</dk-alert>

Text centered ​

use center Attribute to center text horizontally.

<dk-alert :icon="'IconSysInformation'" center>dk-plus-alert </dk-alert>

Text description ​

description Attribute to center the text horizontally to add a more detailed description to the Alert component to help users learn more information, in addition to the mandatory title attribute，You can set the description attribute to help you better introduce it, which we call auxiliary text. Auxiliary text can only store text content. When the content exceeds the length limit, Line wrap and word wrap will be displayed.

<dk-alert
  :icon="'IconSysInformation'"
  description="dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description..."
>
  dk-plus-alert
</dk-alert>

closed event ​

onclose The callback function triggered when the Alert component is closed.

<dk-alert :icon="'IconSysInformation'" @close="handleClose">dk-plus-alert </dk-alert>

const handleClose = (): void => { console.log('close') }

API ​

Contributors ​