diff --git a/src/components/switch/README.md b/src/components/switch/README.md index 8f18a17..a9a6b1c 100644 --- a/src/components/switch/README.md +++ b/src/components/switch/README.md @@ -2,17 +2,28 @@ 星光 Web 组件 --- Switch 组件(8 月 29 日) -`star-switch` 组件包含**四种**互相独立的属性,介绍如下: +`star-switch` 组件包含**五种**互相独立的属性,介绍如下: 1. switchcolor : 控制 switch 的选中背景颜色,默认为蓝色`#0265dc`。 ```
- + ios绿 + ios红 ``` -2. checked : 用于选择对应 switch 首次加载时是否被选中,默认为`false`。 +2. switchicon : 用于控制内含文本,默认为`false`。 + +``` + +
+ +
+ +``` + +3. checked : 用于选择对应 switch 首次加载时是否被选中,默认为`false`。 ``` @@ -22,7 +33,7 @@ ``` -3. disabled : 控制 switch 是否**禁用**状态,默认为`false`。 +4. disabled : 控制 switch 是否**禁用**状态,默认为`false`。 ``` @@ -32,7 +43,7 @@ ``` -4. size : 控制 switch 的大小,包括 small、medium、large 和 extralarge,默认为 `medium` 。 +5. size : 控制 switch 的大小,包括 small、medium、large 和 extralarge,默认为 `medium` 。 ``` @@ -45,3 +56,7 @@
``` + +该组件支持焦点选中,且可以在焦点选中后任意拖动。 + +拖动后可间接触发 checked 开关。 diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 07f1bce..b414a09 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -13,6 +13,10 @@ export class StarSwitch extends LitElement { @property({type: Number}) right = 0 @property({type: Number}) left = 0 @property({type: Number}) switchx = 0 + @property({type: Number}) startx = 0 + @property({type: Number}) _x = 0 + @property({type: Number}) rightx = 0 + @property({type: Number}) leftx = 10000 @property({type: Number}) x = 0 @property({type: Boolean}) disabled = false @property({type: Boolean}) checked = false @@ -40,27 +44,87 @@ export class StarSwitch extends LitElement { id="base" switchcolor="#0265dc" /> -