Alert

一种用于吸引用户注意力的提示框。

用法

标题

使用 title 属性设置 Alert 的标题。

title

请注意！

<template>
  <UAlert title="Heads up!" />
</template>

描述

使用 description 属性设置 Alert 的描述。

title

description

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert title="Heads up!" description="You can change the primary color in your app config." />
</template>

Icon

使用 icon 属性显示一个图标。

图标

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide-terminal"
  />
</template>

Avatar

使用 avatar 属性显示一个头像。

avatar.src

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
  />
</template>

颜色

使用 color 属性更改 Alert 的颜色。

color

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    color="neutral"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide-terminal"
  />
</template>

变体

使用 variant 属性更改 Alert 的变体。

color

variant

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    color="neutral"
    variant="subtle"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide-terminal"
  />
</template>

关闭

使用 close 属性显示一个用于关闭 Alert 的按钮。

当点击关闭按钮时，将触发 update:open 事件。

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    close
  />
</template>

您可以将 Button 组件的任何属性传递过来以进行自定义。

close.class

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    :close="{
      color: 'primary',
      variant: 'outline',
      class: 'rounded-full'
    }"
  />
</template>

关闭图标

使用 close-icon 属性来定制关闭按钮的 Icon。默认为 i-lucide-x。

closeIcon

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    close
    close-icon="i-lucide-arrow-right"
  />
</template>

你可以在 app.config.ts 中的 ui.icons.close 键下全局自定义此图标。

你可以在 vite.config.ts 中的 ui.icons.close 键下全局自定义此图标。

操作

使用 actions 属性为 Alert 添加一些按钮操作。

description

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Orientation

使用 orientation 属性更改 Alert 的排列方向。

description

orientation

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    orientation="horizontal"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

示例

`class` 属性

使用 class 属性覆盖 Alert 的基础样式。

class

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    class="rounded-none"
  />
</template>

`ui` 属性

使用 ui 属性覆盖 Alert 的插槽样式。

ui.icon

请注意！

你可以在应用配置中更改主色调。

<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide-rocket"
    :ui="{
      icon: 'size-11'
    }"
  />
</template>

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`title`		`string`
`description`		`string`
`图标`		`any`
`avatar`		`AvatarProps`
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`	`'solid'`	`"solid" \| "outline" \| "soft" \| "subtle"`
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` 内容和操作之间的排列方向。
`actions`		`ButtonProps[]` 显示操作列表当方向为 `vertical`（垂直）时，位于标题和描述下方当方向为 `horizontal`（水平）时，位于关闭按钮旁边`{ size: 'xs' }`
`close`	`false`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` 显示关闭按钮以撤销提示。`{ size: 'md', color: 'neutral', variant: 'link' }`
`closeIcon`	`appConfig.ui.icons.close`	`any` 关闭按钮中显示的图标。
`ui`		`{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; }`

插槽

插槽	类型
`前置`	`{ ui: object; }`
`title`	`{}`
`description`	`{}`
`actions`	`{}`
`close`	`{ ui: object; }`

事件

事件	类型
`update:open`	`[value: boolean]`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    alert: {
      slots: {
        root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
        wrapper: 'min-w-0 flex-1 flex flex-col',
        title: 'text-sm font-medium',
        description: 'text-sm opacity-90',
        icon: 'shrink-0 size-5',
        avatar: 'shrink-0',
        avatarSize: '2xl',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        close: 'p-0'
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-start',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: {
            root: 'bg-primary text-inverted'
          }
        },
        {
          color: 'primary',
          variant: 'outline',
          class: {
            root: 'text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'primary',
          variant: 'soft',
          class: {
            root: 'bg-primary/10 text-primary'
          }
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: {
            root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'neutral',
          variant: 'solid',
          class: {
            root: 'text-inverted bg-inverted'
          }
        },
        {
          color: 'neutral',
          variant: 'outline',
          class: {
            root: 'text-highlighted bg-default ring ring-inset ring-default'
          }
        },
        {
          color: 'neutral',
          variant: 'soft',
          class: {
            root: 'text-highlighted bg-elevated/50'
          }
        },
        {
          color: 'neutral',
          variant: 'subtle',
          class: {
            root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        alert: {
          slots: {
            root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
            wrapper: 'min-w-0 flex-1 flex flex-col',
            title: 'text-sm font-medium',
            description: 'text-sm opacity-90',
            icon: 'shrink-0 size-5',
            avatar: 'shrink-0',
            avatarSize: '2xl',
            actions: 'flex flex-wrap gap-1.5 shrink-0',
            close: 'p-0'
          },
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-start',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: {
                root: 'bg-primary text-inverted'
              }
            },
            {
              color: 'primary',
              variant: 'outline',
              class: {
                root: 'text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'primary',
              variant: 'soft',
              class: {
                root: 'bg-primary/10 text-primary'
              }
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: {
                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'neutral',
              variant: 'solid',
              class: {
                root: 'text-inverted bg-inverted'
              }
            },
            {
              color: 'neutral',
              variant: 'outline',
              class: {
                root: 'text-highlighted bg-default ring ring-inset ring-default'
              }
            },
            {
              color: 'neutral',
              variant: 'soft',
              class: {
                root: 'text-highlighted bg-elevated/50'
              }
            },
            {
              color: 'neutral',
              variant: 'subtle',
              class: {
                root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'solid'
          }
        }
      }
    })
  ]
})

为便于阅读，compoundVariants 中的某些颜色已省略。请在 GitHub 上查看源代码。

更新日志

暂无近期更新

主题

头像