File size: 682 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<template>
<div :class="['divider', type]"
:style="{
margin: type === 'horizontal' ? `${margin >= 0 ? margin : 24}px 0` : `0 ${margin >= 0 ? margin : 8}px`
}"
></div>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{
type?: 'horizontal' | 'vertical'
margin?: number
}>(), {
type: 'horizontal',
margin: -1,
})
</script>
<style lang="scss" scoped>
.divider {
&.horizontal {
width: 100%;
margin: 24px 0;
border-block-start: 1px solid rgba(5, 5, 5, .06);
}
&.vertical {
position: relative;
height: 1em;
display: inline-block;
margin: 0 8px;
border-inline-start: 1px solid rgba(5, 5, 5, .06);
}
}
</style> |