2018-03-26 16:04:04 +08:00
|
|
|
<template>
|
2018-09-16 14:05:38 +08:00
|
|
|
<fieldset class="md-field" :class="{'is-plain': plain, 'is-disabled': disabled}">
|
2018-09-20 16:09:24 +08:00
|
|
|
<header class="md-field-header" v-if="title || brief || $slots.header || $slots.action">
|
2018-09-16 14:05:38 +08:00
|
|
|
<div class="md-field-heading">
|
|
|
|
<legend v-if="title" class="md-field-title" v-text="title"></legend>
|
2018-09-20 16:09:24 +08:00
|
|
|
<p v-if="brief" class="md-field-brief" v-text="brief"></p>
|
2018-09-16 14:05:38 +08:00
|
|
|
<slot name="header"></slot>
|
2018-08-16 11:49:38 +08:00
|
|
|
</div>
|
2018-09-16 14:05:38 +08:00
|
|
|
<div class="md-field-action">
|
|
|
|
<slot name="action"></slot>
|
|
|
|
</div>
|
|
|
|
</header>
|
2018-03-26 16:04:04 +08:00
|
|
|
<div class="md-field-content">
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
2018-09-16 14:05:38 +08:00
|
|
|
<footer class="md-field-footer" v-if="$slots.footer">
|
|
|
|
<slot name="footer"></slot>
|
|
|
|
</footer>
|
|
|
|
</fieldset>
|
2018-03-26 16:04:04 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
export default {
|
|
|
|
name: 'md-field',
|
|
|
|
|
|
|
|
props: {
|
|
|
|
title: {
|
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-09-20 16:09:24 +08:00
|
|
|
brief: {
|
2018-08-16 11:49:38 +08:00
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-09-16 14:05:38 +08:00
|
|
|
disabled: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
2018-08-16 11:49:38 +08:00
|
|
|
},
|
|
|
|
plain: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
2018-03-26 16:04:04 +08:00
|
|
|
},
|
2018-09-16 14:05:38 +08:00
|
|
|
|
|
|
|
provide() {
|
|
|
|
return {
|
|
|
|
rootField: this,
|
|
|
|
}
|
|
|
|
},
|
2018-03-26 16:04:04 +08:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="stylus">
|
|
|
|
.md-field
|
2018-09-16 14:05:38 +08:00
|
|
|
padding field-padding-v field-padding-h
|
|
|
|
border none
|
2018-08-16 11:49:38 +08:00
|
|
|
background-color field-bg-color
|
2018-09-16 14:05:38 +08:00
|
|
|
&.is-plain
|
|
|
|
padding 0
|
|
|
|
background-color transparent
|
2018-08-20 15:27:26 +08:00
|
|
|
|
2018-09-16 14:05:38 +08:00
|
|
|
.md-field-header
|
|
|
|
position relative
|
|
|
|
display flex
|
|
|
|
align-items center
|
|
|
|
justify-content space-between
|
|
|
|
margin-bottom field-header-gap
|
2018-03-26 16:04:04 +08:00
|
|
|
|
2018-09-16 14:05:38 +08:00
|
|
|
.md-field-heading
|
|
|
|
flex 1 1 0%
|
|
|
|
|
|
|
|
.md-field-action
|
|
|
|
flex-shrink 0
|
|
|
|
display inline-flex
|
|
|
|
align-items center
|
2018-12-03 19:10:00 +08:00
|
|
|
align-self flex-start
|
2018-09-16 14:05:38 +08:00
|
|
|
justify-content flex-end
|
|
|
|
margin-left h-gap-sm
|
|
|
|
color field-action-color
|
|
|
|
font-size field-action-font-size
|
|
|
|
|
|
|
|
.md-field-title
|
|
|
|
color field-title-color
|
|
|
|
font-size field-title-font-size
|
|
|
|
font-weight field-title-font-weight
|
2018-12-03 19:10:00 +08:00
|
|
|
line-height 1
|
2018-09-16 14:05:38 +08:00
|
|
|
|
2018-09-20 16:09:24 +08:00
|
|
|
.md-field-brief
|
2018-12-04 16:37:26 +08:00
|
|
|
margin-top v-gap-xs
|
2018-09-20 16:09:24 +08:00
|
|
|
color field-brief-color
|
|
|
|
font-size field-brief-font-size
|
2018-09-16 14:05:38 +08:00
|
|
|
line-height 1.4
|
|
|
|
|
|
|
|
.md-field-footer
|
|
|
|
margin-top field-footer-gap
|
|
|
|
|
|
|
|
.md-field
|
|
|
|
&:disabled,
|
|
|
|
&.is-disabled
|
|
|
|
.md-field-title,
|
2018-09-20 16:09:24 +08:00
|
|
|
.md-field-brief,
|
2018-09-16 14:05:38 +08:00
|
|
|
.md-field-action,
|
|
|
|
.md-field-content,
|
|
|
|
.md-field-footer
|
|
|
|
color color-text-disabled
|
2018-03-26 16:04:04 +08:00
|
|
|
</style>
|