增加layout组件
parent
70d5172543
commit
95727082ab
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="col"><slot /></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default class Col {
|
||||
props = {
|
||||
gap: ''
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
}
|
||||
|
||||
mounted() {}
|
||||
|
||||
unmounted() {}
|
||||
|
||||
watch() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
// display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 through 24 {
|
||||
:host([span='#{$i}']) {
|
||||
max-width: math.percentage(math.div($i, 24));
|
||||
flex: 0 0 math.percentage(math.div($i, 24));
|
||||
}
|
||||
}
|
||||
|
||||
$gaps: (
|
||||
's': 4px,
|
||||
'm': 8px,
|
||||
'l': 12px,
|
||||
'xl': 16px,
|
||||
'xxl': 20px,
|
||||
'xxxl': 24px,
|
||||
'xxxxl': 28px
|
||||
);
|
||||
@each $k, $v in $gaps {
|
||||
:host([gap='#{$k}']) .col {
|
||||
padding: 0 math.div($v, 2);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="row"><slot /></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './column'
|
||||
|
||||
export default class Row {
|
||||
props = {
|
||||
gap: null
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
}
|
||||
|
||||
_updateChildrenStat() {
|
||||
Array.from(this.children).forEach(it => {
|
||||
if (it.tagName === 'WC-COL') {
|
||||
it.setAttribute('gap', this.props.gap)
|
||||
} else {
|
||||
it.remove()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.__observer = new MutationObserver(_ => {
|
||||
this._updateChildrenStat()
|
||||
})
|
||||
|
||||
this.__observer.observe(this, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
}
|
||||
|
||||
unmounted() {
|
||||
this.__observer.disconnect()
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'gap':
|
||||
this.props.gap = val || ''
|
||||
this._updateChildrenStat()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
$gaps: (
|
||||
's': 4px,
|
||||
'm': 8px,
|
||||
'l': 12px,
|
||||
'xl': 16px,
|
||||
'xxl': 20px,
|
||||
'xxxl': 24px,
|
||||
'xxxxl': 28px
|
||||
);
|
||||
@each $k, $v in $gaps {
|
||||
:host([gap='#{$k}']) .row {
|
||||
margin: 0 math.div(-$v, 2);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -2,60 +2,6 @@
|
|||
<div class="container"><slot /></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
}
|
||||
: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 = {
|
||||
|
@ -77,3 +23,43 @@ export default class Space {
|
|||
watch() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
}
|
||||
:host([vertical]) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
:host([justify]) {
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
$gaps: (
|
||||
's': 4px,
|
||||
'm': 8px,
|
||||
'l': 12px,
|
||||
'xl': 16px,
|
||||
'xxl': 20px,
|
||||
'xxxl': 24px,
|
||||
'xxxxl': 28px
|
||||
);
|
||||
@each $k, $v in $gaps {
|
||||
:host([gap='#{$k}']) {
|
||||
.container {
|
||||
gap: $v;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Reference in New Issue