警报
显示警报元素以引起注意。
用法
将 title 传递给您的警报。
注意！
<template>
<UAlert title="Heads up!" />
</template>
描述
除了 title 之外，您还可以添加 description。
注意！
您可以使用 cli 将组件添加到您的应用程序。
<template>
<UAlert
description="You can add components to your app using the cli."
title="Heads up!"
/>
</template>
图标
通过使用此模式设置 icon 属性，使用来自 Iconify 的任何图标：i-{collection_name}-{icon_name}，或在 ui.alert.default.icon 中全局更改它。
注意！
您可以使用 cli 将组件添加到您的应用程序。
<template>
<UAlert
icon="i-heroicons-command-line"
description="You can add components to your app using the cli."
title="Heads up!"
/>
</template>
头像
将 avatar 属性用作 object，并使用其任何属性对其进行配置。
注意！
您可以使用 cli 将组件添加到您的应用程序。
<template>
<UAlert
description="You can add components to your app using the cli."
:avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
title="Heads up!"
/>
</template>
样式
使用 color 和 variant 属性来更改 Alert 的视觉样式。
color可以是ui.colors对象中的任何颜色，也可以是white（默认）。variant可以是solid（默认）、outline、soft或subtle。
注意！
您可以使用 cli 将组件添加到您的应用程序。
<template>
<UAlert
icon="i-heroicons-command-line"
color="primary"
variant="solid"
title="Heads up!"
description="You can add components to your app using the cli."
/>
</template>
关闭
使用 close-button 属性来隐藏或自定义 Alert 上的关闭按钮。
您可以将 Button 组件的所有属性传递给 close-button 属性，或通过 ui.alert.default.closeButton 全局传递，以自定义它。
它默认为 null，这意味着不会显示关闭按钮。当点击关闭按钮时，将发出 close 事件。
注意！
<template>
<UAlert
:close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link', padded: false }"
title="Heads up!"
/>
</template>
操作
使用 actions 属性向 Alert 添加操作。
与 closeButton 一样，您可以将 Button 组件的所有属性以及 click 函数传递给操作，但也可以通过 ui.alert.default.actionButton 全局自定义操作的默认样式。
注意！
<template>
<UAlert
:actions="[{ label: 'Action 1' }, { variant: 'ghost', color: 'gray', label: 'Action 2' }]"
title="Heads up!"
/>
</template>
无论你是否设置了 description，操作的呈现方式都会有所不同。
注意！
您可以使用 cli 将组件添加到您的应用程序。
<template>
<UAlert
:actions="[{ variant: 'solid', color: 'primary', label: 'Action 1' }, { variant: 'outline', color: 'primary', label: 'Action 2' }]"
title="Heads up!"
description="You can add components to your app using the cli."
/>
</template>
插槽
title / description
使用 #title 和 #description 插槽来自定义 Alert。
当你想要显示 HTML 内容时，这会很方便。为了实现这一点，你可以定义这些插槽并使用 v-html 指令。
注意！
你可以使用 cli 将 组件 添加到你的应用程序中。
<template>
<UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
<template #title="{ title }">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="title" />
</template>
<template #description>
You can add <b>components</b> to your app using the <u>cli</u>.
</template>
</UAlert>
</template>
icon 新
使用 #icon 插槽来自定义显示的图标。
自定义 Alert 图标
将自定义内容插入图标插槽中！
<template>
<UAlert title="Customize Alert Icon" description="Insert custom content into the icon slot!" icon="i-heroicons-command-line">
<template #icon="{ icon }">
<UBadge size="sm">
<UIcon :name="icon" />
</UBadge>
</template>
</UAlert>
</template>
avatar 新
使用 #avatar 插槽来自定义可显示的头像。
自定义 Alert 头像
将自定义内容插入头像插槽中！
<template>
<UAlert
title="Customize Alert Avatar"
description="Insert custom content into the avatar slot!"
:avatar="{
src: 'https://avatars.githubusercontent.com/u/739984?v=4',
alt: 'Avatar'
}"
>
<template #avatar="{ avatar }">
<UAvatar
v-bind="avatar"
chip-color="primary"
chip-text=""
chip-position="top-right"
/>
</template>
</UAlert>
</template>
属性
空{}空config.default.iconconfig.default.colorconfig.default.variant"solid""outline""soft""subtle"空[]config.default.closeButton as unknown as Button配置
{
wrapper: 'w-full relative overflow-hidden',
inner: 'w-0 flex-1',
title: 'text-sm font-medium',
description: 'mt-1 text-sm leading-4 opacity-90',
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
shadow: '',
rounded: 'rounded-lg',
padding: 'p-4',
gap: 'gap-3',
icon: {
base: 'flex-shrink-0 w-5 h-5',
},
avatar: {
base: 'flex-shrink-0 self-center',
size: 'md',
},
color: {
white: {
solid: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800',
},
},
variant: {
solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25',
},
default: {
color: 'white',
variant: 'solid',
icon: null,
closeButton: null,
actionButton: {
size: 'xs',
color: 'primary',
variant: 'link',
},
},
}