From b7e96125813681bfb4b12336a4fc041a3aa29ea1 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 15 Mar 2023 11:27:16 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8D=A1=E7=89=87=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 36 +++++++----------------------------- develop.md | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/card/index.js | 47 ++++++++++++++++++++++------------------------- 4 files changed, 69 insertions(+), 55 deletions(-) create mode 100644 develop.md diff --git a/Readme.md b/Readme.md index d26c9ad..cdb9386 100644 --- a/Readme.md +++ b/Readme.md @@ -13,34 +13,12 @@ + @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件 + +### 开发进度 + +- [x] `wc-card`卡片组件 + + ### 测试预览 -可以根目录放置一个http服务的配置文件`.httpserver`, 如下 -```json -{ - "enabled": true, - "port": 8090 -} -``` - -然后, 创建个html文件, 如下, 即可右键打开预览了. - -```html - - - - - - - - - - - - - - - - - -``` \ No newline at end of file +[测试预览](./develop.md) \ No newline at end of file diff --git a/develop.md b/develop.md new file mode 100644 index 0000000..75eebcb --- /dev/null +++ b/develop.md @@ -0,0 +1,39 @@ + +可以根目录放置一个http服务的配置文件`.httpserver`, 如下 +```json +{ + "enabled": true, + "port": 8090 +} +``` + +然后, 创建个html文件, 如下, 即可右键打开预览了. + +```html + + + + + + + + + + + + + + + + + + + + +``` + +test.js +```js +import '/dist/hello/index.js' + +``` \ No newline at end of file diff --git a/package.json b/package.json index 0f9ea0d..606b0a0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,6 @@ "author": "yutent", "license": "MIT", "devDependencies": { - "@bd/wcui-cli": "^1.0.0" + "@bd/wcui-cli": "^1.0.1" } } diff --git a/src/card/index.js b/src/card/index.js index 7b07b43..98022e0 100644 --- a/src/card/index.js +++ b/src/card/index.js @@ -4,14 +4,11 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component } from '@ninejs/core' +import { css, html, Component } from '@bd/core' class Card extends Component { static props = { - header: { - type: String, - default: '' - } + header: '' } static styles = css` @@ -26,30 +23,30 @@ class Card extends Component { position: relative; width: 100%; border: 1px solid var(--color-plain-2); - border-radius: 3px; + border-radius: inherit; background: #fff; color: var(--color-dark-1); transition: box-shadow 0.2s ease-in-out; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); - } - .card-box .header { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - min-height: 52px; - padding: var(--card-padding, 8px 16px); - border-bottom: 1px solid var(--color-plain-2); - font-size: 16px; - user-select: none; - } - .card-box .content { - flex: 1; - min-height: 64px; - padding: var(--card-padding, 8px 16px); - font-size: 14px; - color: var(--color-dark-1); + .header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + min-height: 52px; + padding: var(--card-padding, 8px 16px); + border-bottom: 1px solid var(--color-plain-2); + font-size: 16px; + user-select: none; + } + .content { + flex: 1; + min-height: 64px; + padding: var(--card-padding, 8px 16px); + font-size: 14px; + color: var(--color-dark-1); + } } :host([shadow='never']) .card-box, @@ -64,7 +61,7 @@ class Card extends Component { render() { return html`
-
${this.header || ''}
+
${this.header || html``}
`