mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 02:41:46 +08:00
feat(ActionSheet): add cancel slot (#8333)
This commit is contained in:
neverland
GitHub
parent
ceebc22e63
commit
393d7cb7af
@ -78,11 +78,11 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const renderCancel = () => {
|
const renderCancel = () => {
|
||||||
if (props.cancelText) {
|
if (slots.cancel || props.cancelText) {
|
||||||
return [
|
return [
|
||||||
<div class={bem('gap')} />,
|
<div class={bem('gap')} />,
|
||||||
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
||||||
{props.cancelText}
|
{slots.cancel ? slots.cancel() : props.cancelText}
|
||||||
</button>,
|
</button>,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -211,10 +211,11 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| ----------- | ------------------ |
|
| ---------------- | ------------------------------------ |
|
||||||
| default | Custom content |
|
| default | Custom content |
|
||||||
| description | Custom description |
|
| description | Custom description above the options |
|
||||||
|
| cancel `v3.0.10` | Custom the content of cancel button |
|
||||||
|
|
||||||
### Less Variables
|
### Less Variables
|
||||||
|
|
||||||
|
|||||||
@ -227,10 +227,11 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| 名称 | 说明 |
|
| 名称 | 说明 |
|
||||||
| ----------- | -------------------- |
|
| ---------------- | -------------------- |
|
||||||
| default | 自定义面板的展示内容 |
|
| default | 自定义面板的展示内容 |
|
||||||
| description | 自定义描述文案 |
|
| description | 自定义描述文案 |
|
||||||
|
| cancel `v3.0.10` | 自定义取消按钮内容 |
|
||||||
|
|
||||||
### 样式变量
|
### 样式变量
|
||||||
|
|
||||||
|
|||||||
@ -5,6 +5,14 @@ exports[`should allow to custom close icon with closeIcon prop 1`] = `
|
|||||||
</i>
|
</i>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`should render cancel slot correctly 1`] = `
|
||||||
|
<button type="button"
|
||||||
|
class="van-action-sheet__cancel"
|
||||||
|
>
|
||||||
|
Custom Cancel
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`should render default slot correctly 1`] = `
|
exports[`should render default slot correctly 1`] = `
|
||||||
<transition-stub>
|
<transition-stub>
|
||||||
<div class="van-overlay">
|
<div class="van-overlay">
|
||||||
|
|||||||
@ -182,6 +182,19 @@ test('should render description correctly', () => {
|
|||||||
).toMatchSnapshot();
|
).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('should render cancel slot correctly', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
props: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
cancel: () => 'Custom Cancel',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-action-sheet__cancel').html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
test('should render description slot when match snapshot', () => {
|
test('should render description slot when match snapshot', () => {
|
||||||
const wrapper = mount(ActionSheet, {
|
const wrapper = mount(ActionSheet, {
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,30 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'default'">
|
<demo-block card>
|
||||||
{{ t('button1') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'default'">
|
||||||
</van-cell>
|
{{ t('button1') }}
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'custom'">
|
</van-cell>
|
||||||
{{ t('button2') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'custom'">
|
||||||
</van-cell>
|
{{ t('button2') }}
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
|
</van-cell>
|
||||||
{{ t('button3') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
|
||||||
</van-cell>
|
{{ t('button3') }}
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'title'">
|
</van-cell>
|
||||||
{{ t('button4') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'title'">
|
||||||
</van-cell>
|
{{ t('button4') }}
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
|
</van-cell>
|
||||||
{{ t('button5') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
|
||||||
</van-cell>
|
{{ t('button5') }}
|
||||||
<van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
|
</van-cell>
|
||||||
{{ t('button6') }}
|
<van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
|
||||||
</van-cell>
|
{{ t('button6') }}
|
||||||
<van-field
|
</van-cell>
|
||||||
v-model="value"
|
<van-field
|
||||||
readonly
|
v-model="value"
|
||||||
clickable
|
readonly
|
||||||
:label="t('bindValue')"
|
clickable
|
||||||
:placeholder="t('clickToInput')"
|
:label="t('bindValue')"
|
||||||
@touchstart.stop="keyboard = 'bindValue'"
|
:placeholder="t('clickToInput')"
|
||||||
/>
|
@touchstart.stop="keyboard = 'bindValue'"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
:show="keyboard === 'default'"
|
:show="keyboard === 'default'"
|
||||||
|
|||||||
@ -1,82 +1,84 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`should render demo and match snapshot 1`] = `
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
<div class="van-cell van-cell--clickable"
|
<div>
|
||||||
role="button"
|
<div class="van-cell van-cell--clickable"
|
||||||
tabindex="0"
|
role="button"
|
||||||
>
|
tabindex="0"
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
>
|
||||||
Show Default Keyboard
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
|
Show Default Keyboard
|
||||||
|
</div>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable"
|
>
|
||||||
role="button"
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
tabindex="0"
|
Show Keyboard With Sidebar
|
||||||
>
|
</div>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
Show Keyboard With Sidebar
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable"
|
>
|
||||||
role="button"
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
tabindex="0"
|
Show IdNumber Keyboard
|
||||||
>
|
</div>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
Show IdNumber Keyboard
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable"
|
>
|
||||||
role="button"
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
tabindex="0"
|
Show Keyboard With Title
|
||||||
>
|
</div>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
Show Keyboard With Title
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable"
|
>
|
||||||
role="button"
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
tabindex="0"
|
Show Keyboard With Multiple ExtraKey
|
||||||
>
|
</div>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
Show Keyboard With Multiple ExtraKey
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable"
|
>
|
||||||
role="button"
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
tabindex="0"
|
Show Keyboard With Random Key Order
|
||||||
>
|
</div>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
Show Keyboard With Random Key Order
|
</i>
|
||||||
</div>
|
</div>
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
<div class="van-cell van-cell--clickable van-field"
|
||||||
</i>
|
role="button"
|
||||||
</div>
|
tabindex="0"
|
||||||
<div class="van-cell van-cell--clickable van-field"
|
>
|
||||||
role="button"
|
<div class="van-cell__title van-field__label">
|
||||||
tabindex="0"
|
<span>
|
||||||
>
|
Bind Value
|
||||||
<div class="van-cell__title van-field__label">
|
</span>
|
||||||
<span>
|
</div>
|
||||||
Bind Value
|
<div class="van-cell__value van-field__value">
|
||||||
</span>
|
<div class="van-field__body">
|
||||||
</div>
|
<input type="text"
|
||||||
<div class="van-cell__value van-field__value">
|
class="van-field__control"
|
||||||
<div class="van-field__body">
|
readonly
|
||||||
<input type="text"
|
placeholder="Click To Input"
|
||||||
class="van-field__control"
|
>
|
||||||
readonly
|
</div>
|
||||||
placeholder="Click To Input"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,48 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-cell center :title="t('basicUsage')">
|
<demo-block card>
|
||||||
<van-stepper v-model="stepper1" />
|
<van-cell center :title="t('basicUsage')">
|
||||||
</van-cell>
|
<van-stepper v-model="stepper1" />
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('step')">
|
<van-cell center :title="t('step')">
|
||||||
<van-stepper v-model="stepper2" step="2" />
|
<van-stepper v-model="stepper2" step="2" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('range')">
|
<van-cell center :title="t('range')">
|
||||||
<van-stepper v-model="stepper3" :min="5" :max="8" />
|
<van-stepper v-model="stepper3" :min="5" :max="8" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('integer')">
|
<van-cell center :title="t('integer')">
|
||||||
<van-stepper v-model="stepper4" integer />
|
<van-stepper v-model="stepper4" integer />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('disabled')">
|
<van-cell center :title="t('disabled')">
|
||||||
<van-stepper v-model="stepper5" disabled />
|
<van-stepper v-model="stepper5" disabled />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('disableInput')">
|
<van-cell center :title="t('disableInput')">
|
||||||
<van-stepper v-model="disabledInput" disable-input />
|
<van-stepper v-model="disabledInput" disable-input />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('decimalLength')">
|
<van-cell center :title="t('decimalLength')">
|
||||||
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
|
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('customSize')">
|
<van-cell center :title="t('customSize')">
|
||||||
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
|
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell center :title="t('beforeChange')">
|
<van-cell center :title="t('beforeChange')">
|
||||||
<van-stepper v-model="stepper6" :before-change="beforeChange" />
|
<van-stepper v-model="stepper6" :before-change="beforeChange" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
|
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
|
||||||
<van-stepper
|
<van-stepper
|
||||||
v-model="stepperRound"
|
v-model="stepperRound"
|
||||||
theme="round"
|
theme="round"
|
||||||
button-size="22"
|
button-size="22"
|
||||||
disable-input
|
disable-input
|
||||||
/>
|
/>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
</demo-block>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@ -1,282 +1,284 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`should render demo and match snapshot 1`] = `
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
<div class="van-cell van-cell--center">
|
<div>
|
||||||
<div class="van-cell__title">
|
<div class="van-cell van-cell--center">
|
||||||
<span>
|
<div class="van-cell__title">
|
||||||
Basic Usage
|
<span>
|
||||||
</span>
|
Basic Usage
|
||||||
</div>
|
</span>
|
||||||
<div class="van-cell__value">
|
</div>
|
||||||
<div class="van-stepper">
|
<div class="van-cell__value">
|
||||||
<button type="button"
|
<div class="van-stepper">
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
<button type="button"
|
||||||
>
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
</button>
|
>
|
||||||
<input type="text"
|
</button>
|
||||||
role="spinbutton"
|
<input type="text"
|
||||||
class="van-stepper__input"
|
role="spinbutton"
|
||||||
inputmode="decimal"
|
class="van-stepper__input"
|
||||||
aria-valuemax="Infinity"
|
inputmode="decimal"
|
||||||
aria-valuemin="1"
|
aria-valuemax="Infinity"
|
||||||
aria-valuenow="1"
|
aria-valuemin="1"
|
||||||
>
|
aria-valuenow="1"
|
||||||
<button type="button"
|
>
|
||||||
class="van-stepper__plus"
|
<button type="button"
|
||||||
>
|
class="van-stepper__plus"
|
||||||
</button>
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Step
|
||||||
Step
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Range
|
||||||
Range
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="8"
|
||||||
aria-valuemax="8"
|
aria-valuemin="5"
|
||||||
aria-valuemin="5"
|
aria-valuenow="5"
|
||||||
aria-valuenow="5"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Integer
|
||||||
Integer
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="tel"
|
||||||
<input type="tel"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
inputmode="numeric"
|
||||||
inputmode="numeric"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Disabled
|
||||||
Disabled
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
disabled
|
||||||
disabled
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus van-stepper__plus--disabled"
|
||||||
class="van-stepper__plus van-stepper__plus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Disable Input
|
||||||
Disable Input
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
readonly
|
||||||
readonly
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Decimal Length
|
||||||
Decimal Length
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Custom Size
|
||||||
Custom Size
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
style="width: 32px; height: 32px;"
|
||||||
style="width: 32px; height: 32px;"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
style="width: 40px; height: 32px;"
|
||||||
style="width: 40px; height: 32px;"
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
style="width: 32px; height: 32px;"
|
||||||
style="width: 32px; height: 32px;"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Before Change
|
||||||
Before Change
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper">
|
||||||
<div class="van-stepper">
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-cell van-cell--center">
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell__title">
|
||||||
<div class="van-cell__title">
|
<span>
|
||||||
<span>
|
Round Theme
|
||||||
Round Theme
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value">
|
||||||
<div class="van-cell__value">
|
<div class="van-stepper van-stepper--round">
|
||||||
<div class="van-stepper van-stepper--round">
|
<button type="button"
|
||||||
<button type="button"
|
style="width: 22px; height: 22px;"
|
||||||
style="width: 22px; height: 22px;"
|
class="van-stepper__minus van-stepper__minus--disabled"
|
||||||
class="van-stepper__minus van-stepper__minus--disabled"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
<input type="text"
|
||||||
<input type="text"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
class="van-stepper__input"
|
||||||
class="van-stepper__input"
|
style="height: 22px;"
|
||||||
style="height: 22px;"
|
readonly
|
||||||
readonly
|
inputmode="decimal"
|
||||||
inputmode="decimal"
|
aria-valuemax="Infinity"
|
||||||
aria-valuemax="Infinity"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="1"
|
||||||
aria-valuenow="1"
|
>
|
||||||
>
|
<button type="button"
|
||||||
<button type="button"
|
style="width: 22px; height: 22px;"
|
||||||
style="width: 22px; height: 22px;"
|
class="van-stepper__plus"
|
||||||
class="van-stepper__plus"
|
>
|
||||||
>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user