ICEN UI
ICEN UI 工具条
Docs ⌘K
Core · 稳定

工具条

横向承载按钮与控件的宽松容器：分组、分隔、弹性占位与换行。

Preview
基础 toolbar
3 项已选
小号紧凑
html
<div class="icen-toolbar" style="margin-bottom:14px">  <div class="icen-toolbar-group">    <button class="icen-btn icen-btn-sm" aria-label="加粗"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6.5 4h4.2a3 3 0 0 1 0 6H6.5M6.5 10h5a3 3 0 0 1 0 6H6.5M6.5 4v12"></path></svg></button>    <button class="icen-btn icen-btn-sm" aria-label="斜体"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8.5 4.5h7M4.5 15.5h7M12.5 4.5l-5 11"></path></svg></button>    <button class="icen-btn icen-btn-sm" aria-label="下划线"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 4v5.5a4 4 0 0 0 8 0V4M4.5 16h11"></path></svg></button>  </div>  <span class="icen-toolbar-separator"></span>  <div class="icen-toolbar-group">    <button class="icen-btn icen-btn-sm" aria-label="左对齐"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 4.5h13M3.5 10h8.5M3.5 15.5h11"></path></svg></button>    <button class="icen-btn icen-btn-sm" aria-label="居中"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 4.5h13M5.75 10h8.5M4.5 15.5h11"></path></svg></button>  </div>  <span class="icen-toolbar-spacer"></span>  <span class="icen-toolbar-label icen-accent">3 项已选</span>  <button class="icen-btn icen-btn-sm icen-btn-danger">删除</button></div><div class="icen-toolbar icen-toolbar--elevated" style="margin-bottom:14px">  <button class="icen-btn icen-btn-sm icen-btn-primary">新建</button>  <button class="icen-btn icen-btn-sm">导入</button>  <button class="icen-btn icen-btn-sm">导出</button>  <span class="icen-toolbar-separator"></span>  <input class="icen-form-input" placeholder="搜索…" style="width:160px;height:28px;font-size:12px" /></div><div class="icen-toolbar icen-toolbar--sm icen-toolbar--wrap">  <span class="icen-toolbar-label">小号紧凑</span>  <button class="icen-btn icen-btn-sm">刷新</button>  <button class="icen-btn icen-btn-sm">设置</button>  <span class="icen-toolbar-separator"></span>  <button class="icen-btn icen-btn-sm">查看日志</button>  <button class="icen-btn icen-btn-sm">监控</button></div>

特性

与分段控件（segmented）分工：toolbar 是宽松容器；segmented 是紧贴的互斥单选。

安装

bun add @icen.ai/ui

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

js
import '@icen.ai/ui/kit/toolbar';

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

bash
bunx --bun @icen.ai/ui add toolbar

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

用法

html
<div class="icen-toolbar [--sm|--lg|--wrap|--elevated|--borderless]">  <div class="icen-toolbar-group">    <button class="icen-btn icen-btn-sm">…</button>    <button class="icen-btn icen-btn-sm">…</button>  </div>  <span class="icen-toolbar-separator"></span>  <span class="icen-toolbar-spacer"></span>  <span class="icen-toolbar-label">右侧文字</span></div><!-- 分组 toolbar-group / 分隔符 toolbar-separator / 弹性占位 toolbar-spacer -->