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

完成卡片组件

master
yutent 2023-03-15 11:27:16 +08:00
parent 22c45f82a7
commit b7e9612581
4 changed files with 69 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Readme.md
View File

@ -13,34 +13,12 @@
+ @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件
### 开发进度
- [x] `wc-card`卡片组件
### 测试预览
可以根目录放置一个http服务的配置文件`.httpserver`, 如下
```json
{
"enabled": true,
"port": 8090
}
```
然后, 创建个html文件, 如下, 即可右键打开预览了.
```html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style></style>
</head>
<body>
<wc-hello></wc-hello>
<script type="module" src="/test.js"></script>
</body>
</html>
```
[测试预览](./develop.md)

39
develop.md Normal file
View File

@ -0,0 +1,39 @@
可以根目录放置一个http服务的配置文件`.httpserver`, 如下
```json
{
"enabled": true,
"port": 8090
}
```
然后, 创建个html文件, 如下, 即可右键打开预览了.
```html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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">
<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>
<style></style>
</head>
<body>
<wc-hello></wc-hello>
<script type="module" src="/test.js"></script>
</body>
</html>
```
test.js
```js
import '/dist/hello/index.js'
```

2
package.json
View File

@ -17,6 +17,6 @@
"author": "yutent",
"license": "MIT",
"devDependencies": {
"@bd/wcui-cli": "^1.0.0"
"@bd/wcui-cli": "^1.0.1"
}
}

19
src/card/index.js
View File

@ -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,13 +23,13 @@ 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 {
.header {
display: flex;
align-items: center;
justify-content: space-between;
@ -43,14 +40,14 @@ class Card extends Component {
font-size: 16px;
user-select: none;
}
.card-box .content {
.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,
:host([shadow='hover']) .card-box {
@ -64,7 +61,7 @@ class Card extends Component {
render() {
return html`
<div class="card-box">
<div class="header">${this.header || '<slot name="header" />'}</div>
<div class="header">${this.header || html`<slot name="header" />`}</div>
<div class="content"><slot /></div>
</div>
`