blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

docs(FloatingPanel): add some descriptions (#11960)

Browse Source
This commit is contained in:
neverland 2023-06-11 12:11:46 +08:00 committed by GitHub
parent 97fa5301fb
commit b62a1bbcf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vant/src/floating-panel/README.md
View File

@ -20,6 +20,8 @@ app.use(FloatingPanel);
### Basic Usage
The default height of FloatingPanel is `100px`, and users can drag it to expand the panel to a height of `60%` of the screen height.
```html
<van-floating-panel>
<van-cell-group>
@ -35,6 +37,10 @@ app.use(FloatingPanel);
### Custom Anchors
You can set the anchor position of FloatingPanel through the `anchors` attribute, and control the display height of the current panel through `v-model:height`.
For example, you can make the panel stop at three positions: `100px`, 40% of the screen height, and 70% of the screen height.
```html
<van-floating-panel v-model:height="height" :anchors="anchors">
<div style="text-align: center; padding: 15px">
@ -62,6 +68,8 @@ export default {
### Head Drag Only
By default, both the header and content areas of FloatingPanel can be dragged, but you can disable dragging of the content area through the `content-draggable` attribute.
```html
<van-floating-panel :content-draggable="false">
<div style="text-align: center; padding: 15px">

8
packages/vant/src/floating-panel/README.zh-CN.md
View File

@ -20,6 +20,8 @@ app.use(FloatingPanel);
### 基础用法
FloatingPanel 的默认高度为 `100px`，用户可以拖动来展开面板，使高度达到 `60%` 的屏幕高度。
```html
<van-floating-panel>
<van-cell-group>
@ -35,6 +37,10 @@ app.use(FloatingPanel);
### 自定义锚点
你可以通过 `anchors` 属性来设置 FloatingPanel 的锚点位置，并通过 `v-model:height` 来控制当前面板的显示高度。
比如，使面板的高度在 `100px`、40% 屏幕高度和 70% 屏幕高度三个位置停靠：
```html
<van-floating-panel v-model:height="height" :anchors="anchors">
<div style="text-align: center; padding: 15px">
@ -62,6 +68,8 @@ export default {
### 仅头部拖拽
默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 `content-draggable` 属性来禁用内容区域的拖拽。
```html
<van-floating-panel :content-draggable="false">
<div style="text-align: center; padding: 15px">