diff --git a/CHANGELOG.md b/CHANGELOG.md index 957f0d9..4577419 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,4 +9,5 @@ - add indicator-page-point - add blur - add radio -- add toast \ No newline at end of file +- add toast +- add card \ No newline at end of file diff --git a/src/components/card/README.md b/src/components/card/README.md new file mode 100644 index 0000000..b5ecc1a --- /dev/null +++ b/src/components/card/README.md @@ -0,0 +1,32 @@ +## star-card + +星光 web 组件 --- Card 组件介绍：（2022 年 9 月 02 日） + +star-card 的用途： +用于显示图片、文本等简要信息，帮助用户简单直观地获取卡片所在环境的主要信息，卡片组件具备拆卸、跳转页面等功能。 + +star-card 类型： +1、base +具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。 + +2、linkcard +该类型相比base类型多出点击后跳转相应链接的功能。 + +3、tupianonly +该类型只展现一张正方形图片，用于陈列图片组。 + +star-card 其他属性： +1、image +通过填写图片URL来讲图片展示在卡片上。 + +2、heading +填写卡片标题以表明该卡片的用途。 + +3、subheading +简短描述卡片对应的内容，让用户快速获取卡片重要信息。 + +4、footer +卡片页脚，一般用来填写卡片内容的时间、作者等信息。 + +5、link +用来填写链接卡片的跳转网址。 \ No newline at end of file diff --git a/src/components/card/card-styles.ts b/src/components/card/card-styles.ts new file mode 100644 index 0000000..f81886b --- /dev/null +++ b/src/components/card/card-styles.ts @@ -0,0 +1,113 @@ +import {css, CSSResult} from 'lit' + +export const sharedStyles: CSSResult = css` + :host { + --background-image-url: '' + } + + div { + width:200px; + } + + .card { + background: #FFFFFF; + border-color: #E6E6E6; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + color: #222222; + flex-direction: column; + height: atuo; + min-width: 200px; + position: relative; + text-decoration-color: #222222; + text-decoration-thickness: auto; + unicode-bidi: isolate; + width: 200px; + } + + .base:hover { + background: #E6E6E6; + border-color: #B1B1B1; + } + + .cardhead { + background-image: url(var(--background-image-url)); + align-items: center; + border-bottom-width: 1px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + box-sizing: border-box; + display: flex; + justify-content: center; + overflow-x: hidden; + overflow-y: hidden; + } + + .base-image { + display: block; + object-fit: cover; + width: 198px; + } + + .cardbody { + color: #222222; + display: block; + height: 80px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 0px; + padding-top: 1px; + width: 180px; + } + + .heading { + align-items: baseline; + color: #222222; + display: flex; + height: 18px; + width: 150px; + } + + .subheading { + color: #222222; + display: flex; + height: 14px; + margin-top: 6px; + width: 180px; + } + + .cardfooter { + border-color: #E6E6E6; + border-top-style: solid; + border-top-width: 1px; + display: block; + margin-left: 24px; + margin-right: 24px; + padding-bottom: 10px; + padding-top: 1px; + width: 150px; + } + + .imageonly { + background: #B1B1B1; + border-color: #000000; + border: 10px; + border-style: solid; + border-width: 1px; + border-image-outset: 0; + } + + .imageonly-image { + height: 198px; + border: 1px; + border-radius: 3px; + object-fit: cover; + width: 198px; + } + + .imageonly:hover { + border-color: #E6E6E6; + } +` \ No newline at end of file diff --git a/src/components/card/card.ts b/src/components/card/card.ts new file mode 100644 index 0000000..4a55053 --- /dev/null +++ b/src/components/card/card.ts @@ -0,0 +1,134 @@ +import { + html, + LitElement, + CSSResultArray, + HTMLTemplateResult, + nothing, + } from "lit" + import {customElement, property} from "lit/decorators.js" + import {sharedStyles} from "./card-styles" + + export enum CardType { + BASE = "base", + LINKCARD = "linkcard", + IMAGEONLY = "imageonly", + LABELONLY = "labelonly", + FOOTERDELETED = 'footerdeleted', + } + + // export enum CardSize { + // SMALL = "small", + // MEDIUM = "medium", + // } + + @customElement("star-card") + export class StarCard extends LitElement { + public static override get styles(): CSSResultArray { + return [sharedStyles] + } + + @property({type: String}) type = "base" + // @property({type: String}) size = "medium" + @property({type: String}) heading = "" + @property({type: String}) subheading = "" + @property({type: String}) footer = "" + @property({type: String}) image = "" + @property({type: String}) link = "" + + getBaseCard(): HTMLTemplateResult { + return html` +
+
+ +
+
+

${this.heading}

+

${this.subheading}

+
+
+

${this.footer}

+
+
+ ` + } + + getLinkCard(): HTMLTemplateResult { + return html` + +
+
+ +
+
+

${this.heading}

+

${this.subheading}

+
+
+

${this.footer}

+
+
+ + ` + } + + getLabelOnlyCard(): HTMLTemplateResult { + return html` +
+
+

${this.heading}

+

${this.subheading}

+
+
+

${this.footer}

+
+
+ ` + } + + getImageOnlyCard(): HTMLTemplateResult { + return html` +
+
+ +
+
+ ` + } + getFooterDeletedCard(): HTMLTemplateResult { + return html ` +
+
+ +
+
+

${this.heading}

+

${this.subheading}

+
+
+ ` + } + + render() { + switch (this.type) { + case CardType.BASE: + return this.getBaseCard() + case CardType.LINKCARD: + return this.getLinkCard() + case CardType.IMAGEONLY: + return this.getImageOnlyCard() + case CardType.LABELONLY: + return this.getLabelOnlyCard() + case CardType.FOOTERDELETED: + return this.getFooterDeletedCard() + default: + console.error("unhanled 【star-card】 type") + return nothing + } + } + } + + declare global { + interface HTMLElementTagNameMap { + "star-card": StarCard + } + } \ No newline at end of file diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 333da62..ac5a71c 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -27,6 +27,7 @@ export class StarLi extends LitElement { @property({type: String}) switchcolor = '' @property({type: Boolean}) disabled = false @property({type: Boolean}) checked = false + @property({type: Boolean}) switchicon = false @property({type: String}) size = '' getbase(): HTMLTemplateResult { @@ -232,6 +233,7 @@ export class StarLi extends LitElement { ?checked="${this.checked}" switchcolor=${this.switchcolor} size=${this.size} + ?switchicon="${this.switchicon}" > ` @@ -244,6 +246,7 @@ export class StarLi extends LitElement { ?checked="${this.checked}" switchcolor=${this.switchcolor} size=${this.size} + ?switchicon="${this.switchicon}" > `} diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index f5a4390..8a8687c 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -18,7 +18,7 @@ export const sharedStyles: CSSResult = css` display: inline-block; position: relative; width: 46px; - height: 24px; + height: 25px; border-radius: 30px; background-color: #e9e9e9; } @@ -30,8 +30,8 @@ export const sharedStyles: CSSResult = css` /*使用伪元素生成一个按钮*/ content: ''; display: inline-block; - height: 22px; - width: 22px; + height: 23px; + width: 23px; left: 2px; top: 1px; position: absolute; @@ -46,7 +46,7 @@ export const sharedStyles: CSSResult = css` .base:checked + label::before { /*checkbox选中时按钮的样式*/ transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1); - left: 22px; + left: 21px; } /*Disabled*/ @@ -75,6 +75,17 @@ export const sharedStyles: CSSResult = css` /*checkbox选中时按钮的样式*/ left: 18px; } + :host([size='small'][switchicon]) .iconFalse { + left: 24px; + top: 6px; + width: 6px; + height: 6px; + } + :host([size='small'][switchicon]) .iconTrue { + left: 11px; + top: 6px; + height: 7px; + } /*Large*/ :host([size='large']) label { @@ -92,6 +103,18 @@ export const sharedStyles: CSSResult = css` left: 26px; } + :host([size='large'][switchicon]) .iconFalse { + left: 34px; + top: 8px; + width: 9px; + height: 9px; + } + :host([size='large'][switchicon]) .iconTrue { + top: 9px; + height: 9px; + left: 14px; + } + /*ExtraLarge*/ :host([size='extralarge']) label { width: 62px; @@ -107,4 +130,33 @@ export const sharedStyles: CSSResult = css` /*checkbox选中时按钮的样式*/ left: 30px; } + :host([size='extralarge'][switchicon]) .iconFalse { + left: 39px; + top: 9px; + width: 11px; + height: 11px; + } + :host([size='extralarge'][switchicon]) .iconTrue { + top: 10px; + height: 10px; + left: 16px; + } + + :host([switchicon]) .iconFalse { + position: absolute; + left: 29px; + top: 7px; + width: 8px; + height: 8px; + background-color: #e9e9e9; + border-radius: 50%; + border: 1px solid #b1b1b1; + } + :host([switchicon]) .iconTrue { + position: absolute; + left: 13px; + top: 7px; + height: 8px; + border-left: 1px solid #fff; + } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 58e6ded..07f1bce 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -1,6 +1,7 @@ import {html, LitElement, CSSResultArray} from 'lit' -import {customElement, property} from 'lit/decorators.js' +import {customElement, property, query} from 'lit/decorators.js' import {sharedStyles} from './switch-styles' +// import {classMap} from 'lit/directives/class-map.js' @customElement('star-switch') export class StarSwitch extends LitElement { @@ -9,34 +10,60 @@ export class StarSwitch extends LitElement { return [sharedStyles] } - // @property({type: String}) switchtype = '' + @property({type: Number}) right = 0 + @property({type: Number}) left = 0 + @property({type: Number}) switchx = 0 + @property({type: Number}) x = 0 @property({type: Boolean}) disabled = false @property({type: Boolean}) checked = false @property({type: String}) - get switchColor() { + get switchcolor() { return this._backgoundColor } - - set switchColor(value: string) { + set switchcolor(value: string) { this.style.setProperty('--background-color', value) this._backgoundColor = value } + @query('#switchBall') switchBall!: HTMLLabelElement + @query('#base') base!: HTMLInputElement + render() { return html` + (this.checked = (evt.target as HTMLInputElement).checked)} type="checkbox" class="base" id="base" switchcolor="#0265dc" /> - + ` } + private selectTouchMove(evt: TouchEvent) { + // disabled不允许拖动 + if (!this.disabled) { + let right = this.switchBall.getBoundingClientRect().right + let left = this.switchBall.getBoundingClientRect().left + let switchx = (right - left) / 2 + left + let x = evt.touches[0].clientX + if (x >= switchx) { + this.base.checked = true + // 解决touchmove监测不到checked变化 + this.checked = true + } else { + this.base.checked = false + // 解决touchmove监测不到checked变化 + this.checked = false + } + } + } } - declare global { interface HTMLElementTagNameMap { 'star-switch': StarSwitch diff --git a/src/test/panels/card/card.ts b/src/test/panels/card/card.ts new file mode 100644 index 0000000..30c7b63 --- /dev/null +++ b/src/test/panels/card/card.ts @@ -0,0 +1,85 @@ +import {html, LitElement, CSSResultArray} from "lit" +import {customElement} from "lit/decorators.js" +import {sharedStyles} from "../shared-styles" +import "../../../components/card/card" + +@customElement("panel-card") +export class PanelCard extends LitElement { + render() { + return html ` +
+

基础卡片

+ +
+
+
+
+
+
+

链接卡片

+ +
+
+
+
+
+
+

无图卡片

+ +
+
+
+
+
+
+

无页脚卡片

+ +
+
+
+
+
+
+

只图卡片

+ +
+ ` + } + + public static override get styles(): CSSResultArray { + return [sharedStyles] + } + +} + +declare global { + interface HTMLElementTagNameMap { + "panel-card": PanelCard + } + } \ No newline at end of file diff --git a/src/test/panels/card/image/1.png b/src/test/panels/card/image/1.png new file mode 100644 index 0000000..9a3616b Binary files /dev/null and b/src/test/panels/card/image/1.png differ diff --git a/src/test/panels/card/image/2.jpg b/src/test/panels/card/image/2.jpg new file mode 100644 index 0000000..9eb14d5 Binary files /dev/null and b/src/test/panels/card/image/2.jpg differ diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 60072cf..c522067 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -9,6 +9,7 @@ import '../../components/li/li' import './about/about' import './icon/icon' import './general/general' +import './card/card' import './indicators/indicators' import './blur/use-blur' import './button/button' @@ -161,6 +162,14 @@ export class PanelRoot extends LitElement { href="#blur" >
+ +
+ + +
+ +
+ +
+ +
+ +