feat(field,field-item): code refactor
BREAKING CHANGE: remove unnecessary code and rename some slots
This commit is contained in:
moyus
parent
39049ffc1d
commit
dab9d9ae6e
|
|
@ -162,35 +162,24 @@ drop-menu-disabled-opacity = opacity-disabled
|
||||||
field-padding-h = h-gap-sl
|
field-padding-h = h-gap-sl
|
||||||
field-padding-v = v-gap-sl
|
field-padding-v = v-gap-sl
|
||||||
field-bg-color = color-bg-inverse
|
field-bg-color = color-bg-inverse
|
||||||
|
field-header-gap = v-gap-lg
|
||||||
|
field-footer-gap = v-gap-md
|
||||||
field-title-color = color-text-base
|
field-title-color = color-text-base
|
||||||
field-title-font-size = font-caption-large
|
field-title-font-size = font-caption-large
|
||||||
field-title-font-weight = font-weight-normal
|
field-title-font-weight = font-weight-normal
|
||||||
field-title-operator-color = color-text-minor
|
field-describe-color = color-text-caption
|
||||||
field-title-operator-font-size = font-body-large
|
field-describe-font-size = font-body-large
|
||||||
field-title-margin = 36px
|
field-action-color = color-text-minor
|
||||||
field-item-padding-v = v-gap-lg
|
field-action-font-size = font-body-large
|
||||||
field-item-bg-tap-color = color-bg-tap
|
|
||||||
field-item-label-color = color-text-base
|
// field-item
|
||||||
field-item-label-font-size = font-caption-normal
|
field-item-min-height = 108px
|
||||||
field-item-label-font-weight = font-weight-normal
|
field-item-padding-v = 30px
|
||||||
field-item-content-color = color-text-base
|
field-item-color = color-text-base
|
||||||
field-item-content-font-size = font-caption-normal
|
field-item-font-size = font-caption-normal
|
||||||
field-item-content-font-weight = font-weight-medium
|
field-item-after-color = color-text-caption
|
||||||
field-item-icon-color = #ccc
|
field-item-after-font-size = font-body-large
|
||||||
field-item-border-color = color-border-base
|
field-item-border-color = color-border-base
|
||||||
field-item-color-disabled = opacity-disabled
|
|
||||||
field-item-brief-font-size = font-body-normal
|
|
||||||
field-item-brief-color = color-text-caption
|
|
||||||
field-title-plain-color = color-text-body
|
|
||||||
field-title-plain-font-size = font-body-large
|
|
||||||
field-padding-plain-h = h-gap-lg
|
|
||||||
field-padding-plain-v = v-gap-lg
|
|
||||||
field-bg-plain-color = color-bg-base
|
|
||||||
field-item-padding-plain-v = h-gap-md
|
|
||||||
field-item-label-plain-color = color-text-caption
|
|
||||||
field-item-label-plain-font-size = font-body-large
|
|
||||||
field-item-content-plain-color = color-text-body
|
|
||||||
field-item-content-plain-font-size = font-body-large
|
|
||||||
|
|
||||||
// icon
|
// icon
|
||||||
icon-size-xs = 20px
|
icon-size-xs = 20px
|
||||||
|
|
@ -205,6 +194,7 @@ image-viewer-index-bottom = 100px
|
||||||
|
|
||||||
// input-item
|
// input-item
|
||||||
input-item-height = 100px
|
input-item-height = 100px
|
||||||
|
input-item-border-color = color-border-base
|
||||||
input-item-title-width = 170px
|
input-item-title-width = 170px
|
||||||
input-item-title-gap = 22px
|
input-item-title-gap = 22px
|
||||||
input-item-font-size = font-caption-normal
|
input-item-font-size = font-caption-normal
|
||||||
|
|
|
||||||
|
|
@ -105,23 +105,27 @@ tag-small-font-size = var(--tag-small-font-size)
|
||||||
tag-tiny-font-size = var(--tag-tiny-font-size)
|
tag-tiny-font-size = var(--tag-tiny-font-size)
|
||||||
|
|
||||||
// field
|
// field
|
||||||
field-padding = var(--field-padding)
|
|
||||||
field-padding-h = var(--field-padding-h)
|
field-padding-h = var(--field-padding-h)
|
||||||
field-padding-v = var(--field-padding-v)
|
field-padding-v = var(--field-padding-v)
|
||||||
field-title-font-size = var(--field-title-font-size)
|
field-bg-color = var(--field-bg-color)
|
||||||
|
field-header-gap = var(--field-header-gap)
|
||||||
|
field-footer-gap = var(--field-footer-gap)
|
||||||
field-title-color = var(--field-title-color)
|
field-title-color = var(--field-title-color)
|
||||||
|
field-title-font-size = var(--field-title-font-size)
|
||||||
field-title-font-weight = var(--field-title-font-weight)
|
field-title-font-weight = var(--field-title-font-weight)
|
||||||
field-title-margin = var(--field-title-margin)
|
field-describe-color = var(--field-describe-color)
|
||||||
|
field-describe-font-size = var(--field-describe-font-size)
|
||||||
|
field-action-color = var(--field-action-color)
|
||||||
|
field-action-font-size = var(--field-action-font-size)
|
||||||
|
|
||||||
|
// field-item
|
||||||
|
field-item-min-height = var(--field-item-min-height)
|
||||||
field-item-padding-v = var(--field-item-padding-v)
|
field-item-padding-v = var(--field-item-padding-v)
|
||||||
field-item-bg-color = var(--field-item-bg-color)
|
|
||||||
field-item-bg-tap-color = var(--field-item-bg-tap-color)
|
|
||||||
field-item-color = var(--field-item-color)
|
field-item-color = var(--field-item-color)
|
||||||
field-item-font-size = var(--field-item-font-size)
|
field-item-font-size = var(--field-item-font-size)
|
||||||
field-item-icon-color = var(--field-item-icon-color)
|
field-item-after-color = var(--field-item-after-color)
|
||||||
|
field-item-after-font-size = var(--field-item-after-font-size)
|
||||||
field-item-border-color = var(--field-item-border-color)
|
field-item-border-color = var(--field-item-border-color)
|
||||||
field-item-color-disabled = var(--field-item-color-disabled)
|
|
||||||
field-item-brief-font-size = var(--field-item-brief-font-size)
|
|
||||||
field-item-brief-color = var(--field-item-brief-color)
|
|
||||||
|
|
||||||
// input-item
|
// input-item
|
||||||
input-item-height = var(--input-item-height)
|
input-item-height = var(--input-item-height)
|
||||||
|
|
|
||||||
|
|
@ -19,69 +19,43 @@ describe('FieldItem', () => {
|
||||||
expect(wrapper.vm.title).to.equal('field item title')
|
expect(wrapper.vm.title).to.equal('field item title')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('create a simple field-item with brief', () => {
|
it('create a simple field-item with describe', () => {
|
||||||
wrapper = mount(FieldItem, {
|
wrapper = mount(FieldItem, {
|
||||||
propsData: {
|
propsData: {
|
||||||
title: 'field item title',
|
title: 'field item title',
|
||||||
brief: 'field item brief',
|
describe: 'field item describe',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(wrapper.find('.md-field-item-brief').length).to.equal(1)
|
expect(wrapper.find('.md-field-item-describe').length).to.equal(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('create a simple field-item with arrow', () => {
|
it('create a simple field-item with arrow', () => {
|
||||||
wrapper = mount(FieldItem, {
|
wrapper = mount(FieldItem, {
|
||||||
propsData: {
|
propsData: {
|
||||||
title: 'field item title',
|
title: 'field item title',
|
||||||
brief: 'field item brief',
|
describe: 'field item describe',
|
||||||
arrow: 'arrow-right',
|
arrow: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(wrapper.hasClass('has-arrow')).to.be.true
|
expect(wrapper.contains('.md-icon-arrow-right')).to.be.true
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||||
wrapper.trigger('click')
|
wrapper.trigger('click')
|
||||||
expect(eventStub.calledWith('click')).to.be.true
|
expect(eventStub.calledWith('click')).to.be.true
|
||||||
})
|
})
|
||||||
|
|
||||||
it('create a field-item with solid title', () => {
|
|
||||||
wrapper = mount(FieldItem, {
|
|
||||||
propsData: {
|
|
||||||
title: 'field item title',
|
|
||||||
brief: 'field item brief',
|
|
||||||
arrow: 'arrow-right',
|
|
||||||
solid: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(wrapper.find('.solid').length).to.equal(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('create a field-item with customized value align right', () => {
|
|
||||||
wrapper = mount(FieldItem, {
|
|
||||||
propsData: {
|
|
||||||
title: 'field item title',
|
|
||||||
brief: 'field item brief',
|
|
||||||
customized: true,
|
|
||||||
align: 'right',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(wrapper.vm.customized).to.be.true
|
|
||||||
})
|
|
||||||
|
|
||||||
it('create a disabled field-item', () => {
|
it('create a disabled field-item', () => {
|
||||||
wrapper = mount(FieldItem, {
|
wrapper = mount(FieldItem, {
|
||||||
propsData: {
|
propsData: {
|
||||||
title: 'field item title',
|
title: 'field item title',
|
||||||
brief: 'field item brief',
|
describe: 'field item describe',
|
||||||
arrow: 'arrow-right',
|
arrow: true,
|
||||||
disabled: true,
|
disabled: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(wrapper.hasClass('disabled')).to.be.true
|
expect(wrapper.hasClass('is-disabled')).to.be.true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -23,37 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
|
||||||
|Props | Description | Type | Default | Note|
|
|Props | Description | Type | Default | Note|
|
||||||
|----|-----|------|------|------|
|
|----|-----|------|------|------|
|
||||||
|title|title|String|-|-|
|
|title|title|String|-|-|
|
||||||
|
|describe|description|String|-|-|
|
||||||
|
|disabled|disable content operation|Boolean|false|-|
|
||||||
|
|plain|plain style|Boolean|false|-|
|
||||||
|
|
||||||
|
When use `disabled` prop, its descendants can use [inject](https://vuejs.org/v2/api/#provide-inject)to have access of `Field` ancestor.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
name: 'your-component',
|
||||||
|
|
||||||
|
inject: {
|
||||||
|
rootField: {
|
||||||
|
from: 'rootField',
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
disabled() {
|
||||||
|
return this.rootField.disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Field Slots
|
||||||
|
|
||||||
|
##### default
|
||||||
|
default content slot
|
||||||
|
|
||||||
|
##### header
|
||||||
|
header content slot
|
||||||
|
|
||||||
|
##### action
|
||||||
|
header action slot
|
||||||
|
|
||||||
|
##### footer
|
||||||
|
footer content slot
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### FieldItem Props
|
#### FieldItem Props
|
||||||
|Props | Description | Type | Default | Note|
|
|Props | Description | Type | Default | Note|
|
||||||
|----|-----|------|------|------|
|
|----|-----|------|------|------|
|
||||||
|name|name|Number/String|-1|-|
|
|title|title|String|-|-|
|
||||||
|title|title|Number/String|-|-|
|
|describe|description|String|-|-|
|
||||||
|brief|subtitle|String|-|-|
|
|disabled|disable item operation|Boolean|false|-|
|
||||||
|disabled|whether to disable it or not|Boolean|true|-|
|
|arrow|arrow indicator|Boolean|false|-|
|
||||||
|arrow|the name of arrow|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
|
|
||||||
|customized|the content is customized or not|Boolean|have `slot` or not|-|
|
#### FieldItem Events
|
||||||
|align|the position of customized contents|String|left|`left`, `right`, `center`|
|
##### @click(event)
|
||||||
|value|content|String|-|-|
|
click event when not disabled
|
||||||
|solid|the width of title is fixed or not|Boolean|false|-|
|
|
||||||
|
|
||||||
#### FieldItem Slots
|
#### FieldItem Slots
|
||||||
|
|
||||||
##### default
|
##### default
|
||||||
Default slot of content
|
default content slot
|
||||||
|
|
||||||
##### left
|
##### start
|
||||||
Left slot of title <sup class="version-after">1.4.0+</sup>
|
start content slot
|
||||||
|
|
||||||
##### right
|
##### after
|
||||||
Right slot of content <sup class="version-after">1.4.0+</sup>
|
after content slot
|
||||||
|
|
||||||
#### FieldItem Events
|
##### children
|
||||||
|
extra children slot
|
||||||
##### @click(name)
|
|
||||||
|
|
||||||
Click event
|
|
||||||
|
|
||||||
|Props | Description | Type |
|
|
||||||
|----|-----|------|
|
|
||||||
|name|the name of fieldItem|Number/String|
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ title: Field 区域列表组合
|
||||||
preview: https://didi.github.io/mand-mobile/examples/#/field
|
preview: https://didi.github.io/mand-mobile/examples/#/field
|
||||||
---
|
---
|
||||||
|
|
||||||
区域列表垂直排列，显示当前的内容、状态和可进行的操作
|
区域列表垂直排列，显示当前的内容、状态和可进行的操作。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
|
|
@ -23,36 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
|
||||||
|属性 | 说明 | 类型 | 默认值|备注|
|
|属性 | 说明 | 类型 | 默认值|备注|
|
||||||
|----|-----|------|------|------|
|
|----|-----|------|------|------|
|
||||||
|title|标题|String|-|-|
|
|title|标题|String|-|-|
|
||||||
|
|describe|描述内容|String|-|-|
|
||||||
|
|disabled|是否禁用区域|Boolean|false|-|
|
||||||
|
|plain|镂空样式|Boolean|false|-|
|
||||||
|
|
||||||
|
当使用了`disabled`选项时，其后代内容可以通过[inject](https://vuejs.org/v2/api/#provide-inject)的方式获取祖先`Field`的实例属性。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
name: 'your-component',
|
||||||
|
|
||||||
|
inject: {
|
||||||
|
rootField: {
|
||||||
|
from: 'rootField',
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
disabled() {
|
||||||
|
return this.rootField.disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Field Slots
|
||||||
|
|
||||||
|
##### default
|
||||||
|
内容默认插槽
|
||||||
|
|
||||||
|
##### header
|
||||||
|
页眉内容插槽
|
||||||
|
|
||||||
|
##### action
|
||||||
|
页眉操作区域插槽
|
||||||
|
|
||||||
|
##### footer
|
||||||
|
页脚内容插槽
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### FieldItem Props
|
#### FieldItem Props
|
||||||
|属性 | 说明 | 类型 | 默认值 |备注|
|
|属性 | 说明 | 类型 | 默认值|备注|
|
||||||
|----|-----|------|------|------|
|
|----|-----|------|------|------|
|
||||||
|name|标识|Number/String| `-1`|-|
|
|
||||||
|title|标题|String|-|-|
|
|title|标题|String|-|-|
|
||||||
|brief|子标题|String|-|-|
|
|describe|描述内容|String|-|-|
|
||||||
|disabled|是否禁用|Boolean|`true`|-|
|
|disabled|是否禁用项目|Boolean|false|-|
|
||||||
|arrow|箭头名称|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
|
|arrow|动作箭头标识|Boolean|false|-|
|
||||||
|customized|内容是否自定义|Boolean|是否有`slot`|-|
|
|
||||||
|align|自定义内容时，内容位置|String|`left`|`left`, `right`, `center`|
|
#### FieldItem Events
|
||||||
|value|内容|String|-|-|
|
##### @click(event)
|
||||||
|solid|是否固定标题宽度，超出会自动换行|Boolean|`false`|-|
|
非禁用状态下的点击事件
|
||||||
|
|
||||||
#### FieldItem Slots
|
#### FieldItem Slots
|
||||||
|
|
||||||
##### default
|
##### default
|
||||||
内容默认插槽
|
内容默认插槽
|
||||||
|
|
||||||
##### left
|
##### start
|
||||||
标题左侧插槽 <sup class="version-after">1.4.0+</sup>
|
头部区域插槽
|
||||||
|
|
||||||
##### right
|
##### after
|
||||||
内容右侧插槽 <sup class="version-after">1.4.0+</sup>
|
末尾预期插槽
|
||||||
|
|
||||||
#### FieldItem Events
|
##### children
|
||||||
|
额外内容插槽
|
||||||
##### @click(name)
|
|
||||||
点击事件
|
|
||||||
|
|
||||||
|属性 | 说明 | 类型|
|
|
||||||
|----|-----|------|
|
|
||||||
|name|fieldItem标识|Number/String|
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="md-example-child md-example-child-field md-example-child-field-0">
|
<div class="md-example-child md-example-child-field md-example-child-field-0">
|
||||||
<md-field title="区域标题">
|
<md-field title="区域标题" describe="区域描述性文本，可根据具体场景配置">
|
||||||
<div
|
<template slot="action">
|
||||||
class="field-operator"
|
|
||||||
slot="titleValue"
|
|
||||||
@click="onClick('操作')"
|
|
||||||
>
|
|
||||||
操作<md-icon name="arrow-right"></md-icon>
|
操作<md-icon name="arrow-right"></md-icon>
|
||||||
</div>
|
</template>
|
||||||
<div>
|
<p slot="footer">区域页脚区域内容插槽</p>
|
||||||
<md-field-item
|
<md-field-item title="普通条目" />
|
||||||
name="item0"
|
<md-field-item title="动作条目" arrow @click="onClick" />
|
||||||
title="普通条目"
|
<md-field-item title="禁用条目" arrow disabled />
|
||||||
>
|
|
||||||
</md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
name="item1"
|
|
||||||
title="动作条目"
|
|
||||||
arrow="arrow-right"
|
|
||||||
solid
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
name="item2"
|
|
||||||
title="禁用条目"
|
|
||||||
arrow="arrow-right"
|
|
||||||
disabled
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
name="item4"
|
|
||||||
title="标题"
|
|
||||||
brief="展示摘要描述"
|
|
||||||
arrow="arrow-right"
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
|
||||||
</div>
|
|
||||||
</md-field>
|
</md-field>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -44,33 +16,25 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'field-demo',
|
name: 'field-demo',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
[Field.name]: Field,
|
[Field.name]: Field,
|
||||||
[FieldItem.name]: FieldItem,
|
[FieldItem.name]: FieldItem,
|
||||||
[Icon.name]: Icon,
|
[Icon.name]: Icon,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onClick(name) {
|
onClick() {
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
content: `点击了 ${name}`,
|
content: '点击了',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
.md-example-child-field-0
|
|
||||||
.md-field
|
|
||||||
margin-bottom 20px
|
|
||||||
.field-operator
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content flex-end
|
|
||||||
.md-input-item
|
|
||||||
background #FFF
|
|
||||||
padding 0 32px
|
|
||||||
.strong-tip
|
|
||||||
font-size 24px
|
|
||||||
color color-text-highlight
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,82 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="md-example-child md-example-child-field md-example-child-field-1">
|
<div class="md-example-child md-example-child-field md-example-child-field-1">
|
||||||
<md-field
|
<md-field>
|
||||||
title="区域标题"
|
<md-field-item title="滴水贷" arrow />
|
||||||
>
|
<md-field-item title="信用付">
|
||||||
<md-field-item
|
<md-switch slot="after" v-model="open" />
|
||||||
name="item0"
|
|
||||||
title="步进器"
|
|
||||||
align="right">
|
|
||||||
<md-stepper></md-stepper>
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
<md-input-item
|
<md-field-item title="滴水贷" arrow>
|
||||||
name="item1"
|
<span slot="after">可用8000.34</span>
|
||||||
title="输入框"
|
</md-field-item>
|
||||||
placeholder="请输入..."
|
<md-field-item title="信用付">
|
||||||
></md-input-item>
|
<span slot="after">可用8000.35</span>
|
||||||
<md-field-item
|
</md-field-item>
|
||||||
name="item2"
|
<md-field-item title="滴水贷" arrow>
|
||||||
title="开关"
|
<div class="holder" slot="start"></div>
|
||||||
brief="包含子区域"
|
<span slot="after">可用8000.34</span>
|
||||||
align="right">
|
</md-field-item>
|
||||||
<md-switch name="switch0" v-model="switchActive"></md-switch>
|
<md-field-item title="信用付" arrow>
|
||||||
<md-field slot="child" plain>
|
<div class="holder" slot="start"></div>
|
||||||
<div>
|
<span slot="after">可用8000.34</span>
|
||||||
<md-field-item
|
|
||||||
title="企业名称"
|
|
||||||
value="xxxxx"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
title="社会信用代码"
|
|
||||||
value="xxxxx"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
title="单位电话"
|
|
||||||
value="xxxxx"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
</div>
|
|
||||||
</md-field>
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
</md-field>
|
</md-field>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
import {Field, FieldItem, Dialog, InputItem, Stepper, Switch} from 'mand-mobile'
|
<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'field-demo',
|
name: 'field-demo',
|
||||||
/* DELETE */
|
/* DELETE */
|
||||||
title: '配合控件',
|
title: '单行列表',
|
||||||
titleEnUS: 'With control',
|
titleEnUS: 'Simple List',
|
||||||
/* DELETE */
|
/* DELETE */
|
||||||
components: {
|
components: {
|
||||||
[Field.name]: Field,
|
[Field.name]: Field,
|
||||||
[FieldItem.name]: FieldItem,
|
[FieldItem.name]: FieldItem,
|
||||||
[InputItem.name]: InputItem,
|
|
||||||
[Stepper.name]: Stepper,
|
|
||||||
[Switch.name]: Switch,
|
[Switch.name]: Switch,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
switchActive: false,
|
open: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
onClick(name) {
|
|
||||||
Dialog.alert({
|
|
||||||
content: `点击了 ${name}`,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.md-example-child-field-1
|
.holder
|
||||||
.strong-tip
|
display block
|
||||||
font-size 24px
|
width 48px
|
||||||
color color-text-highlight
|
height 48px
|
||||||
|
background-color #E6E6E6
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,77 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="md-example-child md-example-child-field md-example-child-field-2">
|
<div class="md-example-child md-example-child-field md-example-child-field-2">
|
||||||
<md-field>
|
<md-field>
|
||||||
<md-field-item
|
<md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" />
|
||||||
name="item0"
|
<md-field-item title="招商银行(尾号2342)" describe="展示摘要描述">
|
||||||
title="短标题"
|
<md-switch v-model="open" slot="after" />
|
||||||
arrow="arrow-right"
|
|
||||||
value="内容靠左展示"
|
|
||||||
align="left"
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
<md-field-item
|
<md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" arrow>
|
||||||
name="item1"
|
<span slot="after">附加文案</span>
|
||||||
title="标题宽度不固定"
|
|
||||||
arrow="arrow-right"
|
|
||||||
value="内容居中展示"
|
|
||||||
align="center"
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
<md-field-item
|
<md-field-item title="交通银行" describe="展示摘要描述" arrow>
|
||||||
name="item2"
|
<span class="holder" slot="start"></span>
|
||||||
title="标题宽度固定"
|
<span slot="after">附加文案</span>
|
||||||
arrow="arrow-right"
|
|
||||||
value="内容靠右展示"
|
|
||||||
solid
|
|
||||||
align="right"
|
|
||||||
@click="onClick">
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
<md-field-item
|
<md-field-item title="招商银行" describe="展示摘要描述" disabled arrow>
|
||||||
name="item2"
|
<span class="holder" slot="start"></span>
|
||||||
title="左右插槽"
|
<span slot="after">禁用的项目</span>
|
||||||
arrow="arrow-right"
|
</md-field-item>
|
||||||
solid
|
<md-field-item title="建设银行" describe="摘要描述" arrow>
|
||||||
align="right"
|
<p slot="children">
|
||||||
@click="onClick">
|
中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
|
||||||
<div>内容展示</div>
|
</p>
|
||||||
<md-icon name="bank-zs" slot="left"></md-icon>
|
|
||||||
<md-icon name="circle-alert" slot="right"></md-icon>
|
|
||||||
</md-field-item>
|
</md-field-item>
|
||||||
</md-field>
|
</md-field>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
import {Field, FieldItem, Dialog, InputItem, Icon} from 'mand-mobile'
|
<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
|
||||||
import '@examples/assets/images/bank-zs.svg'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'field-demo',
|
name: 'field-demo',
|
||||||
/* DELETE */
|
/* DELETE */
|
||||||
title: '包含内容',
|
title: '多行列表',
|
||||||
titleEnUS: 'With content',
|
titleEnUS: 'Content List',
|
||||||
/* DELETE */
|
/* DELETE */
|
||||||
components: {
|
components: {
|
||||||
[Field.name]: Field,
|
[Field.name]: Field,
|
||||||
[FieldItem.name]: FieldItem,
|
[FieldItem.name]: FieldItem,
|
||||||
[InputItem.name]: InputItem,
|
[Switch.name]: Switch,
|
||||||
[Icon.name]: Icon,
|
|
||||||
},
|
},
|
||||||
methods: {
|
data() {
|
||||||
onClick(name) {
|
return {
|
||||||
Dialog.alert({
|
open: false,
|
||||||
content: `点击了 ${name}`,
|
}
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.md-example-child-field-2
|
.holder
|
||||||
.md-input-item
|
display block
|
||||||
background #FFF
|
width 88px
|
||||||
padding 0 32px
|
height 88px
|
||||||
.strong-tip
|
border-radius 44px
|
||||||
font-size 24px
|
background-color #E6E6E6
|
||||||
color color-text-highlight
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="md-example-child md-example-child-field md-example-child-field-3">
|
|
||||||
<md-field
|
|
||||||
title="收款账户"
|
|
||||||
plain
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="field-title-value"
|
|
||||||
slot="titleValue"
|
|
||||||
>
|
|
||||||
<md-icon name="bank-zs"></md-icon> 招商银行(尾号xxxx)
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<md-field-item
|
|
||||||
title="借款金额"
|
|
||||||
value="￥30,000"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
title="借款期数"
|
|
||||||
value="12期"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
<md-field-item
|
|
||||||
title="正常还款总息"
|
|
||||||
value="￥140.50"
|
|
||||||
align="right"
|
|
||||||
></md-field-item>
|
|
||||||
</div>
|
|
||||||
</md-field>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
import {Field, FieldItem, Icon} from 'mand-mobile'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'field-demo',
|
|
||||||
/* DELETE */
|
|
||||||
title: '纯文列表',
|
|
||||||
titleEnUS: 'Plain text items',
|
|
||||||
/* DELETE */
|
|
||||||
components: {
|
|
||||||
[Field.name]: Field,
|
|
||||||
[FieldItem.name]: FieldItem,
|
|
||||||
[Icon.name]: Icon,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
.md-example-child-field-3
|
|
||||||
.md-field
|
|
||||||
margin-bottom 20px
|
|
||||||
.field-title-value
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content flex-end
|
|
||||||
.md-input-item
|
|
||||||
background #FFF
|
|
||||||
padding 0 32px
|
|
||||||
.strong-tip
|
|
||||||
font-size 24px
|
|
||||||
color color-text-highlight
|
|
||||||
</style>
|
|
||||||
|
|
@ -13,7 +13,5 @@
|
||||||
import Demo0 from './cases/demo0'
|
import Demo0 from './cases/demo0'
|
||||||
import Demo1 from './cases/demo1'
|
import Demo1 from './cases/demo1'
|
||||||
import Demo2 from './cases/demo2'
|
import Demo2 from './cases/demo2'
|
||||||
import Demo3 from './cases/demo3'
|
export default {...createDemoModule('field', [Demo0, Demo1, Demo2])}
|
||||||
|
|
||||||
export default {...createDemoModule('field', [Demo0, Demo1, Demo2, Demo3])}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,25 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="md-field" :class="{'is-plain': plain}">
|
<fieldset class="md-field" :class="{'is-plain': plain, 'is-disabled': disabled}">
|
||||||
<div
|
<header class="md-field-header" v-if="title || describe || $slots.header || $slots.action">
|
||||||
class="md-field-title"
|
<div class="md-field-heading">
|
||||||
v-if="title !== '' || value !== '' "
|
<legend v-if="title" class="md-field-title" v-text="title"></legend>
|
||||||
>
|
<p v-if="describe" class="md-field-describe" v-text="describe"></p>
|
||||||
<div class="md-field-title-inner">
|
<slot name="header"></slot>
|
||||||
<p class="title" v-if="title !== ''">
|
|
||||||
{{title}}
|
|
||||||
</p>
|
|
||||||
<p class="value" v-if="$slots.titleValue">
|
|
||||||
<slot name="titleValue"></slot>
|
|
||||||
</p>
|
|
||||||
<p class="value" v-else-if="value !== ''">
|
|
||||||
{{value}}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="md-field-action">
|
||||||
|
<slot name="action"></slot>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
<div class="md-field-content">
|
<div class="md-field-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<footer class="md-field-footer" v-if="$slots.footer">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</footer>
|
||||||
|
</fieldset>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
export default {
|
<script>
export default {
|
||||||
|
|
@ -30,94 +27,76 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
value: {
|
describe: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
arrow: {
|
disabled: {
|
||||||
type: String,
|
type: Boolean,
|
||||||
default: '',
|
default: false,
|
||||||
},
|
},
|
||||||
plain: {
|
plain: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
rootField: this,
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
.md-field
|
.md-field
|
||||||
|
padding field-padding-v field-padding-h
|
||||||
|
border none
|
||||||
background-color field-bg-color
|
background-color field-bg-color
|
||||||
.md-field-title
|
|
||||||
padding field-padding-v field-padding-h field-title-margin field-padding-h
|
|
||||||
.md-field-title-inner
|
|
||||||
display flex
|
|
||||||
font-size field-title-font-size
|
|
||||||
font-weight field-title-font-weight
|
|
||||||
color field-title-color
|
|
||||||
&>p
|
|
||||||
flex 1
|
|
||||||
&.title
|
|
||||||
text-align left
|
|
||||||
&.value
|
|
||||||
font-size field-title-operator-font-size
|
|
||||||
color field-title-operator-color
|
|
||||||
text-align right
|
|
||||||
.md-field-content
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
.md-field-item,
|
|
||||||
.md-input-item,
|
|
||||||
.md-input-item-brief,
|
|
||||||
.md-input-item-msg,
|
|
||||||
.md-radio
|
|
||||||
padding-left field-padding-h
|
|
||||||
padding-right field-padding-h
|
|
||||||
box-sizing border-box
|
|
||||||
.md-field-item .md-field-item-inner, .md-input-item-container
|
|
||||||
hairline(bottom, field-item-border-color)
|
|
||||||
.md-field-item:last-of-type
|
|
||||||
.md-field-item-inner::before
|
|
||||||
display none
|
|
||||||
// .md-input-item:last-of-type .md-input-item-container::before
|
|
||||||
// display none
|
|
||||||
.md-input-item.is-error .md-input-item-container
|
|
||||||
hairline(bottom, input-item-color-error, 0, 4px)
|
|
||||||
.md-input-item.is-focus .md-input-item-container
|
|
||||||
hairline(bottom, color-text-base, 0, 4px)
|
|
||||||
|
|
||||||
.md-radio .md-radio-item
|
|
||||||
padding-left 0 !important
|
|
||||||
padding-right 0 !important
|
|
||||||
|
|
||||||
&.is-plain
|
&.is-plain
|
||||||
background-color field-bg-plain-color
|
padding 0
|
||||||
.md-field-title
|
background-color transparent
|
||||||
padding field-item-padding-plain-v field-padding-plain-h 0
|
|
||||||
.md-field-title-inner
|
.md-field-header
|
||||||
padding-bottom field-item-padding-plain-v
|
position relative
|
||||||
font-size field-title-plain-font-size
|
display flex
|
||||||
color field-title-plain-color
|
align-items center
|
||||||
hairline(bottom, field-item-border-color)
|
justify-content space-between
|
||||||
.md-field-item
|
margin-bottom field-header-gap
|
||||||
padding-left field-padding-plain-h
|
|
||||||
padding-right field-padding-plain-h
|
.md-field-heading
|
||||||
.md-field-item-inner
|
flex 1 1 0%
|
||||||
margin-bottom field-item-padding-plain-v
|
|
||||||
padding 0
|
.md-field-action
|
||||||
&:before
|
flex-shrink 0
|
||||||
display none
|
display inline-flex
|
||||||
.md-field-item-label
|
align-items center
|
||||||
.md-field-item-title
|
justify-content flex-end
|
||||||
font-size field-item-label-plain-font-size
|
margin-left h-gap-sm
|
||||||
color field-item-label-plain-color
|
color field-action-color
|
||||||
.md-field-item-brief
|
font-size field-action-font-size
|
||||||
display none
|
|
||||||
.md-field-item-content
|
.md-field-title
|
||||||
font-size field-item-content-plain-font-size
|
color field-title-color
|
||||||
font-weight font-weight-normal
|
font-size field-title-font-size
|
||||||
color field-item-content-plain-color
|
font-weight field-title-font-weight
|
||||||
&:first-of-type
|
|
||||||
margin-top field-item-padding-plain-v
|
.md-field-describe
|
||||||
|
color field-describe-color
|
||||||
|
font-size field-describe-font-size
|
||||||
|
line-height 1.4
|
||||||
|
|
||||||
|
.md-field-footer
|
||||||
|
margin-top field-footer-gap
|
||||||
|
|
||||||
|
.md-field
|
||||||
|
&:disabled,
|
||||||
|
&.is-disabled
|
||||||
|
.md-field-title,
|
||||||
|
.md-field-describe,
|
||||||
|
.md-field-action,
|
||||||
|
.md-field-content,
|
||||||
|
.md-field-footer
|
||||||
|
color color-text-disabled
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="md-field-item" :class="{ 'is-disabled': currentDisabled }" @click="$_onClick">
|
||||||
class="md-field-item"
|
<div class="md-field-item-content">
|
||||||
:class="[
|
<div class="md-field-item-start" v-if="$slots.start">
|
||||||
arrow ? 'has-arrow' : '' ,
|
<slot name="start"></slot>
|
||||||
!!$slots.child ? 'has-child' : '' ,
|
|
||||||
disabled ? 'disabled' : '',
|
|
||||||
]"
|
|
||||||
:name="name"
|
|
||||||
@click="$_onItemClick($event, name)">
|
|
||||||
<div class="md-field-item-inner">
|
|
||||||
<!-- Left Control -->
|
|
||||||
<div class="md-field-item-extra" v-if="$slots.left">
|
|
||||||
<slot name="left"></slot>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="md-field-item-inner">
|
||||||
class="md-field-item-label"
|
<p class="md-field-item-title" v-if="title" v-text="title"></p>
|
||||||
:class="[
|
<p class="md-field-item-describe" v-if="describe" v-text="describe"></p>
|
||||||
solid ? 'solid' : ''
|
|
||||||
]">
|
|
||||||
<div class="md-field-item-title" v-html="title"></div>
|
|
||||||
<div class="md-field-item-brief"
|
|
||||||
v-if="brief"
|
|
||||||
v-html="brief"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<!-- Content -->
|
|
||||||
<div
|
|
||||||
v-if="customized"
|
|
||||||
class="md-field-item-content"
|
|
||||||
:class="[align]">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="md-field-item-after" v-if="arrow || $slots.after">
|
||||||
v-else
|
<slot name="after"></slot>
|
||||||
class="md-field-item-content"
|
<md-icon v-if="arrow" name="arrow-right" size="lg" />
|
||||||
:class="[align]">
|
|
||||||
{{value}}
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Right Control -->
|
|
||||||
<div
|
|
||||||
class="md-field-right"
|
|
||||||
v-if="$slots.right"
|
|
||||||
>
|
|
||||||
<slot name="right"></slot>
|
|
||||||
</div>
|
|
||||||
<md-icon
|
|
||||||
v-else-if="arrow"
|
|
||||||
class="md-field-arrow"
|
|
||||||
:name="arrow"
|
|
||||||
size="lg">
|
|
||||||
</md-icon>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="md-field-child" v-if="$slots.child">
|
<div class="md-field-item-children" v-if="$slots.children">
|
||||||
<slot name="child"></slot>
|
<slot name="children"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
import Icon from '../icon'
|
<script>
import Icon from '../icon'
|
||||||
import {isEmptyObject, randomId} from '../_util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'md-field-item',
|
name: 'md-field-item',
|
||||||
|
|
@ -67,60 +29,43 @@ export default {
|
||||||
[Icon.name]: Icon,
|
[Icon.name]: Icon,
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
inject: {
|
||||||
name: {
|
rootField: {
|
||||||
type: Number | String,
|
from: 'rootField',
|
||||||
default() {
|
default: () => ({}),
|
||||||
return randomId('field-item')
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
brief: {
|
describe: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
value: {
|
arrow: {
|
||||||
type: String,
|
type: Boolean,
|
||||||
default: '',
|
default: false,
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
arrow: {
|
},
|
||||||
type: String,
|
|
||||||
default: '',
|
computed: {
|
||||||
},
|
currentDisabled() {
|
||||||
customized: {
|
return this.rootField.disabled || this.disabled
|
||||||
type: Boolean,
|
|
||||||
default() {
|
|
||||||
return !isEmptyObject(this.$slots)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
align: {
|
|
||||||
// left, right, center
|
|
||||||
type: String,
|
|
||||||
default: 'left',
|
|
||||||
validator(value) {
|
|
||||||
return ['left', 'right', 'center'].indexOf(value) > -1
|
|
||||||
},
|
|
||||||
},
|
|
||||||
solid: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// MARK: events handler
|
$_onClick(e) {
|
||||||
$_onItemClick(event, name) {
|
if (!this.currentDisabled) {
|
||||||
if (this.disabled) {
|
this.$emit('click', e)
|
||||||
return
|
|
||||||
}
|
}
|
||||||
this.$emit('click', name)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -128,79 +73,56 @@ export default {
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
.md-field-item
|
.md-field-item
|
||||||
-webkit-tap-highlight-color transparent
|
|
||||||
position relative
|
position relative
|
||||||
|
&:not(:last-child)
|
||||||
|
hairline(bottom, field-item-border-color)
|
||||||
|
|
||||||
|
.md-field-item-content
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
justify-content space-between
|
||||||
|
min-height field-item-min-height
|
||||||
|
padding-top field-item-padding-v
|
||||||
|
padding-bottom field-item-padding-v
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
width 100%
|
|
||||||
&.disabled
|
.md-field-item-start
|
||||||
.md-field-item-inner
|
flex-shrink 0
|
||||||
.md-field-item-label, .md-field-item-content
|
margin-right h-gap-lg
|
||||||
opacity field-item-color-disabled
|
|
||||||
&.has-arrow
|
.md-field-item-inner
|
||||||
.md-field-item-content
|
flex 1 1 0%
|
||||||
padding-right 28px
|
color field-item-color
|
||||||
&::after
|
font-size field-item-font-size
|
||||||
absolute-pos()
|
line-height 1.2
|
||||||
display none
|
|
||||||
content ''
|
.md-field-item-after
|
||||||
position absolute
|
flex-shrink 0
|
||||||
box-sizing border-box
|
margin-left h-gap-sm
|
||||||
background-color field-item-bg-tap-color
|
display inline-flex
|
||||||
&:active::after
|
align-items center
|
||||||
display block
|
justify-content flex-end
|
||||||
&.has-child
|
color field-item-after-color
|
||||||
padding 0 !important
|
font-size field-item-after-font-size
|
||||||
.md-field-item-inner
|
.md-icon-arrow-right
|
||||||
padding field-item-padding-v field-padding-h
|
margin-right -12px
|
||||||
.md-field-child
|
|
||||||
position relative
|
.md-field-item-title
|
||||||
&:before
|
line-height 1.2
|
||||||
content ''
|
|
||||||
position absolute
|
.md-field-item-describe
|
||||||
top -12px
|
color #858B9C
|
||||||
left 10%
|
font-size 24px
|
||||||
border-left solid 12px transparent
|
line-height 1.4
|
||||||
border-right solid 12px transparent
|
margin-top v-gap-sm
|
||||||
border-bottom solid 12px field-bg-plain-color
|
|
||||||
.md-field-item
|
.md-field-item-children
|
||||||
padding-left field-padding-h !important
|
padding-bottom field-item-padding-v
|
||||||
padding-right field-padding-h !important
|
|
||||||
.md-field-item-inner
|
.md-field-item
|
||||||
display flex
|
&.is-disabled
|
||||||
align-items center
|
.md-field-item-inner,
|
||||||
padding field-item-padding-v 0
|
.md-field-item-describe,
|
||||||
.md-field-item-extra
|
.md-field-item-after
|
||||||
display flex
|
color color-text-disabled
|
||||||
margin-right field-item-padding-v
|
|
||||||
.md-field-item-label
|
|
||||||
&.solid
|
|
||||||
width input-item-title-width
|
|
||||||
.md-field-item-title
|
|
||||||
font-size field-item-label-font-size
|
|
||||||
.md-field-item-brief
|
|
||||||
font-size field-item-brief-font-size
|
|
||||||
color field-item-brief-color
|
|
||||||
.md-field-item-content
|
|
||||||
display flex
|
|
||||||
flex-grow 1
|
|
||||||
align-items center
|
|
||||||
color field-item-content-color
|
|
||||||
font-size field-item-content-font-size
|
|
||||||
font-weight field-item-content-font-weight
|
|
||||||
&.left
|
|
||||||
margin-left v-gap-lg
|
|
||||||
&.right
|
|
||||||
justify-content flex-end
|
|
||||||
&.center
|
|
||||||
justify-content center
|
|
||||||
.md-field-arrow
|
|
||||||
position absolute
|
|
||||||
right 28px
|
|
||||||
top 50%
|
|
||||||
transform translate(42px, -50%)
|
|
||||||
color field-item-icon-color
|
|
||||||
.md-field-right
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content center
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue