代码演示 ​

如何引入 ​

jsx
import { Collapse } from '@kousum/semi-ui-vue';

基本用法 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

手风琴效果 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

禁用面板 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

隐藏面板展开/收起图标 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

自定义展开图标 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

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

通过 extra 设置右上角辅助区域内容。

仅在 header 为 string 时生效， 如果 header 为 ReactNode 会包含 extra 所在的区域，可以自行渲染

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

API 参考 ​

Collapse ​

属性说明类型默认值版本
accordion手风琴模式booleanfalse-
activeKey受控属性, 当前展开的面板的 keystring | string[]无-
className样式类名string''-
clickHeaderToExpand点击 Header 展开收起，否则只响应点击箭头booleantrue2.32.0
collapseIcon自定义折叠图标ReactNode<IconChevronDown />-
defaultActiveKey初始化选中面板的 keystring | string[]无-
expandIcon自定义展开图标ReactNode<IconChevronUp />-
expandIconPosition展开图标位置left, rightright1.12.0
keepDOM是否保留隐藏的面板 DOM 树，默认销毁boolfalse0.25.0
motion是否开启动画booleantrue1.4.0
lazyRender配合 keepDOM 使用，为 true 时挂载时不会渲染组件booleanfalse2.54.1
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必填且唯一，选中状态匹配 activeKey，defaultActiveKeystring无
onMotionEnd动画结束的回调() => void-2.47.0-beta.0
reCalcKey当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算string | number无1.5.0
showArrow是否展示箭头booleantruev2.17.0
style内联 CSS 样式CSSProperties无

Accessibility ​

ARIA ​

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

文案规范 ​

折叠面板本质是卡片容器增加了收起和展开的功能，所以折叠面板的文案规范需要和 卡片文案规范 保持一致

设计变量 ​

变量默认值用法
$color-collapse_item-border-defaultvar(--semi-color-border)分割线颜色
$color-collapse_header-text-defaultvar(--semi-color-text-0)标题文字颜色
$color-collapse_header-text-disabledvar( --semi-color-disabled-text)标题文字颜色 禁用
$color-collapse_header-icon-defaultvar(--semi-color-text-2)展开箭头图标颜色
$color-collapse_header-bg-hovervar(--semi-color-fill-0)菜单项背景颜色 - 悬浮
$color-collapse_header-bg-activevar(--semi-color-fill-1)菜单项背景颜色 - 按下
$color-collapse_content-text-defaultvar(--semi-color-text-1)内容文字颜色
显示第 1 条-第 7 条，共 7 条
  • 1

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 中阻止冒泡亦可。

jsx

import { Collapse, Input } from '@kousum/semi-ui-vue';

() => (
    <Collapse>
        <Collapse.Panel
            header={
                <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>
                    <span>Panel header</span>
                    <Input />
                </div>
            }
            itemKey="1"
        >
            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
        </Collapse.Panel>
    </Collapse>
);