This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加间距组件

old
yutent 2023-02-28 16:24:03 +08:00
parent c8f99088ff
commit ba112e1920
1 changed files with 78 additions and 0 deletions

78
src/space/index.wc Normal file
View File

@ -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>