From f397d4d9c5aa2504dd837f146b6a9c5c9b8ffacd Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 15 Mar 2023 16:02:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0core=E5=88=B01.2.2;=20?= =?UTF-8?q?=E5=B9=B6=E5=A2=9E=E5=8A=A0space=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- develop.md | 2 +- src/space/index.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/space/index.js diff --git a/develop.md b/develop.md index 75eebcb..a1d7b0d 100644 --- a/develop.md +++ b/develop.md @@ -18,7 +18,7 @@ - + diff --git a/src/space/index.js b/src/space/index.js new file mode 100644 index 0000000..31097fc --- /dev/null +++ b/src/space/index.js @@ -0,0 +1,55 @@ +/** + * {卡片组件} + * @author yutent + * @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 + ); + @each $k, $v in $gaps { + :host([gap='#{$k}']) { + .container { + gap: $v; + } + } + } + ` + + render() { + return html`
` + } +} + +customElements.define('wc-space', Space)