blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(BackTop): allow using css var to custom position (#11312)

Browse Source
This commit is contained in:
neverland 2022-11-26 21:34:49 +08:00 committed by GitHub
parent 1b876d85d1
commit 4105da6796
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vant/src/back-top/BackTop.tsx
View File

@ -15,6 +15,7 @@ import {
import {
addUnit,
inBrowser,
numericProp,
getScrollTop,
createNamespace,
makeNumericProp,
@ -30,8 +31,8 @@ import { Icon } from '../icon';
const [name, bem] = createNamespace('back-top');
export const backTopProps = {
right: makeNumericProp(30),
bottom: makeNumericProp(40),
right: numericProp,
bottom: numericProp,
target: [String, Object] as PropType<TeleportProps['to']>,
offset: makeNumericProp(200),
teleport: {

2
packages/vant/src/back-top/README.zh-CN.md
View File

@ -142,5 +142,7 @@ import type { BackTopProps, BackTopThemeVars } from 'vant';
| ------------------------- | ----------------- | ---- |
| --van-back-top-size | _40px_ | - |
| --van-back-top-icon-size | _20px_ | - |
| --van-back-top-right | _30px_ | - |
| --van-back-top-bottom | _40px_ | - |
| --van-back-top-text-color | _#fff_ | - |
| --van-back-top-background | _var(--van-blue)_ | - |

6
packages/vant/src/back-top/index.less
View File

@ -1,5 +1,7 @@
:root {
--van-back-top-size: 40px;
--van-back-top-right: 30px;
--van-back-top-bottom: 40px;
--van-back-top-icon-size: 20px;
--van-back-top-text-color: #fff;
--van-back-top-background: var(--van-blue);
@ -12,12 +14,14 @@
justify-content: center;
width: var(--van-back-top-size);
height: var(--van-back-top-size);
right: var(--van-back-top-right);
bottom: var(--van-back-top-bottom);
cursor: pointer;
color: var(--van-back-top-text-color);
border-radius: var(--van-radius-max);
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
transform: scale(0);
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
transition: var(--van-duration-base) cubic-bezier(0.25, 0.8, 0.5, 1);
background-color: var(--van-back-top-background);
&:active {