Skip to content

Commit 86884aa

Browse files
committed
2 parents ab209f4 + a39c763 commit 86884aa

File tree

3 files changed

+51
-9
lines changed

3 files changed

+51
-9
lines changed

src/docs_react/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "2.0.4",
2+
"version": "2.0.5",
33
"nav": [
44
{
55
"name": "基础组件",

src/docs_react/docs/popup/doc-react.en-US.md

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,52 @@ export default () => {
4040
Use position prop to set popup display position.By default, the popup is centered and can be set to top, bottom, left, right.
4141

4242
```html
43-
<Popup position="top" :open="open" />
43+
<Popup position="top" open="{open}" />
4444
```
4545

4646
### Close Icon
4747

4848
After setting the closeable property, the close icon will be displayed in the upper right corner of the popup layer.
4949

5050
```html
51-
<Popup position="bottom" :open="open" closeable />
51+
<Popup position="bottom" open="{open}" closeable />
5252
```
5353

5454
### Forbid mask click
5555

5656
forbid mask click
5757

5858
```html
59-
<Popup position="bottom" :open="open" forbidmaskclick />
59+
<Popup position="bottom" open="{open}" forbidmaskclick />
6060
```
6161

6262
### Round Corner
6363

6464
After setting the round property, the popup window will add different rounded corner styles according to the popup position.
6565

6666
```html
67-
<Popup position="bottom" :open="open" round />
67+
<Popup position="bottom" open="{open}" round />
68+
```
69+
70+
### 内部滚动设置
71+
72+
You can specify the element that needs to scroll by setting the `scrollid`.
73+
74+
```jsx
75+
<quark-popup
76+
position="center"
77+
open={open}
78+
onClose={handleClose}
79+
scrollid="scroll-it" // Set the id of the element that needs to scroll
80+
>
81+
<div class="fix-content">Fixable content</div>
82+
{/* The following elements can scroll */}
83+
<div id="scroll-it" class="scroll-list">
84+
{new Array(100).fill(1).map((item) => (
85+
<div>{{ item }}</div>
86+
))}
87+
</div>
88+
</quark-popup>
6889
```
6990

7091
## API

src/docs_react/docs/popup/doc-react.zh-CN.md

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,31 +39,52 @@ export default () => {
3939
通过 position 属性设置弹出位置,默认居中弹出,可以设置为 top、bottom、left、right。
4040

4141
```html
42-
<Popup position="top" :open="open" />
42+
<Popup position="top" open="{open}" />
4343
```
4444

4545
### 关闭图标
4646

4747
设置 closeable 属性后,会在弹出层的右上角显示关闭图标。
4848

4949
```html
50-
<Popup position="bottom" :open="open" closeable />
50+
<Popup position="bottom" open="{open}" closeable />
5151
```
5252

5353
### 禁止遮罩层点击
5454

5555
设置 forbidmaskclick 属性后,点击遮罩层将无法自动关闭弹层。
5656

5757
```html
58-
<Popup position="bottom" :open="open" forbidmaskclick />
58+
<Popup position="bottom" open="{open}" forbidmaskclick />
5959
```
6060

6161
### 圆角弹窗
6262

6363
设置 round 属性后,弹窗会根据弹出位置添加不同的圆角样式。
6464

6565
```html
66-
<Popup position="bottom" :open="open" round />
66+
<Popup position="bottom" open="{open}" round />
67+
```
68+
69+
### 内部滚动设置
70+
71+
通过 `scrollid` 设置指定需要滚动的元素即可。
72+
73+
```jsx
74+
<quark-popup
75+
position="center"
76+
open={open}
77+
onClose={handleClose}
78+
scrollid="scroll-it" // 设置需要滚动元素的id
79+
>
80+
<div class="fix-content">Fixable content</div>
81+
{/* 以下元素可实现滚动 */}
82+
<div id="scroll-it" class="scroll-list">
83+
{new Array(100).fill(1).map((item) => (
84+
<div>{{ item }}</div>
85+
))}
86+
</div>
87+
</quark-popup>
6788
```
6889

6990
## API

0 commit comments

Comments
 (0)