97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
class="md-check-base-box"
|
|
:class="[
|
|
iconPosition,
|
|
{
|
|
'is-disabled': disabled,
|
|
'is-checked': isChecked,
|
|
}
|
|
]"
|
|
>
|
|
<slot></slot>
|
|
<md-tag
|
|
v-if="isChecked"
|
|
size="tiny"
|
|
shape="quarter"
|
|
type="fill"
|
|
>
|
|
<md-icon name="right" size="xs"></md-icon>
|
|
</md-tag>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Tag from '../tag'
|
|
import Icon from '../icon'
|
|
export default {
|
|
name: 'md-check-base-box',
|
|
|
|
components: {
|
|
[Tag.name]: Tag,
|
|
[Icon.name]: Icon,
|
|
},
|
|
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isChecked: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
iconPosition: {
|
|
type: String,
|
|
default: 'rt',
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.md-check-base-box
|
|
position relative
|
|
display inline-block
|
|
text-align center
|
|
color checkbox-color
|
|
font-size checkbox-font-size
|
|
padding v-gap-sm h-gap-md
|
|
border 1px solid checkbox-border-color
|
|
border-radius checkbox-border-radius
|
|
box-sizing border-box
|
|
background-color checkbox-background-color
|
|
overflow hidden
|
|
&.is-checked
|
|
color checkbox-active-color
|
|
border-color checkbox-active-border-color
|
|
background-color checkbox-active-background-color
|
|
font-weight bold
|
|
&.is-disabled
|
|
color checkbox-active-color
|
|
border-color checkbox-active-border-color
|
|
opacity 0.6
|
|
&.is-disabled
|
|
color checkbox-disabled-color
|
|
border-color checkbox-disabled-color
|
|
background-color checkbox-disabled-background-color
|
|
|
|
.md-tag
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
.quarter-bg
|
|
background-color checkbox-active-color
|
|
|
|
&.lt
|
|
.md-tag
|
|
left 0
|
|
.quarter-content
|
|
left -10%
|
|
.quarter-bg
|
|
left -100%
|
|
</style>
|