Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add-scroll-area-for-popup #346

Merged
merged 1 commit into from
Sep 4, 2024
Merged

feat: add-scroll-area-for-popup #346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/quarkd/src/popup/demo.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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