使用场景 ​

  • Collapsible 是一个行为组件，默认开启动画效果。它被用于 Semi 的各种组件中，如：Navigation， Collapse, Tree， TreeSelect，以及 Typography 中。
  • 当上述组件不能满足需求或者需要自定义一些折叠行为时，可以使用 Collapsible 来包裹需要展开或者折叠的内容。

代码演示 ​

如何引入 ​

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

基本用法 ​

通过 isOpen 来控制内容的展开或者折叠。

自定义动画时间 ​

通过 duration 设置动画展开或者折叠的时间，也可以通过 motion 来关闭动画。

嵌套使用 ​

自定义折叠高度 ​

可以使用 collapseHeight 自定义收起的高度，需要版本 v>=1.0.0

API 参考 ​

属性说明类型默认值版本
className类名string-0.34.0
collapseHeight折叠高度number01.0.0
duration动画执行的时间number250-
fade是否开启淡入淡出booleanfalse2.21.0
isOpen是否展开内容区域booleanfalse-
keepDOM是否保留隐藏的面板 DOM 树，默认销毁booleanfalse0.25.0
lazyRender配合 keepDOM 使用，为 true 时挂载时不会渲染组件booleanfalse2.54.0
motion是否开启动画booleantrue-
onMotionEnd动画结束的回调() => void--
reCalcKey当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算number | string-1.5.0
style样式CSSProperties-0.34.0
ididhtml id string type-2.3.0

Accessibility ​

ARIA ​

  • Collapsible 具有 id props，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的 aria-controls 指明控制关系, 见下方使用示例。
jsx
import Collapsible from './index';


()=>{
    const collapseId = 'myCollapsible';
    const [visible, setVisible]=useState(false);
    return <>
        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>    
        <Collapsible isOpen={visible} id={collapseId}>
            <div>hide content</div>
        </Collapsible>
    </>;
};

FAQ ​

  • 为什么使用 Collapsible 没有正常展开?
    检查 Collapsible 父级是否设置 display:none，此时因为无法拿到节点高度，会出现无法展开的问题。如果没有设置，可以联系 Semi 客服看是否存在其他问题。