TASK： #105399 增加了README.md文件，优化了代码结构和回弹效果。
This commit is contained in:
duanzhijiang
parent
528e310c99
commit
a46307177d
|
|
@ -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 {
|
|||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
getswitchlabel(): HTMLTemplateResult | typeof nothing {
|
||||
if (!this.label) {
|
||||
console.error('【star-ul】【switchlabel】缺少 label 参数')
|
||||
|
|
@ -226,8 +229,9 @@ export class StarLi extends LitElement {
|
|||
<span class="label">${this.label}</span>
|
||||
<star-switch
|
||||
?disabled="${this.disabled}"
|
||||
class="switch"
|
||||
switchtype=${this.switchtype}
|
||||
?checked="${this.checked}"
|
||||
switchcolor=${this.switchcolor}
|
||||
size=${this.size}
|
||||
></star-switch>
|
||||
</a>
|
||||
`
|
||||
|
|
@ -237,8 +241,9 @@ export class StarLi extends LitElement {
|
|||
<span class="label">${this.label}</span>
|
||||
<star-switch
|
||||
?disabled="${this.disabled}"
|
||||
class="switch"
|
||||
switchtype=${this.switchtype}
|
||||
?checked="${this.checked}"
|
||||
switchcolor=${this.switchcolor}
|
||||
size=${this.size}
|
||||
></star-switch>
|
||||
</a>
|
||||
`}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
## star-switch
|
||||
|
||||
星光 Web 组件 --- Switch 组件（8 月 29 日）
|
||||
|
||||
`star-switch` 组件包含**四种**互相独立的属性，介绍如下：
|
||||
|
||||
1. switchcolor : 控制 switch 的选中背景颜色，默认为蓝色`#0265dc`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch switchcolor="#4cd964"></star-switch>
|
||||
```
|
||||
|
||||
2. checked : 用于选择对应 switch 首次加载时是否被选中，默认为`false`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch checked></star-switch>
|
||||
<hr />
|
||||
<star-switch checked switchcolor="#4cd964"></star-switch>
|
||||
```
|
||||
|
||||
3. disabled : 控制 switch 是否**禁用**状态，默认为`false`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch disabled></star-switch>
|
||||
<hr />
|
||||
<star-switch disabled checked></star-switch>
|
||||
```
|
||||
|
||||
4. size : 控制 switch 的大小，包括 small、medium、large 和 extralarge，默认为 `medium` 。
|
||||
|
||||
```
|
||||
<star-switch size="small" switchcolor="#4cd964"></star-switch>
|
||||
<hr />
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch size="large" checked></star-switch>
|
||||
<hr />
|
||||
<star-switch size="extralarge" disabled></star-switch>
|
||||
<hr />
|
||||
<star-switch size="extralarge" disabled checked></star-switch>
|
||||
```
|
||||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<div id="div">
|
||||
<input
|
||||
?disabled="${this.disabled}"
|
||||
type="checkbox"
|
||||
class="base
|
||||
${this.switchtype}"
|
||||
id="base"
|
||||
/>
|
||||
<label for="base">
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
?disabled="${this.disabled}"
|
||||
?checked="${this.checked}"
|
||||
type="checkbox"
|
||||
class="base"
|
||||
id="base"
|
||||
switchcolor="#0265dc"
|
||||
/>
|
||||
<label for="base"></label>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class PanelSwitch extends LitElement {
|
|||
type=${LiType.SWITCH_LABEL}
|
||||
label="BASE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
iconcolor="blue"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
|
|
@ -29,15 +29,15 @@ export class PanelSwitch extends LitElement {
|
|||
label="GREEN"
|
||||
icon="switch"
|
||||
iconcolor="green"
|
||||
switchtype="green"
|
||||
switchcolor="#4cd964"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BLUE"
|
||||
label="BLACK"
|
||||
icon="switch"
|
||||
iconcolor="blue"
|
||||
switchtype="blue"
|
||||
iconcolor="black"
|
||||
switchcolor="#222222"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
|
|
@ -45,89 +45,181 @@ export class PanelSwitch extends LitElement {
|
|||
label="RED"
|
||||
icon="switch"
|
||||
iconcolor="red"
|
||||
switchtype="red"
|
||||
switchcolor="#ff3b30"
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - SELECTED">
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - CHECKED">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BASE - SELECTED"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
switchtype="selected"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="GREEN - SELECTED"
|
||||
icon="switch"
|
||||
iconcolor="green"
|
||||
switchtype="greenselected"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BLUE - SELECTED"
|
||||
label="BASE - CHECKED"
|
||||
icon="switch"
|
||||
iconcolor="blue"
|
||||
switchtype="blueselected"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="RED - SELECTED"
|
||||
label="GREEN - CHECKED"
|
||||
icon="switch"
|
||||
iconcolor="green"
|
||||
switchcolor="#4cd964"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BLUE - CHECKED"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
switchcolor="#222222"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="RED - CHECKED"
|
||||
icon="switch"
|
||||
iconcolor="red"
|
||||
switchtype="redselected"
|
||||
switchcolor="#ff3b30"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - SIZE">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="SMALL"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
switchtype="small"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="LARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
switchtype="large"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="EXTRALARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
switchtype="extralarge"
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - DISABLE">
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - DISABLED">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED"
|
||||
icon="switch"
|
||||
iconcolor="gray"
|
||||
switchtype="disabled"
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED-SELECTED"
|
||||
label="DISABLED - CHECKED"
|
||||
icon="switch"
|
||||
iconcolor="gray"
|
||||
switchtype="disabledselected"
|
||||
checked
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - SMALL">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BASE - SMALL"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="small"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - SMALL"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="small"
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="CHECKED - SMALL"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="small"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - CHECKED - SMALL"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="small"
|
||||
checked
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - LARGE">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BASE - LARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="large"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - LARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="large"
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="CHECKED - LARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="large"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - CHECKED - LARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="large"
|
||||
checked
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="SWITCH - EXTRALARGE">
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="BASE - EXTRALARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="extralarge"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - EXTRALARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="extralarge"
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="CHECKED - EXTRALARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="extralarge"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.SWITCH_LABEL}
|
||||
label="DISABLED - CHECKED - EXTRALARGE"
|
||||
icon="switch"
|
||||
iconcolor="black"
|
||||
size="extralarge"
|
||||
checked
|
||||
disabled
|
||||
></star-li>
|
||||
<hr />
|
||||
|
|
|
|||
Loading…
Reference in New Issue