support indeterminate checkbox state
This commit is contained in:
parent
3f5e798de7
commit
ecff6acf2d
3 changed files with 15 additions and 3 deletions
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
|
||||
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
|
||||
<i class="checkbox-indicator" />
|
||||
<span v-if="!!$slots.default"><slot></slot></span>
|
||||
</label>
|
||||
|
@ -12,7 +12,7 @@ export default {
|
|||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: ['checked']
|
||||
props: ['checked', 'indeterminate']
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -57,6 +57,12 @@ export default {
|
|||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
&:indeterminate + .checkbox-indicator::before {
|
||||
content: '–';
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
&:disabled + .checkbox-indicator::before {
|
||||
opacity: .5;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue