代码演示

如何引入

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

基本

默认侧边栏从右滑出，支持点击遮罩区关闭。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

19

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const visible = ref(false);

6

  const change = () => {

7

    visible.value = (!visible.value);

8

  };

9

  return ()=>(

10

    <>

11

      <Button onClick={change}>Open SideSheet</Button>

12

      <SideSheet title="滑动侧边栏" visible={visible.value} onCancel={change}>

13

        <p>This is the content of a basic sidesheet.</p>

14

        <p>Here is more content...</p>

15

      </SideSheet>

16

    </>

17

  );

18

})

19

export default Demo;

Show Error

Auto Save

自定义位置

可以通过设置 placement 属性设置侧边栏滑出位置，支持top, bottom, left, right。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

31

 

1

import { SideSheet, RadioGroup, Radio, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const visible = ref(false);

6

  const change = () => {

7

    visible.value = (!visible.value);

8

  };

9

  const placement = ref('right');

10

  const changePlacement = e => {

11

    placement.value = (e.target.value);

12

  };

13

  return () => (

14

    <>

15

      <RadioGroup onChange={changePlacement} value={placement.value}>

16

        <Radio value={'right'}>right</Radio>

17

        <Radio value={'left'}>left</Radio>

18

        <Radio value={'top'}>top</Radio>

19

        <Radio value={'bottom'}>bottom</Radio>

20

      </RadioGroup>

21

      <br />

22

      <br />

23

      <Button onClick={change}>Open SideSheet</Button>

24

      <SideSheet title="滑动侧边栏" visible={visible.value} onCancel={change} placement={placement.value}>

25

        <p>This is the content of a basic sidesheet.</p>

26

        <p>Here is more content...</p>

27

      </SideSheet>

28

    </>

29

  );

30

});

31

export default Demo

Show Error

Auto Save

自定义尺寸

可以通过设置 size 属性设置侧边栏尺寸，支持 small(400px)， medium(684px), large(920px)，仅在 placement 为 left 或 right 时生效。 0.29.0 版本之后支持。若默认的尺寸不满足你的需求，你还可以通过设置 width 属性自行设置宽度，例如 width={900} / width={'800px'}

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

31

 

1

import { SideSheet, RadioGroup, Radio, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const visible = ref(false);

6

  const change = () => {

7

    visible.value = (!visible.value);

8

  };

9

  const size = ref('small');

10

  const changeSize = e => {

11

    size.value = (e.target.value);

12

  };

13

  return () => (

14

    <>

15

      <RadioGroup onChange={changeSize} value={size.value}>

16

        <Radio value={'small'}>small</Radio>

17

        <Radio value={'medium'}>medium</Radio>

18

        <Radio value={'large'}>large</Radio>

19

      </RadioGroup>

20

      <br />

21

      <br />

22

      <Button onClick={change}>Open SideSheet</Button>

23

      <SideSheet title="滑动侧边栏" visible={visible.value} onCancel={change} size={size.value}>

24

        <p>This is the content of a basic sidesheet.</p>

25

        <p>Here is more content...</p>

26

      </SideSheet>

27

    </>

28

  );

Show Error

Auto Save

可操作的外部区域

在 0.29.0 版本之后，当 mask={false}时允许对外部区域进行操作。

注意

当 SideSheet 是默认渲染在 body 中时（即不传入 getPopupContainer 参数），会在打开时自动给 body 添加 overflow: hidden 来禁止滚动。如果你希望外部区域依然可滚动，可以将 disableScroll 设为false

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

24

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const visible = ref(false);

6

  const value = ref('');

7

  return ()=>(

8

    <>

9

      <Button onClick={() => visible.value = (true)}>Open SideSheet</Button>

10

      <TextArea placeholder="Please enter something" onChange={v => value.value = (v)} style={{ marginTop: '12px' }} />

11

      <SideSheet

12

        title="可操作外部的侧边栏"

13

        visible={visible.value}

14

        onCancel={() => visible.value = (false)}

15

        mask={false}

16

        disableScroll={false}

17

      >

18

        <p>这里是输入的内容：</p>

19

        <p>{value.value}</p>

20

      </SideSheet>

21

    </>

22

  );

23

})

24

export default Demo;

Show Error

Auto Save

渲染在指定容器

可以通过 getPopupContainer 指定父级 DOM，弹层将会渲染至该 DOM 中， 0.29.0 版本之后支持。

注意

容器需要手动设置样式 `overflow: hidden`，否则会导致动画溢出

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

41

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const visible = ref(false);

6

  const value = ref('');

7

  const getContainer = () => {

8

    return document.querySelector('.sidesheet-container');

9

  };

10

  return () => (

11

    <div

12

      style={{

13

        height: '320px',

14

        overflow: 'hidden',

15

        position: 'relative',

16

        border: '1px solid var(--semi-color-border)',

17

        borderRadius: '2px',

18

        padding: '24px',

19

        textAlign: 'center',

20

        background: 'var(--semi-color-fill-0)',

21

      }}

22

      class="sidesheet-container"

23

    >

24

      <span>Render in this</span>

25

      <br />

26

      <br />

27

      <Button onClick={() => visible.value = (true)}>Open SideSheet</Button>

28

      <SideSheet

29

        title="渲染在指定容器内部"

30

        visible={visible.value}

31

        onCancel={() => visible.value = (false)}

32

        width={220}

33

        getPopupContainer={getContainer}

34

      >

35

        <p>This is the content of a basic sidesheet.</p>

36

        <p>Here is more content...</p>

37

      </SideSheet>

38

    </div>

39

  );

40

})

Show Error

Auto Save

自定义内容区域

可以通过自定义 title，footer(v>=1.3.0) 等创建出丰富的内容样式。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

94

 

1

import { SideSheet, Form, Button, Typography, Banner } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

​

5

const Demo = defineComponent(() => {

6

  const state = reactive({ visible: false });

7

​

8

  function show() {

9

    state.visible = true

10

  }

11

​

12

  function handleCancel(e){

13

    state.visible = false

14

  }

15

​

16

  return () => {

17

​

18

    const {

19

      DatePicker,

20

      Select,

21

      Radio,

22

      RadioGroup,

23

    } = Form;

24

    const footer = (

25

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>

26

        <Button style={{ marginRight: '8px' }}>重置</Button>

27

        <Button theme="solid">提交</Button>

28

      </div>

29

    );

30

    return (

31

      <>

32

        <Button onClick={() => show()}>More Information</Button>

33

        <SideSheet

34

          title={<Typography.Title heading={4}>创建资源包</Typography.Title>}

35

          headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}

36

          bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}

37

          visible={state.visible}

38

          footer={footer}

39

          closeIcon={null}

40

          onCancel={() => handleCancel()}

41

        >

Show Error

Auto Save

API 参考

属性	说明	类型	默认值	版本
afterVisibleChange	面板展示/隐藏时动画结束触发的回调	(isVisble: boolean) => void	-	1.0.0
bodyStyle	面板内容的样式	CSSProperties	-	-
className	类名	string	-	-
closable	是否允许通过右上角的关闭按钮关闭	boolean	true	-
closeIcon	关闭按钮的 icon	ReactNode	<IconClose />	-
closeOnEsc	允许通过键盘事件 Esc 触发关闭	boolean	false	1.0.0
disableScroll	默认渲染在 document.body 层时是否禁止 body 的滚动，即给 body 添加 overflow: hidden	boolean	true	-
footer	侧边栏底部	ReactNode	null	1.3.0
getPopupContainer	指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 position: relative 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。	() => HTMLElement	-	0.29.0
headerStyle	面板头部的样式	CSSProperties	-	1.0.0
height	高度，位置为 top 或 bottom 时生效	number | string	400	-
keepDOM	关闭 SideSheet 时是否保留内部组件不销毁	boolean	false	1.18.0
mask	是否显示遮罩，在 0.29.0 版本之后，当 mask={false} 时允许对外部区域进行操作	boolean	true	-
maskClosable	是否允许通过点击遮罩来关闭面板	boolean	true	-
maskStyle	遮罩的样式	CSSProperties	-	-
motion	是否允许动画	boolean	true	-
placement	侧边栏滑出位置，支持top, bottom, left, right	string	right	-
size	尺寸，支持 small(448px)， medium(684px), large(920px)，仅在 left 或 right 时生效	string	small	0.29.0
style	可用于设置样式	CSSProperties	-	-
title	面板的标题	ReactNode	-	-
visible	面板是否可见	boolean	false	-
width	宽度，位置为 left 或 right 时生效	number | string	448	-
zIndex	弹层 z-index 值	number	1000	0.29.0
onCancel	取消面板时的回调函数	(e: MouseEvent) => void	-	-

Accessibility

ARIA

• SideSheet 具有 dialog role 来表示它是一个弹窗组件， 内部 header 具有 heading role 表明是 header。

设计变量

color

spacing

width

font

animation

变量	默认值	用法
$color-sideSheet_mask-bg	var(--semi-color-overlay-bg)	侧边栏打开后蒙层颜色
$color-sideSheet-bg	var(--semi-color-bg-2)	侧边栏背景颜色
$color-sideSheet_main-text	var(--semi-color-text-0)	侧边栏默认文本颜色
$color-sideSheet_header-borderBottom	var(--semi-color-border)	侧边栏 header 底部边框颜色

显示第 1 条-第 4 条，共 4 条

• 1

变量	默认值	用法
$spacing-sideSheet-margin	0	侧边栏整体外边距
$spacing-sideSheet_title-margin	0	侧边栏标题外边距
$spacing-sideSheet_header-padding	$spacing-loose	侧边栏 header 内边距
$spacing-sideSheet_header-paddingBottom	$spacing-base-loose	侧边栏 header 底部内边距
$spacing-sideSheet_body-paddingY	0	侧边栏 body 垂直内边距
$spacing-sideSheet_body-paddingX	$spacing-loose	侧边栏 body 水平内边距
$spacing-sideSheet_footer-padding	$spacing-loose	侧边栏 footer 内边距

显示第 1 条-第 7 条，共 7 条

• 1

变量	默认值	用法
$width-sideSheet_header-borderBottom	0px	侧边栏 header 底部边框宽度
$width-sideSheet_size-small	448px	小尺寸侧边栏宽度
$width-sideSheet_size-medium	684px	中尺寸侧边栏宽度
$width-sideSheet_size-large	920px	大尺寸侧边栏宽度

显示第 1 条-第 4 条，共 4 条

• 1

变量	默认值	用法
$font-sideSheet_title-fontWeight	$font-weight-bold	侧边栏标题文本字重
$font-sideSheet_title-fontSize	$font-size-header-5	侧边栏标题文本字号

显示第 1 条-第 2 条，共 2 条

• 1

变量	默认值	用法
$animation_duration-sideSheet_mask-show	180ms	侧边栏打开时-蒙层颜色-动画持续时间
$animation_function-sideSheet_mask-show	cubic-bezier(0.25, 0.46, 0.45, 0.94)	侧边栏打开时-蒙层颜色-过渡曲线
$animation_delay-sideSheet_mask-show	0ms	侧边栏打开时-蒙层颜色-延迟时间
$animation_duration-sideSheet_mask-hide	180ms	侧边栏关闭时-蒙层颜色-动画持续时间
$animation_function-sideSheet_mask-hide	cubic-bezier(0.25, 0.46, 0.45, 0.94)	侧边栏关闭时-蒙层颜色-过渡曲线
$animation_delay-sideSheet_mask-hide	0ms	侧边栏关闭时-蒙层颜色-延迟时间
$animation_duration-sideSheet_inner-show	180ms	侧边栏打开-动画持续时间
$animation_function-sideSheet_inner-show	cubic-bezier(0.25, 0.46, 0.45, 0.94)	侧边栏打开-过渡曲线
$animation_delay-sideSheet_inner-show	0ms	侧边栏打开-延迟时间
$animation_duration-sideSheet_inner-hide	180ms	侧边栏关闭-动画持续时间

显示第 1 条-第 10 条，共 12 条

• 1
• 2

FAQ:

• SideSheet 会自动禁止 body 的滚动吗？当 SideSheet 是默认渲染在 body 中时（即不传入 getPopupContainer 参数），会在打开时自动给 body 添加 overflow: hidden 来禁止滚动。可以通过 disableScroll={false} 允许滚动。