From bdecce6831b7c7e0dffd458df0ef72ae06061fb3 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 6 Mar 2023 15:24:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A4=BA=E4=BE=8B=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 | 15 ++++++++ src/card/index.js | 74 +++++++++++++++++++++++++++++++++++++ src/css/reset-basic.css | 81 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+) create mode 100644 Readme.md create mode 100644 src/card/index.js create mode 100644 src/css/reset-basic.css diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..b91228d --- /dev/null +++ b/Readme.md @@ -0,0 +1,15 @@ +# 9th/wcui +9号UI组件库, 基于web components开发。面向下一代的UI组件库 + + +### 开发环境 + + + vscode 开源编辑器 + - `Prettier`插件, 格式化代码用 + - `string-html-css`, 可高亮显示js中的`html/css`文本, 并支持`emmet` + - `simple http`, 可快速配置http服务器,支持history路由 + - ... + + + @ninejs/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件 + + + @ninejs/cli 开发9号UI组件的构建工具 \ No newline at end of file diff --git a/src/card/index.js b/src/card/index.js new file mode 100644 index 0000000..a6aabb8 --- /dev/null +++ b/src/card/index.js @@ -0,0 +1,74 @@ +/** + * {卡片组件} + * @author yutent + * @date 2023/03/06 15:17:25 + */ + +import { css, html, Component } from '@ninejs/core' + +class Card extends Component { + static props = { + header: { + type: String, + default: '' + } + } + + static styles = css` + :host { + display: flex; + border-radius: 3px; + } + + .card-box { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + border: 1px solid var(--color-plain-2); + border-radius: 3px; + 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); + } + + :host([shadow='never']) .card-box, + :host([shadow='hover']) .card-box { + box-shadow: none; + } + :host([shadow='hover']:hover) .card-box { + box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); + } + ` + + render() { + return html` +
+
${this.header && ''}
+
+
+ ` + } +} + +customElements.define('wc-card', Card) diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css new file mode 100644 index 0000000..db122da --- /dev/null +++ b/src/css/reset-basic.css @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/** + * + * @authors yutent (yutent.io@gmail.com) + * @date 2014-10-10 00:45:09 + * + * CSS规范 + * + * 不能出现大写,以连字符风格命名 + * + * 样式规则的出现顺序 + * 1 display float position overflow z-index 表示定位/布局的属性 + * 2 width height margin padding border 表示盒子模型的属性 + * 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性 + * 4 color background opacity cursor ...表示装饰相关的属性 + * 5 content list-style quotes ... 内容生成相关的属性 + * + */ + +* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;} +::before, ::after {box-sizing: border-box;} +/* HTML5 display-role reset for older browsers */ +article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;} +img {border: 0;display: inline-block;} +ol,ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;} +table {border-collapse: collapse;border-spacing: 0;} +a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;} +::-moz-focus-inner {border: none;outline: none;} + +body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} +code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;} + +.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;} +.noselect img, .noselect a {-webkit-user-drag: none;} +.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} +.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} + +:root { + /* primary */ + --color-teal-a: rgba(72, 201, 176, 0.35); + --color-teal-1: rgb(72, 201, 176); + --color-teal-2: rgb(26, 188, 156); + --color-teal-3: rgb(22, 160, 133); + /* success */ + --color-green-a: rgba(70, 221, 126, 0.35); + --color-green-1: rgb(70, 221, 126); + --color-green-2: rgb(47, 208, 105); + --color-green-3: rgb(26, 196, 88); + /* info */ + --color-blue-a: rgba(100, 181, 246, 0.35); + --color-blue-1: rgb(100, 181, 246); + --color-blue-2: rgb(66, 165, 245); + --color-blue-3: rgb(33, 150, 243); + /* danger */ + --color-red-a: rgba(252, 118, 97, 0.35); + --color-red-1: #fc7661; + --color-red-2: #ff5f45; + --color-red-3: #f33e22; + /* warning */ + --color-orange-a: rgba(254, 174, 117, 0.35); + --color-orange-1: #feae75; + --color-orange-2: #fd964b; + --color-orange-3: #f97316; + /* default1 */ + --color-plain-a: rgba(150, 204, 248, 0.35); + --color-plain-1: rgb(242, 245, 252); + --color-plain-2: rgb(232, 235, 244); + --color-plain-3: rgb(218, 225, 233); + /* default2 */ + --color-grey-a: rgba(206, 214, 224, 0.35); + --color-grey-1: rgb(206, 214, 224); + --color-grey-2: rgb(164, 176, 190); + --color-grey-3: rgb(134, 144, 155); + /* inverse */ + --color-dark-a: rgba(100, 116, 139, 0.35); + --color-dark-1: #64748B; + --color-dark-2: #475569; + --color-dark-3: #2c3441; +}