Alert 通知提示

用于通知提示场景的 MoriUI 组件。

导入

import { Alert, AlertAction, AlertDescription, AlertTitle } from 'moriui'

示例

概览

警告提示展示关键信息。

<script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle } from 'moriui'
</script>

<template>
  <Alert>
    <svg
      class="h-4 w-4"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
    ><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm1-13h-2v6h2zm0 8h-2v2h2z" /></svg>
    <AlertTitle>注意</AlertTitle>
    <AlertDescription>这是一个标准通知提示。</AlertDescription>
  </Alert>
</template>

基础

默认变体用于通用提示。

<script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle } from 'moriui'
</script>

<template>
  <Alert>
    <AlertTitle>基本信息</AlertTitle>
    <AlertDescription>这是 Alert 组件的基础用法。</AlertDescription>
  </Alert>
</template>

破坏性

destructive 变体表达危险操作。

<script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle } from 'moriui'
</script>

<template>
  <Alert variant="destructive">
    <AlertTitle>错误</AlertTitle>
    <AlertDescription>操作失败，请重试。</AlertDescription>
  </Alert>
</template>

自定义颜色

调用方可覆盖局部颜色。

<script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle } from 'moriui'

  const variants = ['default', 'info', 'success', 'warning', 'destructive'] as const
</script>

<template>
  <div class="grid gap-2">
    <Alert v-for="v in variants" :key="v" :variant="v">
      <AlertTitle class="capitalize">
        {{ v }}
      </AlertTitle>
      <AlertDescription>{{ v === 'destructive' ? '发生了错误。' : '这是一条提示信息。' }}</AlertDescription>
    </Alert>
  </div>
</template>

操作

AlertAction 可放置关闭或更多操作。

<script setup lang="ts">
  import { Alert, AlertAction, AlertDescription, AlertTitle, Button } from 'moriui'
</script>

<template>
  <Alert>
    <AlertTitle>升级可用</AlertTitle>
    <AlertDescription>新版本 v2.0 可以安装了。</AlertDescription>
    <AlertAction as-child>
      <Button size="sm" variant="outline">
        更新
      </Button>
    </AlertAction>
  </Alert>
</template>

RTL

在 RTL 页面中保持自然的内容顺序。

<script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle, DirectionProvider } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Alert>
      <AlertTitle>تنبيه</AlertTitle>
      <AlertDescription>هذا إشعار تجريبي في الاتجاه من اليمين إلى اليسار.</AlertDescription>
    </Alert>
  </DirectionProvider>
</template>

使用说明

组合方式

Alert 由 Title、Description 和 Action 组成，适合在页面内展示即时反馈。

变体

variant 支持 default 与 destructive，通过颜色区分信息层级。

RTL

Alert 继承外围书写方向；图标与文本顺序会随 dir 调整。

变体

Alert variant 支持 default 与 destructive。

可访问性

Alert 根元素默认包含 role="alert"，能够触发屏幕阅读器的即时朗读。动态出现的 Alert 会通过该角色自动宣告。

API 参考

属性类型默认值说明
Alert variant'default' | 'destructive''default'警报的视觉层级。
AlertTitle classHTMLAttributes["class"]undefined合并到标题的调用方类。
AlertDescription classHTMLAttributes["class"]undefined合并到说明的调用方类。
AlertAction classHTMLAttributes["class"]undefined合并到操作区域的调用方类。