56 lines
921 B
JavaScript
56 lines
921 B
JavaScript
/**
|
|
* {间隔组件}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/03/06 15:17:25
|
|
*/
|
|
|
|
import { css, html, Component } from '@bd/core'
|
|
|
|
class Space extends Component {
|
|
static styles = css`
|
|
: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
|
|
);
|
|
@loop $k, $v in $gaps {
|
|
:host([gap='#{$k}']) {
|
|
.container {
|
|
gap: $v;
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
render() {
|
|
return html`<div class="container"><slot /></div>`
|
|
}
|
|
}
|
|
|
|
Space.reg('space')
|
JavaScript
98.9%
CSS
1.1%