增加间距组件
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