完成卡片组件
parent
22c45f82a7
commit
b7e9612581
36
Readme.md
36
Readme.md
|
|
@ -13,34 +13,12 @@
|
||||||
+ @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件
|
+ @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 开发进度
|
||||||
|
|
||||||
|
- [x] `wc-card`卡片组件
|
||||||
|
|
||||||
|
|
||||||
### 测试预览
|
### 测试预览
|
||||||
|
|
||||||
可以根目录放置一个http服务的配置文件`.httpserver`, 如下
|
[测试预览](./develop.md)
|
||||||
```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>
|
|
||||||
```
|
|
||||||
|
|
@ -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",
|
"author": "yutent",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@bd/wcui-cli": "^1.0.0"
|
"@bd/wcui-cli": "^1.0.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,11 @@
|
||||||
* @date 2023/03/06 15:17:25
|
* @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 {
|
class Card extends Component {
|
||||||
static props = {
|
static props = {
|
||||||
header: {
|
header: ''
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
|
|
@ -26,30 +23,30 @@ class Card extends Component {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid var(--color-plain-2);
|
border: 1px solid var(--color-plain-2);
|
||||||
border-radius: 3px;
|
border-radius: inherit;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
transition: box-shadow 0.2s ease-in-out;
|
transition: box-shadow 0.2s ease-in-out;
|
||||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
|
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 {
|
.header {
|
||||||
flex: 1;
|
display: flex;
|
||||||
min-height: 64px;
|
align-items: center;
|
||||||
padding: var(--card-padding, 8px 16px);
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
width: 100%;
|
||||||
color: var(--color-dark-1);
|
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,
|
:host([shadow='never']) .card-box,
|
||||||
|
|
@ -64,7 +61,7 @@ class Card extends Component {
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div class="card-box">
|
<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 class="content"><slot /></div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue