使用场景

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

代码演示

如何引入

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

基本用法

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

32

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

     const isOpen = ref();

6

     const toggle = () => {

7

          isOpen.value = (!isOpen.value);

8

     };

9

     const collapsed = (

10

             <ul>

11

                  <li>

12

                       <p>Semi Design 以内容优先进行设计。</p>

13

                  </li>

14

                  <li>

15

                       <p>更容易地自定义主题。</p>

16

                  </li>

17

                  <li>

18

                       <p>适用国际化场景。</p>

19

                  </li>

20

                  <li>

21

                       <p>效率场景加入人性化关怀。</p>

22

                  </li>

23

             </ul>

24

     );

25

     return ()=>(

26

             <div>

27

                  <Button onClick={toggle}>Toggle</Button>

28

                  <Collapsible isOpen={isOpen.value}>{collapsed}</Collapsible>

29

             </div>

30

     );

31

})

32

export default Demo;

Show Error

Auto Save

自定义动画时间

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

39

 

1

import { Collapsible, InputNumber, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

     const isOpen = ref(false);

6

     const duration = ref(250);

7

     const toggle = () => {

8

          isOpen.value = !isOpen.value

9

     };

10

     const collapsed = (

11

             <ul>

12

                  <li>

13

                       <p>Semi Design 以内容优先进行设计。</p>

14

                  </li>

15

                  <li>

16

                       <p>更容易地自定义主题。</p>

17

                  </li>

18

                  <li>

19

                       <p>适用国际化场景。</p>

20

                  </li>

21

                  <li>

22

                       <p>效率场景加入人性化关怀。</p>

23

                  </li>

24

             </ul>

25

     );

26

     return () => (

27

             <div>

28

                  <label>设置动画时间：</label>

29

                  <InputNumber min={0} defaultValue={250} style={{ width: '120px' }} value={duration.value} onChange={(val) => duration.value = (val)}

30

                               step={10} />

31

                  <br />

32

                  <Button onClick={toggle}>Toggle</Button>

33

                  <Collapsible isOpen={isOpen.value} duration={duration.value}>

34

                       {collapsed}

35

                  </Collapsible>

36

             </div>

37

     );

38

})

Show Error

Auto Save

嵌套使用

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

38

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

     const isOpen = ref(false);

6

     const isChildOpen = ref(false);

7

​

8

     const collapsed = (

9

             <ul>

10

                  <li>

11

                       <p>Semi Design 以内容优先进行设计。</p>

12

                  </li>

13

                  <li>

14

                       <p>更容易地自定义主题。</p>

15

                  </li>

16

                  <li>

17

                       <p>适用国际化场景。</p>

18

                  </li>

19

                  <li>

20

                       <p>效率场景加入人性化关怀。</p>

21

                  </li>

22

             </ul>

23

     );

24

     return () => (

25

             <div>

26

                  <Button onClick={() => isOpen.value = (!isOpen.value)}>Toggle</Button>

27

                  <br />

28

                  <Collapsible isOpen={isOpen.value}>

29

                       <div>

30

                            <span>Semi Design的设计原则包括：</span>

31

                            <Button onClick={() => isChildOpen.value = (!isChildOpen.value)}>Toggle List</Button>

32

                       </div>

33

                       <Collapsible isOpen={isChildOpen.value}>{collapsed}</Collapsible>

34

                  </Collapsible>

35

             </div>

36

     );

37

})

38

export default Demo;

Show Error

Auto Save

自定义折叠高度

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

61

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

​

6

     const isOpen = ref(false);

7

     const toggle = () => {

8

          isOpen.value = (!isOpen.value);

9

     };

10

     return () => {

11

​

12

          const maskStyle = isOpen.value

13

                  ? {}

14

                  : {

15

                       WebkitMaskImage:

16

                               'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',

17

                  };

18

          const collapsed = (

19

                  <ul>

20

                       <li>

21

                            <p>Semi Design 以内容优先进行设计。</p>

22

                       </li>

23

                       <li>

24

                            <p>更容易地自定义主题。</p>

25

                       </li>

26

                       <li>

27

                            <p>适用国际化场景。</p>

28

                       </li>

29

                       <li>

30

                            <p>效率场景加入人性化关怀。</p>

31

                       </li>

32

                  </ul>

33

          );

34

​

35

          const linkStyle = {

36

               position: 'absolute',

37

               left: 0,

38

               right: 0,

Show Error

Auto Save

API 参考

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

Accessibility

ARIA

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

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 客服看是否存在其他问题。