Alert 警告提示
基本用法
主要用于官网吊顶提示
云原生开源沙龙北京站开启报名,详情请点击了解。
<Alert text={`云原生开源沙龙北京站开启报名,详情请<a style="color: inherit; display: inline" href="https://nacos.io/blog/nacos-gvr7dx_awbbpb_sozg59av10r22awa/?source=activity_activity-preview">点击</a>了解。`} bgTheme="primary" textTheme="secondary"/>
云原生开源沙龙北京站开启报名,详情请点击了解。
<Alert text={`云原生开源沙龙北京站开启报名,详情请<a style="color: inherit; display: inline" href="https://nacos.io/blog/nacos-gvr7dx_awbbpb_sozg59av10r22awa/?source=activity_activity-preview">点击</a>了解。`} bgTheme="accent" textTheme="base-100" classes={{container:"h-[30px] border-2 border-primary", text:"font-bold",button:'mr-6'}}/>
API
Alert
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
bgTheme | 背景颜色 使用 tailwind.config.mjs 中设置的 theme,例如 primary, gray, secondary… 等 | string | ”primary” |
textTheme | 文字颜色 使用 tailwind.config.mjs 中设置的 theme,例如 primary, gray, secondary… 等 | string | ”secondary” |
text | 标签名颜色 使用 tailwind.config.mjs 中设置的 theme,例如 primary, gray, secondary… 等 | string | ”gray” |
classes | 作用于 Alert 的样式 | Alert.classes | - |
Alert.classes
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
container | 作用于卡片最外层包裹元素样式 | string | ”w-96” |
title | 作用于卡片标题区域样式 | string | "" |
body | 作用于卡片内容区域样式 | string | "" |
actions | 作用于卡片底部操作组 | string | "" |