描述列表

desc--bordered 格线列表（--desc-cols 控制列数，--desc-span 跨列）。

发布信息

作品名称: 星野之下
版本: v1.3.0
构建状态: 成功
更新时间: 2026-07-28 10:24
简介: 一款关于星空与约定的短篇视觉小说。

<div class="desc desc--bordered">  <p class="desc-title">发布信息</p>  <dl class="desc-grid" style="--desc-cols:2">    <div class="desc-item"><dt>作品名称</dt><dd>星野之下</dd></div>    <div class="desc-item"><dt>版本</dt><dd>v1.3.0</dd></div>    <div class="desc-item"><dt>构建状态</dt><dd>成功</dd></div>    <div class="desc-item"><dt>更新时间</dt><dd>2026-07-28 10:24</dd></div>    <div class="desc-item" style="--desc-span:2"><dt>简介</dt><dd>一款关于星空与约定的短篇视觉小说。</dd></div>  </dl></div>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

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

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

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

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

用法

<div class="desc desc--bordered">  <p class="desc-title">标题</p>  <dl class="desc-grid" style="--desc-cols:2">    <div class="desc-item"><dt>键</dt><dd>值</dd></div>  </dl></div>