Accordion 手风琴

Accordion 现在使用 Rue 基础的轻量视觉风格，但 API 不再只是静态包装。你可以用Accordion.Title和Accordion.Content组合单个面板，也可以直接用items走数据驱动，接入受控 key、多开、禁用和富标题信息。

何时使用

需要 FAQ、设置说明、任务面板这类“标题 + 可折叠内容”的信息组织方式。
需要在单开和多开之间切换，或把当前展开项接到页面状态里。
需要在标题里补充状态、说明、标签，而不想为每个面板手写结构。
需要让浏览器能搜索折叠内容时，使用use="details"。

Capability

Children 组合

保持 Accordion.Title / Accordion.Content，用于局部定制标题和内容。

Capability

Items 驱动

直接用 items 写标题、描述、额外信息和禁用态，适合后台配置页。

Capability

受控状态

通过 activeKey、openKeys、onChange 接管当前展开项。

Capability

两种语义

默认 radio 风格适合单开；details 适合保持可搜索内容与原生语义。

# Accordion using radio inputs

展示单开分组，同时额外开启 collapsible，方便在文档页里反复点按查看开合状态。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Accordion using details

展示 details 结构，适合需要原生语义和浏览器搜索能力的内容区。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Controlled active key

受控模式同样支持 collapsible；点击已展开项时，activeKey 会回到 null。

当前 activeKey：build

最近一次切换：build

Plan backlog

先确定优先级，再安排设计和开发

Sprint 12

Collect the most urgent requirements, align on edge cases, and freeze the delivery order before implementation starts.

Build feature slice

把 API、交互和回归验证收敛到同一轮里

In progress

Ship the smallest useful slice first, then expandDemos and tests around the verified behavior instead of guessing a broad design up front.

Ship and monitor

发布后持续看告警、埋点和反馈

Ready

After release, keep an eye on error rate, support feedback and adoption signals so the next iteration has concrete evidence.

# Multiple open panels

multiple 与 defaultOpenKeys 可同时展开多个项；同一 API 也能配合 collapsible 做可收起单项。

multiple 会把 radio 形态切到 checkbox 行为，适合筛选条件或调试面板。

Latency budget

页面首屏与接口预算放在同一个地方追踪

120ms

Track server timing, render budget and hydration cost together so regressions can be located quickly.

Cache strategy

缓存命中率和失效策略分开说明

Warm

Document what can stay stale, what must be revalidated, and how to handle cache busting during deployments.

Rollback checklist

提供快速回滚路径，避免线上排障时再找人

Ops

Keep a minimal rollback playbook near the release notes so the on-call engineer can act without extra context switching.

Single but collapsible

不想强制保持一个展开项时，可以给 children 模式加 collapsible。

Can I close the last open panel?

Yes. Set collapsible to allow toggling the current panel off instead of forcing one active item.

# Rich item metadata

description、extra 和 disabled 适合后台列表、规则说明和版本发布面板。

Review dependencies

上线前再核对一次依赖差异和风险说明

Review

Compare the dependency diff with the last release baseline, and record whether each update changes runtime behavior or only build tooling.

Prepare release notes

把用户可感知的变化浓缩成 changelog 和公告文案

Ready

Write the changelog from the user perspective first, then attach migration hints or rollout notes only when they affect adoption.

Ops handoff

值班同学确认回滚路径与观测指标后才能执行

Waiting

This item is intentionally disabled to show how a non-interactive operational gate can still stay visible in the stack.

# Accordion with arrow icon

展示 arrow 指示样式，并开启 collapsible，方便直接验证箭头开合反馈。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Accordion with plus/minus icon

展示 plus/minus 方案，并开启 collapsible，方便直接验证开合反馈。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Using Accordion and Join together

展示 join 组合方式，并开启 collapsible，方便连续边框场景下反复验证开合。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Accordion using items array (radio)

展示 items 数组写法，并开启 collapsible，方便直接验证数据驱动下的收起逻辑。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

# Accordion using items array (details)

展示 details + items 组合；现在它也能继续叠加 description、extra 和 disabled。

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

API

Accordion 现在分成两套用法：children 模式适合局部排版，items 模式适合数据驱动和受控状态。两套模式共用同一套视觉类名，因此重组示例时通常只需要把结构收敛到更清晰的语义层。

Accordion Props

属性	说明	类型	默认值
`activeKey`	items 模式下的受控单开 key	`string \| number \| null`	`-`
`className`	追加到每个 Accordion 根节点的类名	`string`	`-`
`collapsible`	单开模式下允许把当前面板再次折叠	`boolean`	`false`
`contentClassName`	items 模式下统一追加到内容区域的类名	`string`	`-`
`defaultActiveKey`	items 模式下的非受控默认单开 key	`string \| number \| null`	`-`
`defaultOpen`	children 模式下的非受控默认展开状态	`boolean`	`false`
`defaultOpenKeys`	items 模式下的非受控默认多开 keys	`Array<string \| number>`	`-`
`disabled`	禁用整个 Accordion 或当前 items 组的交互	`boolean`	`false`
`force`	强制视觉保持展开或收起，优先级高于 open 与 items 状态	`'open' \| 'close'`	`-`
`icon`	标题右侧的内置指示样式	`'arrow' \| 'plus'`	`-`
`items`	数据驱动渲染方式，适合 FAQ、配置面板和后台列表	`AccordionDataItem[]`	`-`
`multiple`	允许同时展开多个 items；radio 形态会切为 checkbox 行为	`boolean`	`false`
`name`	分组名；radio 与 details 语义都会复用这个名称	`string`	`自动生成`
`onChange`	items 模式下的开合回调；单开返回 key，多开返回 keys	`(value, context) => void`	`-`
`onToggle`	children 模式下的单项开合回调	`(open, context) => void`	`-`
`open`	children 模式下的受控展开状态	`boolean`	`-`
`openKeys`	items 模式下的受控多开 keys	`Array<string \| number>`	`-`
`titleClassName`	items 模式下统一追加到标题区域的类名	`string`	`-`
`use`	切换 radio 或 details 两种结构输出	`'radio' \| 'details'`	`'radio'`

AccordionDataItem

属性	说明	类型	默认值
`className`	追加到当前 item 根节点的类名	`string`	`-`
`content`	折叠区内容	`any`	`-`
`contentClassName`	内容区域类名	`string`	`-`
`description`	标题下的补充说明文字	`any`	`-`
`descriptionClassName`	说明文字类名	`string`	`-`
`disabled`	禁用当前 item 交互	`boolean`	`false`
`extra`	标题行右侧的补充信息，可用于状态标记或数字	`any`	`-`
`extraClassName`	额外信息区域类名	`string`	`-`
`force`	对单个 item 单独强制展开或收起	`'open' \| 'close'`	`-`
`icon`	覆盖全局 icon 设置	`'arrow' \| 'plus'`	`-`
`key`	推荐显式提供的稳定标识，用于 activeKey / openKeys 匹配	`string \| number`	`index`
`open`	非受控模式下的默认展开状态	`boolean`	`false`
`title`	标题区域内容	`any`	`-`
`titleClassName`	标题区域类名	`string`	`-`
`use`	覆盖全局 use 设置	`'radio' \| 'details'`	`-`