Alert 警告提示

用于显示需要用户注意的信息。基于 BrConfigProvider 实现全局主题配置。

组件特性

🎨 多种变体：支持 default、primary、success、destructive、warning、info 等多种视觉风格。
❌ 可关闭：支持添加关闭按钮，可通过组合式 API 灵活实现。
📐 可折叠：支持长内容的折叠展开，适合显示详细信息。
🖼️ 图标支持：支持在警告提示中添加图标，增强视觉表达。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { Terminal } from 'lucide-vue-next'
</script>

<template>
  <BrAlert class="w-full">
    <Terminal class="h-4 w-4" />
    <BrAlertTitle>Default Alert</BrAlertTitle>
    <BrAlertDescription>This is a default alert.</BrAlertDescription>
  </BrAlert>
</template>

变体

使用 variant 属性控制警告提示的视觉风格。

Default: 默认风格。
Primary: 主色风格。
Success: 成功色风格。
Destructive: 破坏性（错误）色风格。
Warning: 警告色风格。
Info: 信息色风格。

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrStack } from '@breezeui/vue'
import { Terminal, Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-vue-next'
</script>

<template>
  <BrStack vertical gap="4" class="w-full">
    <BrAlert variant="default">
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>Default</BrAlertTitle>
      <BrAlertDescription>Default alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="primary">
      <Info class="h-4 w-4" />
      <BrAlertTitle>Primary</BrAlertTitle>
      <BrAlertDescription>Primary alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="success">
      <CheckCircle class="h-4 w-4" />
      <BrAlertTitle>Success</BrAlertTitle>
      <BrAlertDescription>Success alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="destructive">
      <XCircle class="h-4 w-4" />
      <BrAlertTitle>Destructive</BrAlertTitle>
      <BrAlertDescription>Destructive alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="warning">
      <AlertTriangle class="h-4 w-4" />
      <BrAlertTitle>Warning</BrAlertTitle>
      <BrAlertDescription>Warning alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="info">
      <Info class="h-4 w-4" />
      <BrAlertTitle>Info</BrAlertTitle>
      <BrAlertDescription>Info alert.</BrAlertDescription>
    </BrAlert>
  </BrStack>
</template>

自定义内容 (可关闭)

通过组合式 API，你可以轻松添加自定义内容，例如关闭按钮。

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { X, Terminal } from 'lucide-vue-next'
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <div v-if="visible" class="w-full">
    <BrAlert>
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>Closable Alert</BrAlertTitle>
      <BrAlertDescription>You can close this alert.</BrAlertDescription>
      <button 
        class="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-all hover:bg-gray-100/50 hover:opacity-100 focus:outline-none active:bg-gray-200 active:scale-95 h-6 w-6 !p-0 inline-flex items-center justify-center" 
        @click="visible = false"
      >
        <X class="h-4 w-4" />
        <span class="sr-only">Close</span>
      </button>
    </BrAlert>
  </div>
  <button v-else class="text-sm underline" @click="visible = true">Reset</button>
</template>

自定义内容 (可折叠)

你可以利用 Vue 的标准特性构建复杂的交互，如可折叠的警告提示。

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { ChevronDown, Terminal } from 'lucide-vue-next'
import { ref } from 'vue'

const expanded = ref(false)
</script>

<template>
  <BrAlert class="w-full">
    <Terminal class="h-4 w-4" />
    <BrAlertTitle class="flex items-center justify-between">
      Collapsible Alert
      <button 
        class="rounded-md opacity-70 ring-offset-background transition-all hover:bg-gray-100/50 hover:opacity-100 focus:outline-none active:bg-gray-200 active:scale-95 h-6 w-6 !p-0 inline-flex items-center justify-center" 
        @click="expanded = !expanded"
      >
        <ChevronDown class="h-4 w-4 transition-transform duration-200" :class="{ 'rotate-180': expanded }" />
        <span class="sr-only">Toggle</span>
      </button>
    </BrAlertTitle>
    <BrAlertDescription v-show="expanded" class="mt-2">
      Click the arrow to expand/collapse me.
    </BrAlertDescription>
  </BrAlert>
</template>

带图标

将图标作为 Alert 组件的第一个子元素即可。

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrStack } from '@breezeui/vue'
import { Terminal, Waves } from 'lucide-vue-next'
</script>

<template>
  <BrStack vertical gap="4" class="w-full">
    <BrAlert>
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>With Icon</BrAlertTitle>
      <BrAlertDescription>Alert with standard icon.</BrAlertDescription>
    </BrAlert>
    <BrAlert>
      <Waves class="h-4 w-4" />
      <BrAlertTitle>With Another Icon</BrAlertTitle>
      <BrAlertDescription>Alert with another icon.</BrAlertDescription>
    </BrAlert>
  </BrStack>
</template>

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrConfigProvider, BrStack } from '@breezeui/vue'
import { Terminal } from 'lucide-vue-next'

const theme = {
  radius: 1.5,
  primary: '#8b5cf6', // Violet
  destructive: '#ec4899', // Pink
}
</script>

<template>
  <BrConfigProvider :theme="theme" class="w-full">
    <BrStack vertical gap="4" class="p-4 border rounded-lg w-full">
      <BrAlert variant="default">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Default</BrAlertTitle>
        <BrAlertDescription>Radius 1.5rem</BrAlertDescription>
      </BrAlert>
      <BrAlert variant="primary">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Primary</BrAlertTitle>
        <BrAlertDescription>Violet primary color</BrAlertDescription>
      </BrAlert>
      <BrAlert variant="destructive">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Destructive</BrAlertTitle>
        <BrAlertDescription>Pink destructive color</BrAlertDescription>
      </BrAlert>
    </BrStack>
  </BrConfigProvider>
</template>

局部定制 (TailwindCSS)

你可以直接使用 TailwindCSS 工具类覆盖样式。

<template>
  <BrAlert class="bg-indigo-500 hover:bg-indigo-600">
    <BrAlertTitle>Custom Class</BrAlertTitle>
    <BrAlertDescription>Custom styled alert.</BrAlertDescription>
  </BrAlert>
</template>

API

组件

BrAlert: 主容器。
BrAlertTitle: 标题组件。
BrAlertDescription: 描述组件。

BrAlert Props

属性名	类型	默认值	说明
variant	`string`	`'default'`	视觉风格变体: `default`, `primary`, `success`, `destructive`, `warning`, `info`
class	`string`	`undefined`	自定义类名

#Alert 警告提示

#组件特性

#基础用法

#变体

#自定义内容 (可关闭)

#自定义内容 (可折叠)

#带图标

#主题定制

#全局定制 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#组件

#BrAlert Props