Alert 提示框组件演示 📢

本文展示 Alert 提示框组件的各种功能和用法。这个组件可以帮助你：

• 突出显示重要信息
• 区分不同类型的提示（提醒、信息、问题、警告、错误）
• 支持卡片风格和扁平风格
• 自定义标题、图标和颜色

基本用法

提醒（Tip）

信息（Info）

问题（Question）

警告（Warning）

错误（Error）

自定义标题

你可以通过 title 属性自定义标题：

卡片风格

使用 card 属性启用卡片风格（默认启用）：

扁平风格

使用 flat 属性禁用卡片风格：

自定义图标

你可以通过 icon 属性指定自定义的 Iconify 图标：

自定义颜色

你可以通过 color 属性自定义主题色：

组合使用

你可以同时使用多个属性来创建独特的提示框：

仅标题，自定义图标和颜色

组件使用方式

在 MDX 文件中导入并使用：

import Alert from '../../components/post/Alert.astro';

<Alert type="tip">
  这是一个提示框
</Alert>

<Alert type="info" title="自定义标题" icon="ri:lightbulb-fill" color="#8B5CF6">
  支持 Markdown 和 **富文本内容**
</Alert>

支持的类型

类型	说明	默认图标	默认颜色
tip	提醒	ph:notepad-bold	#3A7（绿色）
info	信息	ph:info-bold	var(—c-primary)
question	问题	ph:question-bold	#3AF（青色）
warning	警告	ph:warning-bold	#F80（橙色）
error	错误	ph:x-circle-bold	#F33（红色）

Props 属性说明

属性	类型	默认值	说明
type	'tip' | 'info' | 'question' | 'warning' | 'error'	'tip'	提示框类型
card	boolean	true	是否启用卡片风格
flat	boolean	false	是否使用扁平风格（与 card 相反）
icon	string	-	自定义 Iconify 图标
color	string	-	自定义主题颜色
title	string	-	自定义标题

图标资源

图标可以从以下网站获取：

• Iconify - 超过 200,000 个开源图标
• Yesicon - 图标搜索和浏览工具

图标格式为 集合名：图标名，例如：

• ri:lightbulb-fill
• ph:question-bold
• carbon:favorite

结语

Alert 组件让博客中的重要信息更加醒目，通过不同的类型和样式帮助读者快速识别内容的性质。

你可以根据需要选择合适的类型和风格，让博客内容更加丰富多彩！🎉