mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Popup): improve position document (#11443)
This commit is contained in:
neverland
GitHub
parent
3f882bda96
commit
4e3c32bc2b
@ -44,10 +44,37 @@ export default {
|
||||
|
||||
### Position
|
||||
|
||||
Use `position` prop to set popup display position.
|
||||
Use `position` prop to set Popup display position.
|
||||
|
||||
The default position is `center`, it can be set to `top`, `bottom`, `left`, `right`.
|
||||
|
||||
- When the position is `top` or `bottom`, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.
|
||||
- When the position is `left` or `right` side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
<!-- top popup -->
|
||||
<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
|
||||
|
||||
<!-- bottom popup -->
|
||||
<van-popup
|
||||
v-model:show="showBottom"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
|
||||
<!-- left popup -->
|
||||
<van-popup
|
||||
v-model:show="showLeft"
|
||||
position="left"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
|
||||
<!-- Popup on the right -->
|
||||
<van-popup
|
||||
v-model:show="showRight"
|
||||
position="right"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### Close Icon
|
||||
|
||||
@ -46,10 +46,35 @@ export default {
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过 `position` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
|
||||
通过 `position` 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
|
||||
|
||||
- 当弹窗从顶部或底部弹出时，默认宽度与屏幕宽度保持一致，弹窗高度取决于内容的高度。
|
||||
- 当弹窗从左侧或右侧弹出时，默认不设置宽度和高度，弹窗的宽高取决于内容的宽高。
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
<!-- 顶部弹出 -->
|
||||
<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
|
||||
|
||||
<!-- 底部弹出 -->
|
||||
<van-popup
|
||||
v-model:show="showBottom"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
|
||||
<!-- 左侧弹出 -->
|
||||
<van-popup
|
||||
v-model:show="showLeft"
|
||||
position="left"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
|
||||
<!-- 右侧弹出 -->
|
||||
<van-popup
|
||||
v-model:show="showRight"
|
||||
position="right"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### 关闭图标
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import VanCell from '../../cell';
|
||||
import VanPopup from '..';
|
||||
import VanGrid from '../../grid';
|
||||
import VanGridItem from '../../grid-item';
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '../../../docs/site';
|
||||
|
||||
@ -54,10 +56,28 @@ const showCustomIconPosition = ref(false);
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('position')">
|
||||
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
|
||||
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
|
||||
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
|
||||
<van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
|
||||
<van-grid clickable>
|
||||
<van-grid-item
|
||||
icon="arrow-up"
|
||||
:text="t('buttonTop')"
|
||||
@click="showTop = true"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="arrow-down"
|
||||
:text="t('buttonBottom')"
|
||||
@click="showBottom = true"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="arrow-left"
|
||||
:text="t('buttonLeft')"
|
||||
@click="showLeft = true"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="arrow"
|
||||
:text="t('buttonRight')"
|
||||
@click="showRight = true"
|
||||
/>
|
||||
</van-grid>
|
||||
|
||||
<van-popup
|
||||
v-model:show="showTop"
|
||||
|
||||
@ -30,53 +30,63 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
From Top
|
||||
</span>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item"
|
||||
style="flex-basis: 25%;"
|
||||
>
|
||||
<div role="button"
|
||||
class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-up van-grid-item__icon">
|
||||
</i>
|
||||
<span class="van-grid-item__text">
|
||||
From Top
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
From Bottom
|
||||
</span>
|
||||
<div class="van-grid-item"
|
||||
style="flex-basis: 25%;"
|
||||
>
|
||||
<div role="button"
|
||||
class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-down van-grid-item__icon">
|
||||
</i>
|
||||
<span class="van-grid-item__text">
|
||||
From Bottom
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
From Left
|
||||
</span>
|
||||
<div class="van-grid-item"
|
||||
style="flex-basis: 25%;"
|
||||
>
|
||||
<div role="button"
|
||||
class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-left van-grid-item__icon">
|
||||
</i>
|
||||
<span class="van-grid-item__text">
|
||||
From Left
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
From Right
|
||||
</span>
|
||||
<div class="van-grid-item"
|
||||
style="flex-basis: 25%;"
|
||||
>
|
||||
<div role="button"
|
||||
class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-grid-item__icon">
|
||||
</i>
|
||||
<span class="van-grid-item__text">
|
||||
From Right
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<transition-stub name="van-fade"
|
||||
appear="true"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user