blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +08:00
Code Issues Projects Releases Wiki Activity

feat(Stepper): add theme prop (#6282)

Browse Source 
* feat(Stepper): add theme prop

* docs: add round theme doc
This commit is contained in:
neverland 2020-05-15 16:43:37 +08:00 committed by GitHub
parent 26e9492d79
commit 8307b3d9ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 78 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/stepper/README.md
View File

@ -97,6 +97,12 @@ export default {
};
```
### Round Theme
```html
<van-stepper v-model="value" theme="round" button-size="22" disable-input />
```
## API
### Props
@ -112,6 +118,7 @@ export default {
| input-width | Input width | _number \| string_ | `32px` |
| button-size `v2.0.5` | Button size | _number \| string_ | `28px` |
| decimal-length `v2.2.1` | Decimal length | _number \| string_ | - |
| theme `v2.8.2` | Theme, can be set to `round` | _string_ | - |
| integer | Whether to allow only integers | _boolean_ | `false` |
| disabled | Disable value change | _boolean_ | `false` |
| disable-plus `v2.2.16` | Whether to disable plus button | _boolean_ | `false` |

9
src/stepper/README.zh-CN.md
View File

@ -121,6 +121,14 @@ export default {
};
```
### 圆角风格
将 theme 设置为 `round` 来展示圆角风格的步进器
```html
<van-stepper v-model="value" theme="round" button-size="22" disable-input />
```
## API
### Props
@ -136,6 +144,7 @@ export default {
| input-width | 输入框宽度，默认单位为`px` | _number \| string_ | `32px` |
| button-size `v2.0.5` | 按钮大小以及输入框高度，默认单位为`px` | _number \| string_ | `28px` |
| decimal-length `v2.2.1` | 固定显示的小数位数 | _number \| string_ | - |
| theme `v2.8.2` | 样式风格，可选值为 `round` | _string_ | - |
| integer | 是否只允许输入整数 | _boolean_ | `false` |
| disabled | 是否禁用步进器 | _boolean_ | `false` |
| disable-plus `v2.2.16` | 是否禁用增加按钮 | _boolean_ | `false` |

12
src/stepper/demo/index.vue
View File

@ -35,6 +35,15 @@
<van-cell center :title="t('asyncChange')">
<van-stepper :value="stepper6" async-change @change="onChange" />
</van-cell>
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
<van-stepper
v-model="stepperRound"
theme="round"
button-size="22"
disable-input
/>
</van-cell>
</demo-section>
</template>
@ -45,6 +54,7 @@ export default {
step: '步长设置',
range: '限制输入范围',
integer: '限制输入整数',
roundTheme: '圆角风格',
asyncChange: '异步变更',
customSize: '自定义大小',
disableInput: '禁用输入框',
@ -54,6 +64,7 @@ export default {
step: 'Step',
range: 'Range',
integer: 'Integer',
roundTheme: 'Round Theme',
asyncChange: 'Async Change',
customSize: 'Custom Size',
disableInput: 'Disable Input',
@ -71,6 +82,7 @@ export default {
stepper6: 1,
stepper7: 1,
stepper8: 1,
stepperRound: 1,
disabledInput: 1,
};
},

3
src/stepper/index.js
View File

@ -25,6 +25,7 @@ export default createComponent({
props: {
value: null,
theme: String,
integer: Boolean,
disabled: Boolean,
inputWidth: [Number, String],
@ -278,7 +279,7 @@ export default createComponent({
});
return (
<div class={bem()}>
<div class={bem([this.theme])}>
<button
vShow={this.showMinus}
type="button"

48
src/stepper/index.less
View File

@ -11,7 +11,7 @@
width: @stepper-input-height;
height: @stepper-input-height;
margin: 0;
padding: @padding-base;
padding: 0;
color: @stepper-button-icon-color;
vertical-align: middle;
background-color: @stepper-background-color;
@ -19,24 +19,22 @@
cursor: pointer;
&::before {
width: 13px;
width: 50%;
height: 1px;
}
&::after {
width: 1px;
height: 13px;
height: 50%;
}
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
top: 50%;
left: 50%;
background-color: currentColor;
transform: translate(-50%, -50%);
content: '';
}
@ -75,6 +73,7 @@
padding: 0;
color: @stepper-input-text-color;
font-size: @stepper-input-font-size;
line-height: @stepper-input-line-height;
text-align: center;
vertical-align: middle;
background-color: @stepper-background-color;
@ -94,4 +93,37 @@
cursor: default;
}
}
&--round {
.van-stepper__input {
background-color: transparent;
}
.van-stepper__plus,
.van-stepper__minus {
border-radius: 100%;
&:active {
opacity: @active-opacity;
}
&--disabled {
&,
&:active {
opacity: 0.3;
}
}
}
.van-stepper__plus {
color: @white;
background-color: @stepper-button-round-theme-color;
}
.van-stepper__minus {
color: @stepper-button-round-theme-color;
background-color: @white;
border: 1px solid @stepper-button-round-theme-color;
}
}
}

6
src/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -56,5 +56,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>圆角风格</span></div>
<div class="van-cell__value">
<div class="van-stepper van-stepper--round"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 22px; height: 22px;"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 22px;"><button type="button" class="van-stepper__plus" style="width: 22px; height: 22px;"></button></div>
</div>
</div>
</div>
`;

2
src/style/var.less
View File

@ -674,9 +674,11 @@
@stepper-button-icon-color: @text-color;
@stepper-button-disabled-color: @background-color;
@stepper-button-disabled-icon-color: @gray-5;
@stepper-button-round-theme-color: @red;
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md;
@stepper-input-line-height: normal;
@stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray-5;
@stepper-input-disabled-background-color: @active-color;