展示类 · Collapse
折叠面板
可以展开或折叠展示内容区域。

代码演示

如何引入

基本用法

可以同时展开多个面板,可以通过 defaultActiveKey 设置默认展开的面板。

手风琴效果

可以通过设置 accordion 使每次只允许展开一个面板。

禁用面板

可以通过设置 disabled 禁用面板。

隐藏面板展开/收起图标

可以通过设置 showArrow 隐藏面板展开/收起图标。

自定义展开图标

可以通过 expandIcon 设置展开图标,collapseIcon 设置折叠图标。

自定义右上角辅助区域内容

通过 extra 设置右上角辅助区域内容。
仅在 header 为 string 时生效, 如果 header 为 ReactNode 会包含 extra 所在的区域,可以自行渲染

API 参考

Collapse

属性说明类型默认值版本
accordion手风琴模式booleanfalse-
activeKey受控属性, 当前展开的面板的 keystring | string[]-
className样式类名string''-
collapseIcon自定义折叠图标ReactNode<IconChevronDown />-
defaultActiveKey初始化选中面板的 keystring | string[]-
expandIcon自定义展开图标ReactNode<IconChevronUp />-
expandIconPosition展开图标位置left, rightright1.12.0
keepDOM是否保留隐藏的面板 DOM 树,默认销毁boolfalse0.25.0
motion是否开启动画object | booleantrue1.4.0
style内联 CSS 样式CSSProperties{}-
onChange切换面板的回调function(activeKey: string | string[], e: event)-

Collapse.Panel

属性说明类型默认值版本
className样式类名string
disabled面板是否被禁用booleanfalsev2.17.0
extra自定义渲染每个面板右上角的辅助内容(仅当 header 为 string 时生效)ReactNode
header面板头内容ReactNode
itemKey必填且唯一,选中状态匹配 activeKeydefaultActiveKeystring
reCalcKey当 reCalcKey 改变时,将重新计算子节点的高度,用于优化动态渲染时的计算string | number1.5.0
showArrow是否展示箭头booleantruev2.17.0
style内联 CSS 样式CSSProperties

Accessibility

ARIA

  • 面板 header 右侧按钮 设置了 aria-hidden=true
  • 面板 header 可交互部分 设置了 aria-owns 值为对应面板内容
  • 面板内容 设置了 aria-hidden 随面板内容展现隐藏其值在 true 和 false 之间自动切换
  • 面板 aria-disableddisabled 属性同步,表示面板禁用

设计变量

FAQ

  • Collapse 内嵌表单收起后表单数据会清空 ?
    Collapse 收起之后,默认会销毁相应的 DOM 。所以相应的 field 被卸载了,数据也被清空。可以通过给 collapse 增加 keepDOM=true,保留对应的 DOM 节点。
  • Collapse 中 Typography 截断逻辑失效 ?
    如果开启了 keepDOM 会导致面板样式 display: none,此时会影响截断长度的计算。
  • Collapse.Header 整体作为折叠、展开的点击热区, 如果在 Header 中放置了自定义元素(例如 Input),点击时候会导致 Collapse 收起/展开。如何避免?
    可以在自定义元素的 onClick 事件回调中,阻止事件冒泡至 Collapse.Header 即可。若自定义元素未提供 event 对象,再包裹一层 div,于 div onClick 中阻止冒泡亦可。

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED