Skip to content

Commit

Permalink
feat: add-scroll-area-for-popup (#346)
Browse files Browse the repository at this point in the history
  • Loading branch information
xsf0105 authored Sep 4, 2024
1 parent 78c674c commit dd4d4cc
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 123 deletions.
15 changes: 15 additions & 0 deletions packages/quarkd/src/popup/demo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,18 @@
margin-bottom: 24px;
}
}

.fix-content {
line-height: 50px;
display: flex;
justify-content: center;
}
.scroll-list {
max-height: 60vh;
overflow: auto;
div {
width: 240px;
display: flex;
justify-content: center;
}
}
37 changes: 31 additions & 6 deletions packages/quarkd/src/popup/demo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,14 @@
@click="showCenterPopup"
:title="translate('centerPopup')"
></quark-cell>
<quark-cell
islink
type="primary"
@click="openScroll = true"
:title="translate('scrollPopup')"
></quark-cell>
</quark-cell-group>

<quark-popup
id="popup-top"
position="top"
Expand Down Expand Up @@ -87,16 +94,27 @@
<div>{{ translate("fifthLine") }}</div>
<div>{{ translate("sixthLine") }}</div>
</quark-popup>
<quark-popup
id="popup-center"
position="center"
:open="openCenter"
@close="closeCenterPopup"
>

<quark-popup position="center" :open="openCenter" @close="closeCenterPopup">
<div>{{ translate("firstLine") }}</div>
<div>{{ translate("secondLine") }}</div>
<div>{{ translate("thirdLine") }}</div>
</quark-popup>

<quark-popup
position="center"
:open="openScroll"
@close="openScroll = false"
scrollid="scroll-it"
>
<div class="fix-content">Fixable content</div>
<div id="scroll-it" class="scroll-list">
<div v-for="item in 100" :key="item">
{{ item }}
</div>
</div>
</quark-popup>

<h2>{{ translate("style") }}</h2>
<quark-cell-group>
<quark-cell
Expand Down Expand Up @@ -163,6 +181,8 @@ export default createDemo({
const openRight = ref(false);
const openRound = ref(false);
const openCloseable = ref(false);
const openScroll = ref(false);
onBeforeMount(() => {
useTranslate({
"zh-CN": {
Expand All @@ -172,6 +192,7 @@ export default createDemo({
leftPopup: "左侧弹框",
rightPopup: "右侧弹窗",
centerPopup: "居中显示",
scrollPopup: "可滚动区域",
firstLine: "第一行",
secondLine: "第二行",
thirdLine: "第三行",
Expand All @@ -191,6 +212,7 @@ export default createDemo({
leftPopup: "Left Popup",
rightPopup: "Right Popup",
centerPopup: "Center Popup",
scrollPopup: "Scrollable Area",
firstLine: "First Line",
secondLine: "Second Line",
thirdLine: "Third Line",
Expand Down Expand Up @@ -235,6 +257,7 @@ export default createDemo({
const closeTopPopup = () => {
openTop.value = false;
};
const closedTopPopup = () => {
console.log("closedTopPopup");
};
Expand Down Expand Up @@ -265,6 +288,8 @@ export default createDemo({
return {
openCenter,
openTop,
openScroll,
openBottom,
openLeft,
openRight,
Expand Down
29 changes: 25 additions & 4 deletions packages/quarkd/src/popup/doc-react.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,52 @@ export default () => {
Use position prop to set popup display position.By default, the popup is centered and can be set to top, bottom, left, right.

```html
<Popup position="top" :open="open" />
<Popup position="top" open="{open}" />
```

### Close Icon

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

```html
<Popup position="bottom" :open="open" closeable />
<Popup position="bottom" open="{open}" closeable />
```

### Forbid mask click

forbid mask click

```html
<Popup position="bottom" :open="open" forbidmaskclick />
<Popup position="bottom" open="{open}" forbidmaskclick />
```

### Round Corner

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

```html
<Popup position="bottom" :open="open" round />
<Popup position="bottom" open="{open}" round />
```

### 内部滚动设置

You can specify the element that needs to scroll by setting the `scrollid`.

```jsx
<quark-popup
position="center"
open={open}
onClose={handleClose}
scrollid="scroll-it" // Set the id of the element that needs to scroll
>
<div class="fix-content">Fixable content</div>
{/* The following elements can scroll */}
<div id="scroll-it" class="scroll-list">
{new Array(100).fill(1).map((item) => (
<div>{{ item }}</div>
))}
</div>
</quark-popup>
```

## API
Expand Down
29 changes: 25 additions & 4 deletions packages/quarkd/src/popup/doc-react.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,31 +39,52 @@ export default () => {
通过 position 属性设置弹出位置,默认居中弹出,可以设置为 top、bottom、left、right。

```html
<Popup position="top" :open="open" />
<Popup position="top" open="{open}" />
```

### 关闭图标

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

```html
<Popup position="bottom" :open="open" closeable />
<Popup position="bottom" open="{open}" closeable />
```

### 禁止遮罩层点击

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

```html
<Popup position="bottom" :open="open" forbidmaskclick />
<Popup position="bottom" open="{open}" forbidmaskclick />
```

### 圆角弹窗

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

```html
<Popup position="bottom" :open="open" round />
<Popup position="bottom" open="{open}" round />
```

### 内部滚动设置

通过 `scrollid` 设置指定需要滚动的元素即可。

```jsx
<quark-popup
position="center"
open={open}
onClose={handleClose}
scrollid="scroll-it" // 设置需要滚动元素的id
>
<div class="fix-content">Fixable content</div>
{/* 以下元素可实现滚动 */}
<div id="scroll-it" class="scroll-list">
{new Array(100).fill(1).map((item) => (
<div>{{ item }}</div>
))}
</div>
</quark-popup>
```

## API
Expand Down
67 changes: 34 additions & 33 deletions packages/quarkd/src/popup/doc.en-US.md
Original file line number Diff line number Diff line change
@@ -1,52 +1,32 @@
# Popup

### Intro
### Introduction

Pop-up windows
Popup layer

### Install
### Installation

```tsx
import "quarkd/lib/popup";
```

### Basic Usage

```html
<quark-popup position="bottom" :open="open" @close="handleClose">
<div>First Line</div>
<div>Second Line</div>
<div>Third Line</div>
<div>Forth Line</div>
<div>Fifth Line</div>
<div>Six Line</div>
```jsx
<quark-popup
position="bottom"
:open="open"
@close="open = false">
<div>First line</div>
<div>Second line</div>
</quark-popup>
<div @click="showPopup">Show Popup</div>
```

```js
<script>
export default {
data() {
return {
open: false
}
},
methods: {
showPopup() {
this.open = true;
},
handleClose() {
this.open = false;
}
}
}
</script>
<div @click="open = true">Trigger Popup display</div>
```

### Position
### Popup Position

Use position prop to set popup display position.By default, the popup is centered and can be set to top, bottom, left, right.
Set the popup position through the position attribute. The default is centered. It can be set to top, bottom, left, or right.

```html
<quark-popup position="top" :open="open" />
Expand Down Expand Up @@ -76,6 +56,27 @@ After setting the round property, the popup window will add different rounded co
<quark-popup position="bottom" :open="open" round />
```

### Internal Scroll Setting

You can specify the element that needs to scroll by setting the `scrollid`.

```html
<quark-popup
position="center"
:open="openScroll"
@close="openScroll = false"
scrollid="scroll-it" // Set the id of the element that needs to scroll
>
<div class="fix-content">Fixable content</div>
<!-- The following elements can scroll -->
<div id="scroll-it" class="scroll-list">
<div v-for="item in 100" :key="item">
{{ item }}
</div>
</div>
</quark-popup>
```

## API

### Props
Expand Down
54 changes: 29 additions & 25 deletions packages/quarkd/src/popup/doc.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,16 @@ import "quarkd/lib/popup";

### 基本使用

```html
<quark-popup position="bottom" :open="open" @close="handleClose">
<div>第一xxxxxxxxxxxxxxxxx行</div>
<div>第二xxxxxxxxxxxxxxxxx行</div>
```jsx
<quark-popup
position="bottom"
:open="open"
@close="open = false">
<div>第一行</div>
<div>第二行</div>
</quark-popup>
<div @click="showPopup">触发Popup显示</div>
```

```js
<script>
import 'quarkd/lib/popup';
export default {
data() {
return {
open: false
}
},
methods: {
showPopup() {
this.open = true;
},
handleClose() {
this.open = false;
}
}
}
</script>
<div @click="open = true">触发Popup显示</div>
```

### 弹窗位置
Expand Down Expand Up @@ -73,6 +56,27 @@ export default {
<quark-popup position="bottom" :open="open" round />
```

### 内部滚动设置

通过 `scrollid` 设置指定需要滚动的元素即可。

```html
<quark-popup
position="center"
:open="openScroll"
@close="openScroll = false"
scrollid="scroll-it" // 设置需要滚动元素的id
>
<div class="fix-content">Fixable content</div>
<!-- 以下元素可实现滚动 -->
<div id="scroll-it" class="scroll-list">
<div v-for="item in 100" :key="item">
{{ item }}
</div>
</div>
</quark-popup>
```

## API

### Props
Expand Down
Loading

0 comments on commit dd4d4cc

Please sign in to comment.