增加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>
|
<div class="container"><slot /></div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
export default class Space {
|
export default class Space {
|
||||||
props = {
|
props = {
|
||||||
|
@ -77,3 +23,43 @@ export default class Space {
|
||||||
watch() {}
|
watch() {}
|
||||||
}
|
}
|
||||||
</script>
|
</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