mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(Steps): rename unreleased center prop
This commit is contained in:
parent
673aec052c
commit
60bf564c7f
@ -23,15 +23,24 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
lineStyle() {
|
lineStyle() {
|
||||||
const { activeColor, inactiveColor, alignCenter, direction } = this.parent
|
const { activeColor, inactiveColor, center, direction } = this.parent;
|
||||||
return {
|
const style = {
|
||||||
background: this.status === 'finish' ? activeColor : inactiveColor,
|
background: this.status === 'finish' ? activeColor : inactiveColor,
|
||||||
top: (alignCenter && direction === 'vertical') && '50%'
|
};
|
||||||
|
if (center && direction === 'vertical') {
|
||||||
|
style.top = '50%';
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
|
||||||
|
circleContainerStyle() {
|
||||||
|
if (this.parent.center && this.parent.direction === 'vertical') {
|
||||||
|
return {
|
||||||
|
top: '50%',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
circleContainerStyle() {
|
|
||||||
return { top: (this.parent.alignCenter && this.parent.direction === 'vertical') && '50%' };
|
|
||||||
},
|
|
||||||
titleStyle() {
|
titleStyle() {
|
||||||
if (this.active) {
|
if (this.active) {
|
||||||
return { color: this.parent.activeColor };
|
return { color: this.parent.activeColor };
|
||||||
@ -114,7 +123,11 @@ export default createComponent({
|
|||||||
>
|
>
|
||||||
{this.slots()}
|
{this.slots()}
|
||||||
</div>
|
</div>
|
||||||
<div class={bem('circle-container')} onClick={this.onClickStep} style={this.circleContainerStyle} >
|
<div
|
||||||
|
class={bem('circle-container')}
|
||||||
|
onClick={this.onClickStep}
|
||||||
|
style={this.circleContainerStyle}
|
||||||
|
>
|
||||||
{this.genCircle()}
|
{this.genCircle()}
|
||||||
</div>
|
</div>
|
||||||
<div class={bem('line')} style={this.lineStyle} />
|
<div class={bem('line')} style={this.lineStyle} />
|
||||||
|
@ -72,12 +72,12 @@ export default {
|
|||||||
| active | Active step | _number \| string_ | `0` |
|
| active | Active step | _number \| string_ | `0` |
|
||||||
| direction | Can be set to `vertical` | _string_ | `horizontal` |
|
| direction | Can be set to `vertical` | _string_ | `horizontal` |
|
||||||
| active-color | Active step color | _string_ | `#07c160` |
|
| active-color | Active step color | _string_ | `#07c160` |
|
||||||
| align-center | Center title and description(Only active by `direction: vertical` ) | _boolean_ | `false` |
|
|
||||||
| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
|
| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
|
||||||
| active-icon | Active icon name | _string_ | `checked` |
|
| active-icon | Active icon name | _string_ | `checked` |
|
||||||
| inactive-icon | Inactive icon name | _string_ | - |
|
| inactive-icon | Inactive icon name | _string_ | - |
|
||||||
| finish-icon `v2.12.7` | Finish icon name | _string_ | - |
|
| finish-icon `v2.12.7` | Finish icon name | _string_ | - |
|
||||||
| icon-prefix `v2.12.15` | Icon className prefix | _string_ | `van-icon` |
|
| icon-prefix `v2.12.15` | Icon className prefix | _string_ | `van-icon` |
|
||||||
|
| center | Whether to center content when direction is vertical | _boolean_ | `false` |
|
||||||
|
|
||||||
### Step Slots
|
### Step Slots
|
||||||
|
|
||||||
|
@ -82,12 +82,12 @@ export default {
|
|||||||
| active | 当前步骤 | _number \| string_ | `0` |
|
| active | 当前步骤 | _number \| string_ | `0` |
|
||||||
| direction | 显示方向,可选值为 `vertical` | _string_ | `horizontal` |
|
| direction | 显示方向,可选值为 `vertical` | _string_ | `horizontal` |
|
||||||
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
||||||
| align-center | 进行居中对齐(设置`direction: vertical`时有效) | _boolean_ | `false` |
|
|
||||||
| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
|
| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
|
||||||
| active-icon | 激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
|
| active-icon | 激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
|
||||||
| inactive-icon | 未激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
|
| inactive-icon | 未激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
|
||||||
| finish-icon `v2.12.7` | 已完成步骤对应的底部图标,优先级高于 `inactive-icon`,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
|
| finish-icon `v2.12.7` | 已完成步骤对应的底部图标,优先级高于 `inactive-icon`,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
|
||||||
| icon-prefix `v2.12.15` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
| icon-prefix `v2.12.15` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
||||||
|
| center | 是否进行居中对齐,仅在竖向展示时有效 | _boolean_ | `false` |
|
||||||
|
|
||||||
### Step Slots
|
### Step Slots
|
||||||
|
|
||||||
|
@ -7,6 +7,7 @@ export default createComponent({
|
|||||||
mixins: [ParentMixin('vanSteps')],
|
mixins: [ParentMixin('vanSteps')],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
center: Boolean,
|
||||||
iconPrefix: String,
|
iconPrefix: String,
|
||||||
finishIcon: String,
|
finishIcon: String,
|
||||||
activeColor: String,
|
activeColor: String,
|
||||||
@ -24,10 +25,6 @@ export default createComponent({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'checked',
|
default: 'checked',
|
||||||
},
|
},
|
||||||
alignCenter: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user