折叠面板

accordion

与 behaviors/accordion 配套；本例容器带 data-single（展开一项自动收起其余）。

示例

什么是 @icen.ai/ui？

icen.ai 生态的统一设计系统：设计 tokens + 无框架组件 CSS + 行为 JS，所有前端从这里取设计资产。

如何切换色彩预设？

预设类挂在 html 上：clay（默认）/ piano / art / vangogh / ink / retro，各含 .dark 变体，可与 .style-* 风格配置正交组合。

组件可以直接写死颜色吗？

不可以。组件 CSS 只消费 --token-* 变量，语义色仅绿 / 黄 / 红 + 品牌 accent 四档。

<div class="accordion" data-single>
  <div class="accordion-item is-open">
    <button class="accordion-trigger" type="button" aria-expanded="true"><span>什么是 @icen.ai/ui？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">icen.ai 生态的统一设计系统：设计 tokens + 无框架组件 CSS + 行为 JS，所有前端从这里取设计资产。</div></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger" type="button" aria-expanded="false"><span>如何切换色彩预设？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">预设类挂在 html 上：clay（默认）/ piano / art / vangogh / ink / retro，各含 .dark 变体，可与 .style-* 风格配置正交组合。</div></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger" type="button" aria-expanded="false"><span>组件可以直接写死颜色吗？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">不可以。组件 CSS 只消费 --token-* 变量，语义色仅绿 / 黄 / 红 + 品牌 accent 四档。</div></div>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/content.css';

用法

import { initAccordion } from '@icen.ai/ui/behaviors/accordion';
initAccordion();
// 容器带 data-single 时展开一项会收起其余