mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 23:49:14 +08:00
feat(Stepper): add theme prop (#6282)
* feat(Stepper): add theme prop * docs: add round theme doc
This commit is contained in:
neverland
GitHub
parent
26e9492d79
commit
8307b3d9ad
@ -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` |
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user