提示

用于显示用户需要注意的提示信息。

成功！您的更改已保存

这是一个包含图标、标题和描述的提示框。

此提示框包含标题和图标，没有描述。

无法处理您的付款。

请核实您的账单信息后重试。

检查您的银行卡详细信息
确保余额充足
核实账单地址

<script setup lang="ts">
import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert>
      <CheckCircle2Icon />
      <AlertTitle>Success! Your changes have been saved</AlertTitle>
      <AlertDescription>
        This is an alert with icon, title and description.
      </AlertDescription>
    </Alert>

    <Alert>
      <PopcornIcon />
      <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
    </Alert>

    <Alert variant="destructive">
      <AlertCircleIcon />
      <AlertTitle>Unable to process your payment.</AlertTitle>
      <AlertDescription>
        <p>Please verify your billing information and try again.</p>
        <ul class="mt-2 list-inside list-disc space-y-1">
          <li>Check your card details</li>
          <li>Ensure sufficient funds</li>
          <li>Verify billing address</li>
        </ul>
      </AlertDescription>
    </Alert>
  </div>
</template>

安装


pnpm dlx shadcn-vue@latest add alert

使用方法

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add components and dependencies to your app using the cli.
    </AlertDescription>
  </Alert>
</template>

手风琴 (Accordion)警示对话框 (Alert Dialog)

本页内容

安装用法