TAlert / 提示

Alerts display brief messages about operation results or system status. Supports multiple types, custom icons, closeable dismiss, and fade transition. / 提示组件用于展示操作结果或系统状态的简短消息，支持多种类型、自定义图标、可关闭和淡入淡出过渡动画。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
type	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'info'	Alert type (overridden by color)
color	TablerColor	—	Custom color (overrides type)
title	string	—	Title / 标题
description	string	—	Description / 描述文字
icon	Icon	—	Custom icon / 自定义图标
showIcon	boolean	true	Show icon / 显示图标
important	boolean	false	Important alert style / 重要通知样式
closable	boolean	true	Show close button / 显示关闭按钮

Events / 事件

Event	Description / 说明
@close	Emitted when alert is dismissed / 关闭时触发

Slots / 插槽

Slot	Description / 说明
default	Description content / 描述内容
icon	Custom icon content / 自定义图标
title	Custom title content / 自定义标题

Basic Usage / 基础用法

<script setup lang="ts">
import { TAlert } from '@gulcc/tabler-vue'
</script>

<template>
  <TAlert type="success" title="Success / 成功">
    Operation completed successfully. / 操作已成功完成。
  </TAlert>

  <TAlert type="danger" title="Error / 错误">
    Please check your input. / 请检查输入后重试。
  </TAlert>

  <TAlert type="warning" title="Warning / 警告">
    Your session will expire soon. / 您的会话即将过期。
  </TAlert>

  <TAlert type="info" title="Info / 提示">
    New version available. / 新版本可用。
  </TAlert>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TAlert } from '@gulcc/tabler-vue'
import { IconRocket } from '@tabler/icons-vue'
</script>

<template>
  <!-- Custom color / 自定义颜色 -->
  <TAlert color="purple" title="Custom Color / 自定义颜色">
    Using purple-lt / 使用紫色浅色变体
  </TAlert>

  <!-- Important alert / 重要通知 -->
  <TAlert type="danger" title="Important / 重要通知" important>
    This action cannot be undone. / 此操作不可撤销。
  </TAlert>

  <!-- Without icon / 无图标 -->
  <TAlert type="success" :show-icon="false" title="No Icon / 无图标">
    Plain text alert / 纯文字提示
  </TAlert>

  <!-- Custom icon / 自定义图标 -->
  <TAlert type="primary" title="Custom Icon / 自定义图标">
    <template #icon>
      <IconRocket />
    </template>
    Alert with custom rocket icon / 自定义火箭图标
  </TAlert>

  <!-- Non-dismissible / 不可关闭 -->
  <TAlert type="info" title="Persistent / 持久提示" :closable="false">
    This alert cannot be dismissed. / 此提示不可关闭。
  </TAlert>
</template>

Tips / 避坑指南

• color prop overrides type when both are set — color controls the CSS class, type is ignored
• The close button triggers @close event — use this to track user dismissals
• Alert uses <Transition name="alert-fade"> for exit animation — requires no extra CSS
• description renders inside <p> tag; use default slot for richer HTML content
• When using custom icon slot, showIcon must be true (default) to make the icon area visible