Forráskód Böngészése

docs: update sidesheet disabledScroll demo

pointhalo 2 éve
szülő
commit
88be455156
2 módosított fájl, 12 hozzáadás és 10 törlés
  1. 3 5
      content/show/sidesheet/index-en-US.md
  2. 9 5
      content/show/sidesheet/index.md

+ 3 - 5
content/show/sidesheet/index-en-US.md

@@ -118,7 +118,7 @@ import { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui';
 After `v0.29.0`, you could set `mask={false}` to continue working on the area outside SideSheet.
 
 <Notice title='Tips'>
-  By default, if you are not setting `getPopupContainer`, SideSheet is rendered inside `body`. If you want `body` element to be able to scroll, you could set `disableScroll={false}` and the component will not add `overflow: hidden` to it.
+  By default, if you are not setting `getPopupContainer`, SideSheet is rendered inside body. If you want body element to be able to scroll, you could set disableScroll to false and the component will not add `overflow: hidden` to it.
 </Notice>
 
 ```jsx live=true
@@ -131,10 +131,8 @@ import { SideSheet, Button, TextArea } from '@douyinfe/semi-ui';
     return (
         <>
             <Button onClick={() => setVisible(true)}>Open SideSheet</Button>
-            <br />
-            <br />
-            <TextArea placeholder="Please enter something" onChange={value => setValue(value)} />
-            <SideSheet title="SideSheet" visible={visible} onCancel={() => setVisible(false)} mask={false}>
+            <TextArea placeholder="Please enter something" onChange={value => setValue(value)} style={{ marginTop: 12 }}/>
+            <SideSheet title="SideSheet" visible={visible} onCancel={() => setVisible(false)} mask={false} disableScroll={false}>
                 <p>Here is what you entered: </p>
                 <p>{value}</p>
             </SideSheet>

+ 9 - 5
content/show/sidesheet/index.md

@@ -118,7 +118,7 @@ import { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui';
 在 `0.29.0` 版本之后,当 `mask={false}`时允许对外部区域进行操作。
 
 <Notice title='注意'>
-当 SideSheet 是默认渲染在 body 中时(即不传入 getPopupContainer 参数),会在打开时自动给 body 添加 `overflow: hidden` 来禁止滚动,可以配合 `disableScroll={false}` 允许滚动。
+当 SideSheet 是默认渲染在 body 中时(即不传入 getPopupContainer 参数),会在打开时自动给 body 添加 overflow: hidden 来禁止滚动。如果你希望外部区域依然可滚动,可以将 disableScroll 设为false
 </Notice>
 
 ```jsx live=true
@@ -131,10 +131,14 @@ import { SideSheet, TextArea, Button } from '@douyinfe/semi-ui';
     return (
         <>
             <Button onClick={() => setVisible(true)}>Open SideSheet</Button>
-            <br />
-            <br />
-            <TextArea placeholder="Please enter something" onChange={value => setValue(value)} />
-            <SideSheet title="可操作外部的侧边栏" visible={visible} onCancel={() => setVisible(false)} mask={false}>
+            <TextArea placeholder="Please enter something" onChange={value => setValue(value)} style={{ marginTop: 12 }}/>
+            <SideSheet
+                title="可操作外部的侧边栏"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                mask={false}
+                disableScroll={false}
+            >
                 <p>这里是输入的内容:</p>
                 <p>{value}</p>
             </SideSheet>