31 lines
1.1 KiB
HTML
31 lines
1.1 KiB
HTML
<script props>
|
|
// https://maizzle.com/docs/components/divider
|
|
module.exports = {
|
|
height: props.height || '1px',
|
|
color: props.color, // any CSS color value
|
|
top: props.top, // top margin
|
|
bottom: props.bottom, // bottom margin
|
|
left: props.left, // left margin
|
|
right: props.right, // right margin
|
|
spaceY: props['space-y'] || '24px', // top and bottom margin
|
|
spaceX: props['space-x'], // right and left margin
|
|
hasBgClass: props.class && props.class.split(' ').some(c => c.startsWith('bg-')),
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
role="separator"
|
|
class="{{ (!color && !hasBgClass) && 'bg-slate-300' }}"
|
|
style="height: {{ height }};
|
|
line-height: {{ height }};
|
|
{{ color && `background-color: ${color}` }};
|
|
margin: 0;
|
|
{{ spaceY && `margin-top: ${spaceY}; margin-bottom: ${spaceY}` }};
|
|
{{ spaceX && `margin-left: ${spaceX}; margin-right: ${spaceX}` }};
|
|
{{ top && `margin-top: ${top}` }};
|
|
{{ bottom && `margin-bottom: ${bottom}` }};
|
|
{{ left && `margin-left: ${left}` }};
|
|
{{ right && `margin-right: ${right}` }};
|
|
"
|
|
>‍</div>
|