<template>
<div class="v-optgroup" :class="{ 'is-disabled': group.disabled }" :style="{ 'padding-left': `${12 * group.state.depth}px` }">
<div class="label" v-html="group.label"></div>
</div>
</template>
<script type="text/javascript">
import VOption from './option.vue'
export default {
name: 'VOptgroup',
props: {
group: {
type: Object,
required: true
}
}
}
</script>
<style lang="scss" scoped>
.v-optgroup {
&.is-disabled {
opacity: .7;
}
}
.label {
white-space: nowrap;
user-select: none;
pointer-events: none;
font-size: 14px;
font-weight: bold;
padding: 8px 12px;
}
.options {
display: block;
}
</style>
|