bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新core到1.2.2; 并增加space组件

master
yutent 2023-03-15 16:02:34 +08:00
parent 7581c746b2
commit f397d4d9c5
2 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
develop.md
View File

@ -18,7 +18,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/dist/css/reset-basic.css"> <link rel="stylesheet" href="/dist/css/reset-basic.css">
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script> <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script>
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/2.1.5/next.js","@bd/core":"//jscdn.ink/@bd/core/1.2.0/index.js"}}</script> <script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/2.1.5/next.js","@bd/core":"//jscdn.ink/@bd/core/1.2.2/index.js"}}</script>
<style></style> <style></style>
</head> </head>
<body> <body>

55
src/space/index.js Normal file
View File

@ -0,0 +1,55 @@
/**
* {卡片组件}
* @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
);
@each $k, $v in $gaps {
:host([gap='#{$k}']) {
.container {
gap: $v;
}
}
}
`
render() {
return html`<div class="container"><slot /></div>`
}
}
customElements.define('wc-space', Space)