mand-mobile/components/field/index.vue

106 lines
2.1 KiB
Vue
Raw Normal View History

2018-03-26 16:04:04 +08:00
<template>
<fieldset class="md-field" :class="{'is-plain': plain, 'is-disabled': disabled}">
<header class="md-field-header" v-if="title || brief || $slots.header || $slots.action">
<div class="md-field-heading">
<legend v-if="title" class="md-field-title" v-text="title"></legend>
<p v-if="brief" class="md-field-brief" v-text="brief"></p>
<slot name="header"></slot>
</div>
<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>
<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: '',
},
brief: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false,
},
plain: {
type: Boolean,
default: false,
},
2018-03-26 16:04:04 +08:00
},
provide() {
return {
rootField: this,
}
},
2018-03-26 16:04:04 +08:00
}
</script>
<style lang="stylus">
.md-field
padding field-padding-v field-padding-h
border none
background-color field-bg-color
&.is-plain
padding 0
background-color transparent
.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
.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
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
.md-field-brief
2018-12-04 16:37:26 +08:00
margin-top v-gap-xs
color field-brief-color
font-size field-brief-font-size
line-height 1.4
.md-field-footer
margin-top field-footer-gap
.md-field
&:disabled,
&.is-disabled
.md-field-title,
.md-field-brief,
.md-field-action,
.md-field-content,
.md-field-footer
color color-text-disabled
2018-03-26 16:04:04 +08:00
</style>