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

feat(FloatingPanel): allow to custom bar style (#11962)

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

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

@ -121,3 +121,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-floating-panel-header-height | _30px_ | - |
| --van-floating-panel-z-index | _999_ | - |
| --van-floating-panel-background | _var(--van-background-2)_ | - |
| --van-floating-panel-bar-width | _20px_ | - |
| --van-floating-panel-bar-height | _3px_ | - |
| --van-floating-panel-bar-color | _var(--van-gray-5)_ | - |

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

@ -121,3 +121,6 @@ import type { FloatingPanelProps } from 'vant';
| --van-floating-panel-header-height | _30px_ | - |
| --van-floating-panel-z-index | _999_ | - |
| --van-floating-panel-background | _var(--van-background-2)_ | - |
| --van-floating-panel-bar-width | _20px_ | - |
| --van-floating-panel-bar-height | _3px_ | - |
| --van-floating-panel-bar-color | _var(--van-gray-5)_ | - |

2
packages/vant/src/floating-panel/demo/index.vue
View File

@ -48,6 +48,7 @@ const height = ref(anchors[0]);
</van-cell-group>
</van-floating-panel>
</van-tab>
<van-tab :title="t('customAnchors')">
<van-floating-panel v-model:height="height" :anchors="anchors">
<div style="text-align: center; padding: 15px">
@ -55,6 +56,7 @@ const height = ref(anchors[0]);
</div>
</van-floating-panel>
</van-tab>
<van-tab :title="t('headDragOnly')">
<van-floating-panel :content-draggable="false">
<div style="text-align: center; padding: 15px">

11
packages/vant/src/floating-panel/index.less
View File

@ -3,6 +3,9 @@
--van-floating-panel-header-height: 30px;
--van-floating-panel-z-index: 999;
--van-floating-panel-background: var(--van-background-2);
--van-floating-panel-bar-width: 20px;
--van-floating-panel-bar-height: 3px;
--van-floating-panel-bar-color: var(--van-gray-5);
}
.van-floating-panel {
@ -37,10 +40,10 @@
user-select: none;
&-bar {
height: 3px;
width: 20px;
border-radius: 4px;
background: var(--van-gray-5);
height: var(--van-floating-panel-bar-height);
width: var(--van-floating-panel-bar-width);
border-radius: var(--van-radius-md);
background: var(--van-floating-panel-bar-color);
}
}