From 026fc2c60cfcac46311b169a0835b037aae49ab6 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Wed, 24 Aug 2022 14:47:32 +0800 Subject: [PATCH 1/5] add star-blur component --- CHANGELOG.md | 10 ++++ index.html | 23 ++++++++- package.json | 2 +- src/components/blur/blur.ts | 69 +++++++++++++++++++++++++++ src/test/panels/blur/use-blur.ts | 80 ++++++++++++++++++++++++++++++++ src/test/panels/root.ts | 5 +- 6 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 src/components/blur/blur.ts create mode 100644 src/test/panels/blur/use-blur.ts diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..ea08370 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,10 @@ +# 0.0.1 + +## Features + +- add ul +- add li +- add button +- add bubble +- add indicator-page-point +- add blur \ No newline at end of file diff --git a/index.html b/index.html index 36261d2..2490e1b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + Star Web Components @@ -38,6 +41,24 @@ --li-base-height: 43px; --li-left-padding: 10px; --li-right-padding: 10px; + --blur-image: ''; + --blur-radius-factor: 20; + --blur-radius: calc(1px * var(--blur-radius-factor)); + --blur-scale-base-factor: 1.05; + --blur-scale-factor: calc( + var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) * + 0.0025 + ); + } + + /* for nanopcT4 */ + @media (max-width: 500px) { + :root { + --blur-radius-factor: 5; + --blur-scale-factor: calc( + var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005 + ); + } } diff --git a/package.json b/package.json index 5e00d33..8d45756 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "start-element", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "main": "dist/my-element.es.js", "exports": { diff --git a/src/components/blur/blur.ts b/src/components/blur/blur.ts new file mode 100644 index 0000000..0877b28 --- /dev/null +++ b/src/components/blur/blur.ts @@ -0,0 +1,69 @@ +import {html, css, LitElement} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {classMap} from 'lit/directives/class-map.js' + +@customElement('star-blur') +export class StarBlur extends LitElement { + @property({type: Boolean}) openblur = false + @property({type: String}) imagesrc = '' + + attributeChangedCallback(name: string, _old: string | null, value: string | null): void { + super.attributeChangedCallback(name, _old, value) + + if (name === 'imagesrc') { + if (!this.imagesrc) console.error('StarBlur has no imagesrc') + document.documentElement.style.setProperty('--blur-image', this.imagesrc) + } + } + + render() { + const styles = { + blur: this.openblur, + } + + return html` +
+ ` + } + + static styles = css` + :host { + position: absolute; + width: 100vw; + height: 100vh; + left: 0; + top: 0; + overflow: hidden; + } + #blur-mask { + position: absolute; + width: inherit; + height: inherit; + background: no-repeat center fixed; + background-size: cover; + background-image: var(--blur-image); + transform: scale(var(--blur-scale-factor)); + } + #blur-mask.blur { + filter: blur(var(--blur-radius)); + } + #blur-mask::before { + position: absolute; + content: ' '; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: no-repeat center fixed; + background-size: cover; + background-image: var(--blur-image); + transform: scale(1 / var(--blur-scale-factor)); + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'star-blur': StarBlur + } +} diff --git a/src/test/panels/blur/use-blur.ts b/src/test/panels/blur/use-blur.ts new file mode 100644 index 0000000..92174ba --- /dev/null +++ b/src/test/panels/blur/use-blur.ts @@ -0,0 +1,80 @@ +import {html, css, LitElement, TemplateResult} from 'lit' +import {customElement, state} from 'lit/decorators.js' +import '../../../components/blur/blur' + +@customElement('panel-blur') +export class PanelBlur extends LitElement { + @state() openblur = false + + @state() backgroundImage = '' + + handleInputFile(evt: Event) { + const imgfile = (evt.target as HTMLInputElement).files?.[0] + if (imgfile) { + this.backgroundImage = `url(${URL.createObjectURL(imgfile)})` + } + } + + handleInputRange(evt: Event) { + document.documentElement.style.setProperty( + '--blur-radius-factor', + (evt.target as HTMLInputElement).value + ) + } + + dynamicInput(): TemplateResult { + const mql = [window.matchMedia('(max-width: 500px)')] + if (mql[0].matches) { + return html` + + ` + } else { + return html` + + ` + } + } + + render() { + return html` +
+ + + ${this.dynamicInput()} +
+ + ` + } + + static styles = css` + div { + position: absolute; + z-index: 1; + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-blur': PanelBlur + } +} diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index af7abee..00a9607 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -10,6 +10,7 @@ import './about/about' import './icon/icon' import './general/general' import './indicators/indicators' +import './blur/use-blur' type SEID = String @@ -117,10 +118,10 @@ export class PanelRoot extends LitElement {
Date: Tue, 23 Aug 2022 11:04:39 +0800 Subject: [PATCH 2/5] =?UTF-8?q?TASK:=20#105399=20StarWebComponents?= =?UTF-8?q?=E5=BC=80=E5=8F=91-switch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/switch/switch-styles.ts | 168 +++++++++++++++++++++++++ src/components/switch/switch.ts | 52 ++++++++ src/index.ts | 1 + src/test/panels/root.ts | 9 ++ src/test/panels/switch-styles.ts | 25 ++++ src/test/panels/switch/switch.ts | 80 ++++++++++++ 6 files changed, 335 insertions(+) create mode 100644 src/components/switch/switch-styles.ts create mode 100755 src/components/switch/switch.ts create mode 100644 src/test/panels/switch-styles.ts create mode 100644 src/test/panels/switch/switch.ts diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts new file mode 100644 index 0000000..f8b361c --- /dev/null +++ b/src/components/switch/switch-styles.ts @@ -0,0 +1,168 @@ +import {css, CSSResult} from 'lit' + +export const sharedStyles: CSSResult = css` + /*Standard*/ + .base { + display: none; /*隐藏表单元素*/ + } + .base + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + display: inline-block; + position: relative; + transition: all 0.3s; + width: 46px; + height: 21px; + border: 1px solid #d5d5d5; + border-radius: 15px; + background-color: #d5d5d5; + cursor: pointer; + user-select: none; + } + .base:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #222222; + } + .base + label::before { + /*使用伪元素生成一个按钮*/ + content: ''; + display: inline-block; + height: 17px; + width: 17px; + left: -1px; + top: 0px; + position: absolute; + border-style: solid; + border-color: #464646; + border-width: 2px; + border-radius: 25px; + background-color: #fff; + transition: all 0.3s; + } + .base:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 25px; + transition: all 0.2s linear; + border-color: #222222; + } + + /*Emphasized*/ + .emphasized:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: blue; + } + .emphasized:checked + label::before { + border-color: blue; + } + + /*Selected*/ + .selected + label { + background-color: #222222; + } + .selected:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #d5d5d5; + } + .selected + label::before { + /*使用伪元素生成一个按钮*/ + left: 25px; + border-color: #222222; + } + .selected:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: -1px; + border-color: #464646; + } + + /*Disabled*/ + .disabled + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + border: 1px solid #ccc; + background-color: #ccc; + } + .disabled + label::before { + /*使用伪元素生成一个按钮*/ + border-color: #b1b1b1; + } + + /*DisabledSelected*/ + .disabledSelected label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + border: 1px solid #d5d5d5; + background-color: #b1b1b1; + } + .disabledSelected + label::before { + /*使用伪元素生成一个按钮*/ + left: 25px; + border-color: #b1b1b1; + background-color: #fff; + } + + /*ReadOnly*/ + + /*Small*/ + .small + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + width: 36px; + height: 18px; + } + .small + label::before { + /*使用伪元素生成一个按钮*/ + height: 14px; + width: 14px; + } + .small:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 18px; + } + + /*Large*/ + .large + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + width: 56px; + height: 26px; + } + .large + label::before { + /*使用伪元素生成一个按钮*/ + height: 22px; + width: 22px; + } + .large:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 30px; + } + + /*ExtraLarge*/ + .extraLarge + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + width: 66px; + height: 31px; + } + .extraLarge + label::before { + /*使用伪元素生成一个按钮*/ + height: 27px; + width: 27px; + } + .extraLarge:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 35px; + } + + .emphasizedSelected + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + background-color: blue; + } + .emphasizedSelected:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #d5d5d5; + } + .emphasizedSelected + label::before { + /*使用伪元素生成一个按钮*/ + left: 25px; + border-color: blue; + } + .emphasizedSelected:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: -1px; + border-color: #464646; + } +` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts new file mode 100755 index 0000000..d282f5f --- /dev/null +++ b/src/components/switch/switch.ts @@ -0,0 +1,52 @@ +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, query} from 'lit/decorators.js' +import {sharedStyles} from './switch-styles' + +export enum SwitchType { + BASE = 'base', + EMPHASIZED = 'emphasized', + SELECTED = 'selected', + DISABLED = 'disabled', + READONLY = 'readOnly', + SMALL = 'small', + LARGE = 'large', + EXTRALARGE = 'extralarge', +} + +@customElement('star-switch') +export class StarSwitch extends LitElement { + public static override get styles(): CSSResultArray { + return [sharedStyles] + } + + @property({type: SwitchType}) type = '' + @property({type: String}) text = '' + @property({type: Boolean}) checked = false + @property({type: Boolean, reflect: true}) base = true + @property({type: Boolean, reflect: true}) emphasized = true + @property({type: Boolean, reflect: true}) selected = false + @property({type: Boolean, reflect: true}) disabled = false + @property({type: Boolean, reflect: true}) small = false + @property({type: Boolean, reflect: true}) large = false + @property({type: Boolean, reflect: true}) extraLarge = false + + // ?disabled="${!this.checked}" + + render() { + return html` +
+ + +
+ ` + } + @query('input') switch!: HTMLElement +} + +declare global { + interface HTMLElementTagNameMap { + 'star-switch': StarSwitch + } +} diff --git a/src/index.ts b/src/index.ts index fa6ee2d..a748f37 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,7 @@ import {html, css, LitElement} from 'lit' import {customElement, query, state} from 'lit/decorators.js' import './components/ul/ul' import './components/li/li' +import './components/switch/switch' import './components/section/section' import {StarAnimateSection} from './components/section/section' diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 3d99106..764feee 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -4,6 +4,7 @@ import {LiType} from '../../components/li/li' import {UlType} from '../../components/ul/ul' import {sharedStyles} from './shared-styles' import './about/about' +import './switch/switch' import './icon/icon' import './general/general' import './indicators/indicators' @@ -96,6 +97,14 @@ export class PanelRoot extends LitElement { href="#general" >
+ +
+

Standard

+ + + +
+

Emphasized

+ + +
+
+

Size 四种大小类型，默认switch大小为Midium

+ + + +
+ + + + +
+ + + + +
+ + + +
+
+

Disabled

+ + +
+
+

Read-Only

+ +
+ ` + } + public static override get styles(): CSSResultArray { + return [switchStyles] + } +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-switch': PanelSwitch + } +} From 783db3ca0f601dcc09668307bacac66b5b0956e7 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Thu, 25 Aug 2022 20:51:47 +0800 Subject: [PATCH 3/5] =?UTF-8?q?TASK:=20#105399=20switch=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/li/li.ts | 53 ++++++++ src/components/switch/switch-styles.ts | 174 +++++++++++++++--------- src/components/switch/switch.ts | 25 +--- src/test/panels/switch/switch.ts | 179 +++++++++++++++++-------- 4 files changed, 288 insertions(+), 143 deletions(-) diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 7c69b08..3bf175b 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -1,6 +1,7 @@ import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' import {customElement, property} from 'lit/decorators.js' import '../bubble/bubble' +import '../switch/switch' export enum LiType { BASE = 'base', @@ -10,6 +11,7 @@ export enum LiType { ONLY_EDIT = 'only-edit', ONLY_LABEL = 'only-label', ONLY_READ = 'only-read', + SWITCH_LABEL = 'switch-label', } @customElement('star-li') @@ -22,6 +24,8 @@ export class StarLi extends LitElement { @property({type: String}) icon = '' @property({type: String}) iconcolor = '' @property({type: Number}) bubble = 0 + @property({type: String}) switchtype = '' + @property({type: Boolean}) disabled = false getbase(): HTMLTemplateResult { return html` @@ -194,6 +198,53 @@ export class StarLi extends LitElement { ` } + getswitchlabel(): HTMLTemplateResult | typeof nothing { + if (!this.label) { + console.error('【star-ul】【switchlabel】缺少 label 参数') + return nothing + } + + const classes = `${this.href ? 'hashref' : ''} ${ + this.icon ? 'hasicon' : '' + }` + const colorstyle = this.iconcolor + ? html` + + ` + : nothing + + return html` +
  • + ${this.href + ? html` + + ${colorstyle} + ${this.label} + + + ` + : html` + + ${colorstyle} + ${this.label} + + + `} +
    • + ` + } render() { switch (this.type) { @@ -211,6 +262,8 @@ export class StarLi extends LitElement { return this.getonlylabel() case LiType.ONLY_READ: return this.getonlyread() + case LiType.SWITCH_LABEL: + return this.getswitchlabel() default: console.error('unhanled 【star-li】 type') return nothing diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index 7ab5fc1..e822df8 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -11,11 +11,10 @@ export const sharedStyles: CSSResult = css` position: relative; transition: all 0.3s; width: 46px; - height: 21px; - border: 1px solid #d5d5d5; - border-radius: 15px; - background-color: #d5d5d5; - cursor: pointer; + height: 24px; + line-height: 24px; + border-radius: 30px; + background-color: #e9e9e9; user-select: none; } .base:checked + label { @@ -26,32 +25,48 @@ export const sharedStyles: CSSResult = css` /*使用伪元素生成一个按钮*/ content: ''; display: inline-block; - height: 17px; - width: 17px; - left: -1px; - top: 0px; + height: 22px; + width: 22px; + left: 2px; + top: 1px; position: absolute; - border-style: solid; - border-color: #464646; - border-width: 2px; - border-radius: 25px; + border-radius: 20px; background-color: #fff; transition: all 0.3s; + box-shadow: 0.5px 0.5px 0.5px 0.5px #888888; } .base:checked + label::before { /*checkbox选中时按钮的样式*/ - left: 25px; + left: 22px; transition: all 0.2s linear; border-color: #222222; } - /*Emphasized*/ - .emphasized:checked + label { + /*blue*/ + .blue:checked + label { /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: blue; + background-color: #0265dc; } - .emphasized:checked + label::before { - border-color: blue; + .blue:checked + label::before { + border-color: #0265dc; + } + + /*Green*/ + .green:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #4cd964; + } + .green:checked + label::before { + border-color: #4cd964; + } + + /*Red*/ + .red:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #ff3b30; + } + .red:checked + label::before { + border-color: #ff3b30; } /*Selected*/ @@ -60,55 +75,44 @@ export const sharedStyles: CSSResult = css` } .selected:checked + label { /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #d5d5d5; + background-color: #e9e9e9; } .selected + label::before { /*使用伪元素生成一个按钮*/ - left: 25px; - border-color: #222222; + left: 48%; } .selected:checked + label::before { /*checkbox选中时按钮的样式*/ - left: -1px; - border-color: #464646; + left: 4%; } /*Disabled*/ .disabled + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - border: 1px solid #ccc; - background-color: #ccc; - } - .disabled + label::before { - /*使用伪元素生成一个按钮*/ - border-color: #b1b1b1; + background-color: #b1b1b1; } /*DisabledSelected*/ - .disabledSelected label { + .disabledselected + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - border: 1px solid #d5d5d5; background-color: #b1b1b1; } - .disabledSelected + label::before { + .disabledselected + label::before { /*使用伪元素生成一个按钮*/ - left: 25px; - border-color: #b1b1b1; - background-color: #fff; + left: 22px; } - /*ReadOnly*/ - /*Small*/ .small + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - width: 36px; - height: 18px; + width: 38px; + height: 20px; + line-height: 20px; } .small + label::before { /*使用伪元素生成一个按钮*/ - height: 14px; - width: 14px; + height: 18px; + width: 18px; } .small:checked + label::before { /*checkbox选中时按钮的样式*/ @@ -118,52 +122,89 @@ export const sharedStyles: CSSResult = css` /*Large*/ .large + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - width: 56px; - height: 26px; + width: 54px; + height: 28px; + line-height: 28px; } .large + label::before { /*使用伪元素生成一个按钮*/ - height: 22px; - width: 22px; + height: 26px; + width: 26px; } .large:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 26px; + } + + /*ExtraLarge*/ + .extralarge + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + width: 62px; + height: 32px; + line-height: 32px; + } + .extralarge + label::before { + /*使用伪元素生成一个按钮*/ + height: 30px; + width: 30px; + } + .extralarge:checked + label::before { /*checkbox选中时按钮的样式*/ left: 30px; } - /*ExtraLarge*/ - .extraLarge + label { + /*blue selected*/ + .blueselected + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - width: 66px; - height: 31px; + background-color: #0265dc; } - .extraLarge + label::before { + .blueselected:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #e9e9e9; + } + .blueselected + label::before { /*使用伪元素生成一个按钮*/ - height: 27px; - width: 27px; + left: 22px; } - .extraLarge:checked + label::before { + .blueselected:checked + label::before { /*checkbox选中时按钮的样式*/ - left: 35px; + left: 2px; } - /*emphasized selected*/ - .emphasizedSelected + label { + /*red selected*/ + .redselected + label { /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: blue; + background-color: #ff3b30; } - .emphasizedSelected:checked + label { + .redselected:checked + label { /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #d5d5d5; + background-color: #e9e9e9; } - .emphasizedSelected + label::before { + .redselected + label::before { /*使用伪元素生成一个按钮*/ - left: 25px; - border-color: blue; + left: 22px; } - .emphasizedSelected:checked + label::before { + .redselected:checked + label::before { /*checkbox选中时按钮的样式*/ - left: -1px; + left: 2px; + } + + /*green selected*/ + .greenselected + label { + /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + background-color: #4cd964; + } + .greenselected:checked + label { + /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ + background-color: #e9e9e9; + } + .greenselected + label::before { + /*使用伪元素生成一个按钮*/ + left: 22px; + } + .greenselected:checked + label::before { + /*checkbox选中时按钮的样式*/ + left: 2px; border-color: #464646; } @@ -178,7 +219,6 @@ export const sharedStyles: CSSResult = css` } .disabledSelected + label::before { /*使用伪元素生成一个按钮*/ - left: 25px; - border-color: #b1b1b1; + left: 22px; } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index b595690..54e973f 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -1,34 +1,16 @@ import {html, LitElement, CSSResultArray} from 'lit' -import {customElement, property, query} from 'lit/decorators.js' +import {customElement, property} from 'lit/decorators.js' import {sharedStyles} from './switch-styles' -export enum SwitchType { - BASE = 'base', - EMPHASIZED = 'emphasized', - SELECTED = 'selected', - DISABLED = 'disabled', - SMALL = 'small', - LARGE = 'large', - EXTRALARGE = 'extralarge', - // READONLY = 'readOnly', -} - @customElement('star-switch') export class StarSwitch extends LitElement { public static override get styles(): CSSResultArray { return [sharedStyles] } - @property({type: SwitchType}) type = '' + @property({type: String}) switchtype = '' @property({type: String}) text = '' @property({type: Boolean}) disabled = false - // @property({type: Boolean, reflect: true}) base = true - // @property({type: Boolean, reflect: true}) emphasized = true - // @property({type: Boolean, reflect: true}) selected = false - // // @property({type: Boolean, reflect: true}) disabled = false - // @property({type: Boolean, reflect: true}) small = false - // @property({type: Boolean, reflect: true}) large = false - // @property({type: Boolean, reflect: true}) extraLarge = false render() { return html` @@ -37,7 +19,7 @@ export class StarSwitch extends LitElement { ?disabled="${this.disabled}" type="checkbox" class="base - ${this.type}" + ${this.switchtype}" id="base" />     +
    + +
    + ` } public static override get styles(): CSSResultArray { - return [switchStyles] + return [sharedStyles] } } From 528e310c99c6f5ca3fefada1b0db82d91bc90b94 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Sat, 27 Aug 2022 17:11:14 +0800 Subject: [PATCH 4/5] =?UTF-8?q?TASK:=20#105399=20switch=E6=89=80=E6=9C=89?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=AE=9E=E7=8E=B0=E4=BA=86=E6=BF=80=E6=B4=BB?= =?UTF-8?q?=E6=95=88=E6=9E=9C=E3=80=81=E5=9B=9E=E5=BC=B9=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/switch/switch-styles.ts | 134 +++++++++++++++++++++---- src/components/switch/switch.ts | 4 +- 2 files changed, 113 insertions(+), 25 deletions(-) diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index e822df8..61023cf 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -9,7 +9,6 @@ export const sharedStyles: CSSResult = css` /*+选择器选择紧跟“+”左边选择器的第一个元素*/ display: inline-block; position: relative; - transition: all 0.3s; width: 46px; height: 24px; line-height: 24px; @@ -32,14 +31,48 @@ export const sharedStyles: CSSResult = css` position: absolute; border-radius: 20px; background-color: #fff; - transition: all 0.3s; - box-shadow: 0.5px 0.5px 0.5px 0.5px #888888; + transition: all 0.2s; + box-shadow: 0.5px 0px 3px 0.1px #888888; + animation-name: bbb; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; + } + .base + label:active::before { + border-color: #222222; + transform: scale(1.05, 1.05); } .base:checked + label::before { /*checkbox选中时按钮的样式*/ + animation-name: aaa; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 22px; - transition: all 0.2s linear; - border-color: #222222; + } + @keyframes aaa { + 0% { + width: 47.8%; + } + 80% { + width: 46%; + left: 50%; + } + 100% { + width: 47.8%; + left: 47.8%; + } + } + @keyframes bbb { + 0% { + width: 47.8%; + } + 80% { + width: 46%; + } + 100% { + width: 47.8%; + } } /*blue*/ @@ -79,11 +112,46 @@ export const sharedStyles: CSSResult = css` } .selected + label::before { /*使用伪元素生成一个按钮*/ - left: 48%; + animation-name: selectedright; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; + left: 22px; } .selected:checked + label::before { /*checkbox选中时按钮的样式*/ - left: 4%; + animation-name: selectedleft; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; + left: 2px; + } + .selected + label:active::before { + transform: scale(1.05, 1.05); + } + @keyframes selectedleft { + 0% { + width: 47.8%; + } + 80% { + width: 46%; + } + 100% { + width: 47.8%; + } + } + @keyframes selectedright { + 0% { + width: 47.8%; + } + 80% { + width: 46%; + left: 23px; + } + 100% { + width: 47.8%; + left: 22px; + } } /*Disabled*/ @@ -91,6 +159,13 @@ export const sharedStyles: CSSResult = css` /*+选择器选择紧跟“+”左边选择器的第一个元素*/ background-color: #b1b1b1; } + .disabled + label::before { + background-color: #f0f0f0; + } + .disabled + label:active::before { + width: 22px; + transform: scale(1, 1); + } /*DisabledSelected*/ .disabledselected + label { @@ -100,6 +175,12 @@ export const sharedStyles: CSSResult = css` .disabledselected + label::before { /*使用伪元素生成一个按钮*/ left: 22px; + background-color: #f0f0f0; + } + .disabledselected + label:active::before { + /*激活按钮后*/ + width: 22px; + transform: scale(1, 1); } /*Small*/ @@ -164,10 +245,18 @@ export const sharedStyles: CSSResult = css` } .blueselected + label::before { /*使用伪元素生成一个按钮*/ + animation-name: selectedright; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 22px; } .blueselected:checked + label::before { /*checkbox选中时按钮的样式*/ + animation-name: selectedleft; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 2px; } @@ -182,10 +271,18 @@ export const sharedStyles: CSSResult = css` } .redselected + label::before { /*使用伪元素生成一个按钮*/ + animation-name: selectedright; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 22px; } .redselected:checked + label::before { /*checkbox选中时按钮的样式*/ + animation-name: selectedleft; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 2px; } @@ -200,25 +297,18 @@ export const sharedStyles: CSSResult = css` } .greenselected + label::before { /*使用伪元素生成一个按钮*/ + animation-name: selectedright; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 22px; } .greenselected:checked + label::before { /*checkbox选中时按钮的样式*/ + animation-name: selectedleft; + animation-duration: 0.25s; + animation-timing-function: ease; + animation-delay: 0.1s; left: 2px; - border-color: #464646; - } - - /*disabled + selected*/ - .disabledSelected + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #b1b1b1; - } - .disabledSelected:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #b1b1b1; - } - .disabledSelected + label::before { - /*使用伪元素生成一个按钮*/ - left: 22px; } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 54e973f..01587ee 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -9,12 +9,11 @@ export class StarSwitch extends LitElement { } @property({type: String}) switchtype = '' - @property({type: String}) text = '' @property({type: Boolean}) disabled = false render() { return html` -
    +
    ` From a46307177db486bebfd9a88f5135f20f8b7c4e5a Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Mon, 29 Aug 2022 20:50:15 +0800 Subject: [PATCH 5/5] =?UTF-8?q?TASK=EF=BC=9A=20#105399=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E4=BA=86README.md=E6=96=87=E4=BB=B6=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=BA=86=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=E5=92=8C?= =?UTF-8?q?=E5=9B=9E=E5=BC=B9=E6=95=88=E6=9E=9C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/li/li.ts | 15 +- src/components/switch/README.md | 47 +++++ src/components/switch/switch-styles.ts | 260 +++---------------------- src/components/switch/switch.ts | 33 ++-- src/test/panels/switch/switch.ts | 208 ++++++++++++++------ 5 files changed, 255 insertions(+), 308 deletions(-) create mode 100644 src/components/switch/README.md diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 3bf175b..7ad98ae 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -24,8 +24,10 @@ export class StarLi extends LitElement { @property({type: String}) icon = '' @property({type: String}) iconcolor = '' @property({type: Number}) bubble = 0 - @property({type: String}) switchtype = '' + @property({type: String}) switchcolor = '' @property({type: Boolean}) disabled = false + @property({type: Boolean}) checked = false + @property({type: String}) size = '' getbase(): HTMLTemplateResult { return html` @@ -198,6 +200,7 @@ export class StarLi extends LitElement { ` } + getswitchlabel(): HTMLTemplateResult | typeof nothing { if (!this.label) { console.error('【star-ul】【switchlabel】缺少 label 参数') @@ -226,8 +229,9 @@ export class StarLi extends LitElement { ${this.label} ` @@ -237,8 +241,9 @@ export class StarLi extends LitElement { ${this.label} `} diff --git a/src/components/switch/README.md b/src/components/switch/README.md new file mode 100644 index 0000000..8f18a17 --- /dev/null +++ b/src/components/switch/README.md @@ -0,0 +1,47 @@ +## star-switch + +星光 Web 组件 --- Switch 组件（8 月 29 日） + +`star-switch` 组件包含**四种**互相独立的属性，介绍如下： + +1. switchcolor : 控制 switch 的选中背景颜色，默认为蓝色`#0265dc`。 + +``` + +
    + +``` + +2. checked : 用于选择对应 switch 首次加载时是否被选中，默认为`false`。 + +``` + +
    + +
    + +``` + +3. disabled : 控制 switch 是否**禁用**状态，默认为`false`。 + +``` + +
    + +
    + +``` + +4. size : 控制 switch 的大小，包括 small、medium、large 和 extralarge，默认为 `medium` 。 + +``` + +
    + +
    + +
    + +
    + +``` diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index 61023cf..2e67d0d 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -1,24 +1,28 @@ import {css, CSSResult} from 'lit' - export const sharedStyles: CSSResult = css` - /*Standard*/ + :host { + position: relative; + top: 17%; + /*默认颜色 */ + --background-color: #0265dc; + /*默认开关小球颜色 */ + --before-color: #fff; + } .base { - display: none; /*隐藏表单元素*/ + display: none; + /*隐藏表单元素*/ } .base + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ display: inline-block; position: relative; width: 46px; height: 24px; - line-height: 24px; border-radius: 30px; background-color: #e9e9e9; - user-select: none; } .base:checked + label { /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #222222; + background-color: var(--background-color); } .base + label::before { /*使用伪元素生成一个按钮*/ @@ -30,285 +34,75 @@ export const sharedStyles: CSSResult = css` top: 1px; position: absolute; border-radius: 20px; - background-color: #fff; - transition: all 0.2s; + background-color: var(--before-color); box-shadow: 0.5px 0px 3px 0.1px #888888; - animation-name: bbb; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; + transition: 0.15s cubic-bezier(0.16, 0.67, 0.18, 1.1); } .base + label:active::before { - border-color: #222222; transform: scale(1.05, 1.05); } .base:checked + label::before { /*checkbox选中时按钮的样式*/ - animation-name: aaa; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; + transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1); left: 22px; } - @keyframes aaa { - 0% { - width: 47.8%; - } - 80% { - width: 46%; - left: 50%; - } - 100% { - width: 47.8%; - left: 47.8%; - } - } - @keyframes bbb { - 0% { - width: 47.8%; - } - 80% { - width: 46%; - } - 100% { - width: 47.8%; - } - } - - /*blue*/ - .blue:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #0265dc; - } - .blue:checked + label::before { - border-color: #0265dc; - } - - /*Green*/ - .green:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #4cd964; - } - .green:checked + label::before { - border-color: #4cd964; - } - - /*Red*/ - .red:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #ff3b30; - } - .red:checked + label::before { - border-color: #ff3b30; - } - - /*Selected*/ - .selected + label { - background-color: #222222; - } - .selected:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #e9e9e9; - } - .selected + label::before { - /*使用伪元素生成一个按钮*/ - animation-name: selectedright; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 22px; - } - .selected:checked + label::before { - /*checkbox选中时按钮的样式*/ - animation-name: selectedleft; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 2px; - } - .selected + label:active::before { - transform: scale(1.05, 1.05); - } - @keyframes selectedleft { - 0% { - width: 47.8%; - } - 80% { - width: 46%; - } - 100% { - width: 47.8%; - } - } - @keyframes selectedright { - 0% { - width: 47.8%; - } - 80% { - width: 46%; - left: 23px; - } - 100% { - width: 47.8%; - left: 22px; - } - } /*Disabled*/ - .disabled + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #b1b1b1; + :host([disabled]) { + --background-color: #b1b1b1 !important; } - .disabled + label::before { + :host([disabled]) label::before { background-color: #f0f0f0; } - .disabled + label:active::before { - width: 22px; - transform: scale(1, 1); - } - - /*DisabledSelected*/ - .disabledselected + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #b1b1b1; - } - .disabledselected + label::before { - /*使用伪元素生成一个按钮*/ - left: 22px; - background-color: #f0f0f0; - } - .disabledselected + label:active::before { - /*激活按钮后*/ - width: 22px; + :host([disabled]) label:active::before { transform: scale(1, 1); } /*Small*/ - .small + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + :host([size='small']) label { width: 38px; height: 20px; line-height: 20px; } - .small + label::before { + :host([size='small']) label::before { /*使用伪元素生成一个按钮*/ height: 18px; width: 18px; } - .small:checked + label::before { + :host([size='small']) input:checked + label::before { /*checkbox选中时按钮的样式*/ left: 18px; } /*Large*/ - .large + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + :host([size='large']) label { width: 54px; height: 28px; line-height: 28px; } - .large + label::before { + :host([size='large']) label::before { /*使用伪元素生成一个按钮*/ height: 26px; width: 26px; } - .large:checked + label::before { + :host([size='large']) input:checked + label::before { /*checkbox选中时按钮的样式*/ left: 26px; } /*ExtraLarge*/ - .extralarge + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ + :host([size='extralarge']) label { width: 62px; height: 32px; line-height: 32px; } - .extralarge + label::before { + :host([size='extralarge']) label::before { /*使用伪元素生成一个按钮*/ height: 30px; width: 30px; } - .extralarge:checked + label::before { + :host([size='extralarge']) input:checked + label::before { /*checkbox选中时按钮的样式*/ left: 30px; } - - /*blue selected*/ - .blueselected + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #0265dc; - } - .blueselected:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #e9e9e9; - } - .blueselected + label::before { - /*使用伪元素生成一个按钮*/ - animation-name: selectedright; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 22px; - } - .blueselected:checked + label::before { - /*checkbox选中时按钮的样式*/ - animation-name: selectedleft; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 2px; - } - - /*red selected*/ - .redselected + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #ff3b30; - } - .redselected:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #e9e9e9; - } - .redselected + label::before { - /*使用伪元素生成一个按钮*/ - animation-name: selectedright; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 22px; - } - .redselected:checked + label::before { - /*checkbox选中时按钮的样式*/ - animation-name: selectedleft; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 2px; - } - - /*green selected*/ - .greenselected + label { - /*+选择器选择紧跟“+”左边选择器的第一个元素*/ - background-color: #4cd964; - } - .greenselected:checked + label { - /*选中表单后的样式，:checked表示checkbox被选中后的状态*/ - background-color: #e9e9e9; - } - .greenselected + label::before { - /*使用伪元素生成一个按钮*/ - animation-name: selectedright; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 22px; - } - .greenselected:checked + label::before { - /*checkbox选中时按钮的样式*/ - animation-name: selectedleft; - animation-duration: 0.25s; - animation-timing-function: ease; - animation-delay: 0.1s; - left: 2px; - } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 01587ee..58e6ded 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -4,26 +4,35 @@ import {sharedStyles} from './switch-styles' @customElement('star-switch') export class StarSwitch extends LitElement { + _backgoundColor: string = '' public static override get styles(): CSSResultArray { return [sharedStyles] } - @property({type: String}) switchtype = '' + // @property({type: String}) switchtype = '' @property({type: Boolean}) disabled = false + @property({type: Boolean}) checked = false + @property({type: String}) + get switchColor() { + return this._backgoundColor + } + + set switchColor(value: string) { + this.style.setProperty('--background-color', value) + this._backgoundColor = value + } render() { return html` -
    - - -
    + + ` } } diff --git a/src/test/panels/switch/switch.ts b/src/test/panels/switch/switch.ts index e8fd624..37af8d2 100644 --- a/src/test/panels/switch/switch.ts +++ b/src/test/panels/switch/switch.ts @@ -21,7 +21,7 @@ export class PanelSwitch extends LitElement { type=${LiType.SWITCH_LABEL} label="BASE" icon="switch" - iconcolor="black" + iconcolor="blue" >
    - + -
    - -
    -
    +
    + +
    +
    - - -
    - -
    - -
    -     - - +
    +
    +     + + + +
    + +
    + +
    + +
    +     + + + +
    + +
    + +
    + +
    +     + + + +
    + +
    + +
    +