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(PullRefresh): add @pull-refresh-loading-icon-size less var (#8366)

Browse Source
This commit is contained in:
neverland 2021-03-17 11:51:28 +08:00 committed by GitHub
parent 648a768bdd
commit 70b78b0b4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pull-refresh/PullRefresh.tsx
View File

@ -129,7 +129,7 @@ export default defineComponent({
nodes.push(<div class={bem('text')}>{getStatusText()}</div>); nodes.push(<div class={bem('text')}>{getStatusText()}</div>);
} }
if (status === 'loading') { if (status === 'loading') {
nodes.push(<Loading size="16">{getStatusText()}</Loading>); nodes.push(<Loading class={bem('loading')}>{getStatusText()}</Loading>);
} }
return nodes; return nodes;

11
src/pull-refresh/README.md
View File

@ -134,8 +134,9 @@ Use slots to custom tips.
How to use: [Custom Theme](#/en-US/theme). How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description | | Name | Default Value | Description |
| ----------------------------- | --------------- | ----------- | | ------------------------------- | --------------- | ----------- |
| @pull-refresh-head-height | `50px` | - | | @pull-refresh-head-height | `50px` | - |
| @pull-refresh-head-font-size | `@font-size-md` | - | | @pull-refresh-head-font-size | `@font-size-md` | - |
| @pull-refresh-head-text-color | `@gray-6` | - | | @pull-refresh-head-text-color | `@gray-6` | - |
| @pull-refresh-loading-icon-size | `16px` | - |

11
src/pull-refresh/README.zh-CN.md
View File

@ -141,11 +141,12 @@ export default {
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
| 名称 | 默认值 | 描述 | | 名称 | 默认值 | 描述 |
| ----------------------------- | --------------- | ---- | | ------------------------------- | --------------- | ---- |
| @pull-refresh-head-height | `50px` | - | | @pull-refresh-head-height | `50px` | - |
| @pull-refresh-head-font-size | `@font-size-md` | - | | @pull-refresh-head-font-size | `@font-size-md` | - |
| @pull-refresh-head-text-color | `@gray-6` | - | | @pull-refresh-head-text-color | `@gray-6` | - |
| @pull-refresh-loading-icon-size | `16px` | - |
## 常见问题 ## 常见问题

7
src/pull-refresh/index.less
View File

@ -22,4 +22,11 @@
text-align: center; text-align: center;
transform: translateY(-100%); transform: translateY(-100%);
} }
&__loading {
.van-loading__spinner {
width: @pull-refresh-loading-icon-size;
height: @pull-refresh-loading-icon-size;
}
}
} }

12
src/pull-refresh/test/__snapshots__/index.spec.ts.snap
View File

@ -48,10 +48,8 @@ exports[`should render different head content in different pulling status 3`] =
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
> >
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular"> <div class="van-loading van-loading--circular van-pull-refresh__loading">
<span class="van-loading__spinner van-loading__spinner--circular" <span class="van-loading__spinner van-loading__spinner--circular">
style="width: 16px; height: 16px;"
>
<svg class="van-loading__circular" <svg class="van-loading__circular"
viewbox="25 25 50 50" viewbox="25 25 50 50"
> >
@ -78,10 +76,8 @@ exports[`should render different head content in different pulling status 4`] =
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
> >
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular"> <div class="van-loading van-loading--circular van-pull-refresh__loading">
<span class="van-loading__spinner van-loading__spinner--circular" <span class="van-loading__spinner van-loading__spinner--circular">
style="width: 16px; height: 16px;"
>
<svg class="van-loading__circular" <svg class="van-loading__circular"
viewbox="25 25 50 50" viewbox="25 25 50 50"
> >

1
src/style/var.less
View File

@ -614,6 +614,7 @@
@pull-refresh-head-height: 50px; @pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: @font-size-md; @pull-refresh-head-font-size: @font-size-md;
@pull-refresh-head-text-color: @gray-6; @pull-refresh-head-text-color: @gray-6;
@pull-refresh-loading-icon-size: 16px;
// Radio // Radio
@radio-size: 20px; @radio-size: 20px;