blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 18:00:27 +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 { import {
addUnit, addUnit,
inBrowser, inBrowser,
numericProp,
getScrollTop, getScrollTop,
createNamespace, createNamespace,
makeNumericProp, makeNumericProp,
@ -30,8 +31,8 @@ import { Icon } from '../icon';
const [name, bem] = createNamespace('back-top'); const [name, bem] = createNamespace('back-top');
export const backTopProps = { export const backTopProps = {
right: makeNumericProp(30), right: numericProp,
bottom: makeNumericProp(40), bottom: numericProp,
target: [String, Object] as PropType<TeleportProps['to']>, target: [String, Object] as PropType<TeleportProps['to']>,
offset: makeNumericProp(200), offset: makeNumericProp(200),
teleport: { 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-size | _40px_ | - |
| --van-back-top-icon-size | _20px_ | - | | --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-text-color | _#fff_ | - |
| --van-back-top-background | _var(--van-blue)_ | - | | --van-back-top-background | _var(--van-blue)_ | - |

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

@ -1,5 +1,7 @@
:root { :root {
--van-back-top-size: 40px; --van-back-top-size: 40px;
--van-back-top-right: 30px;
--van-back-top-bottom: 40px;
--van-back-top-icon-size: 20px; --van-back-top-icon-size: 20px;
--van-back-top-text-color: #fff; --van-back-top-text-color: #fff;
--van-back-top-background: var(--van-blue); --van-back-top-background: var(--van-blue);
@ -12,12 +14,14 @@
justify-content: center; justify-content: center;
width: var(--van-back-top-size); width: var(--van-back-top-size);
height: 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; cursor: pointer;
color: var(--van-back-top-text-color); color: var(--van-back-top-text-color);
border-radius: var(--van-radius-max); border-radius: var(--van-radius-max);
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12); box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
transform: scale(0); 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); background-color: var(--van-back-top-background);
&:active { &:active {