警示

info / success / warning / error 四态警示条,带关闭按钮(演示 JS 点击移除)。

版本更新

v0.2.0 已发布:新增数据展示族组件。

构建成功

dist 产物已生成,耗时 42 秒。

配额将尽

本月构建时长已用 80%,超出后将排队执行。

发布失败

资源校验未通过:封面图尺寸不足 640×960。
<div class="demo-col-wide">  <div class="alert alert--info">    <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>    <div class="alert-content">      <p class="alert-title">版本更新</p>      <div class="alert-body">v0.2.0 已发布:新增数据展示族组件。</div>    </div>    <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>  </div>  <div class="alert alert--success">    <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span>    <div class="alert-content">      <p class="alert-title">构建成功</p>      <div class="alert-body">dist 产物已生成,耗时 42 秒。</div>    </div>    <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>  </div>  <div class="alert alert--warning">    <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>    <div class="alert-content">      <p class="alert-title">配额将尽</p>      <div class="alert-body">本月构建时长已用 80%,超出后将排队执行。</div>    </div>    <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>  </div>  <div class="alert alert--error">    <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>    <div class="alert-content">      <p class="alert-title">发布失败</p>      <div class="alert-body">资源校验未通过:封面图尺寸不足 640×960。</div>    </div>    <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>  </div></div>

安装

bun add @icen.ai/ui

一行引入该组件(CSS 与 behavior 自动带上,无需关心内部 CSS 文件名):

import '@icen.ai/ui/kit/alert';

也可以用脚手架直接打印引入行:

bunx --bun @icen.ai/ui add alert

Astro 项目注意:kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS(import '@icen.ai/ui/components/feedback.css';),JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

<div class="alert alert--success">  <span class="alert-icon">…svg…</span>  <div class="alert-content">    <p class="alert-title">标题</p>    <div class="alert-body">正文</div>  </div>  <button class="alert-close" type="button" aria-label="关闭">×</button></div>