完成卡片组件
parent
22c45f82a7
commit
b7e9612581
36
Readme.md
36
Readme.md
|
|
@ -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)
|
||||
|
|
@ -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'
|
||||
|
||||
```
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
"author": "yutent",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@bd/wcui-cli": "^1.0.0"
|
||||
"@bd/wcui-cli": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<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>
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue