增加间距组件
parent
c8f99088ff
commit
ba112e1920
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<div class="container"><slot /></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:host([vertical]) {
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([gap='s']) {
|
||||||
|
.container {
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='m']) {
|
||||||
|
.container {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='l']) {
|
||||||
|
.container {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='xl']) {
|
||||||
|
.container {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='xxl']) {
|
||||||
|
.container {
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='xxxl']) {
|
||||||
|
.container {
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([gap='xxxxl']) {
|
||||||
|
.container {
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class Space {
|
||||||
|
props = {
|
||||||
|
gap: 'l'
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
__init__() {
|
||||||
|
/* render */
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {}
|
||||||
|
|
||||||
|
unmounted() {}
|
||||||
|
|
||||||
|
watch() {}
|
||||||
|
}
|
||||||
|
</script>
|
Reference in New Issue