R后悔药 Rue.js
设置

Collapse 折叠面板

使用 Rue 基础基于 daisyUI 的视觉语言，并在此基础上补充 `items`、accordion、 `activeKey`、`extra`、`description`、尺寸与图标位置等增强能力。

语义 API

优先面向 `items` 数据驱动用法，组织方式贴近常见业务组件，但使用 Rue 视觉风格。

# Items 基础用法

直接通过 items 渲染多项折叠面板，并默认使用带边框的分组容器。

Overview
汇总版本亮点、上线范围与回滚策略，适合用作页面最上方的信息概览。
确认灰度开关、日志埋点、告警阈值与发布窗口已经准备完毕。
常见问题、风险提示和升级说明也可以继续放进同一个折叠组。

# Accordion

使用 accordion 改成一次只展开一项，并结合受控 key 管理当前面板。

Migration Guide
梳理 breaking changes、默认行为差异与升级建议。
列出属性变化与使用策略。
补充测试范围、回归清单和已知限制。

# 描述与额外操作

每一项可带 description、extra 和独立禁用状态，extra 区域点击不会触发展开。

Ops Console
控制发布节奏、灰度范围与告警阈值。
Beta
适合放置运维策略、SLA 约束和异常回滚说明。
禁用项会保持信息展示，但不响应交互。

# 图标位置与触发区域

支持把图标放在左侧，并限制只有图标本身可触发开合。

当标题里还有链接、状态或操作说明时，这个模式会更稳妥。
适合和 icon-only 模式混合使用。

# Ghost 与无边框

不想用分组边框时，可以关闭 bordered，再按需开启 ghost。

Design Tokens
透明背景更适合嵌在卡片、侧栏或深色容器中。
可继续叠加自定义类名，让容器完全交给外层布局控制。

# 尺寸与受控多开

size 会统一影响标题和内容尺寸；非 accordion 模式可同时展开多项。

Release Plan
大尺寸适合在信息层级较重的管理页或文档页中使用。
多开模式下可以把相邻的几块信息一起展开对照查看。
受控模式更方便和 URL、筛选器或外部按钮联动。

# Collapse with focus

聚焦时展开、失焦时关闭，同时也支持重复点击标题切换开合。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Collapse with checkbox

使用复选框控制展开与关闭，并支持重复点击标题切换。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Collapse using details and summary tag

使用 details/summary 标签。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Without border and background color

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# With arrow icon

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# With plus/minus icon

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Moving collapse icon to the start

通过 utility 类移动图标位置，并保持标题区重复点击切换能力。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Force open

I have collapse-open class
Click the "Sign Up" button in the top right corner and follow the registration process.

# Force close

I have collapse-close class
Click the "Sign Up" button in the top right corner and follow the registration process.

# Custom colors for collapse that works with focus

通过 focus 触发颜色变化。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

# Custom colors for collapse that works with checkbox

通过 peer/peer-checked 触发颜色变化，并支持重复点击标题切换。

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.

API

Collapse

属性说明类型默认值
items数据驱动的折叠面板列表CollapseItem[]-
activeKey受控展开项；accordion 模式下可传单值string | number | Array<string | number>-
defaultActiveKey非受控默认展开项string | number | Array<string | number>-
accordion是否只允许同时展开一项booleanfalse
bordered是否使用分组边框容器booleanitems 模式默认 true
ghost是否使用透明背景booleanfalse
size标题与内容尺寸'sm' | 'md' | 'lg''md'
expandIconPlacement展开图标位置'start' | 'end''end'
onChangeitems 模式切换时触发，返回下一个展开 key(nextValue, context) => void-
tag支持基础写法的根标签切换'div' | 'details''div'

CollapseItem

属性说明类型默认值
key面板唯一标识string | number索引值
label标题内容，支持 title 别名any-
children面板内容，支持 content 别名any-
description标题下方的说明文案any-
extra标题右侧附加区域，不触发展开any-
showArrow是否显示展开图标boolean继承父级
collapsible触发区域控制'header' | 'icon' | 'disabled''header'
disabled禁用当前项交互booleanfalse
open非受控初始展开booleanfalse