(update)在star-li中增加type='checkbox'支持
This commit is contained in:
wangchangqi
parent
315f0c3ad4
commit
6b69bb6b5a
|
|
@ -18,6 +18,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-15px: calc(15px / var(--hostDevicePixelRatio));
|
||||
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
|
||||
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
||||
--auto-19px: calc(19px / var(--hostDevicePixelRatio));
|
||||
--auto-20px: calc(20px / var(--hostDevicePixelRatio));
|
||||
--auto-22px: calc(22px / var(--hostDevicePixelRatio));
|
||||
--auto-23px: calc(23px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -92,149 +92,123 @@
|
|||
1. 图标优先级上: appicon > 伪类 icon > 图像插槽。当既没有 appicon 也没有伪类 icon 时，将放置一个图像嵌入插槽<slot name="icon">
|
||||
|
||||
```
|
||||
## 安全可信管理
|
||||
----------------
|
||||
| 主Label |
|
||||
---------------- 跳转伪类(>)
|
||||
| 次Description |
|
||||
-----------------
|
||||
|
||||
----------------
|
||||
| 主Label |
|
||||
---------------- 灰色状态值VALUE 跳转伪类(>)
|
||||
| 次Description |
|
||||
-----------------
|
||||
```
|
||||
|
||||
```
|
||||
----------------
|
||||
| 主Label | 灰色状态值VALUE
|
||||
----------------
|
||||
|
||||
----------------
|
||||
| 主Label | 灰色状态值VALUE
|
||||
----------------
|
||||
|
||||
----------------
|
||||
| 主Label | 跳转伪类(>)
|
||||
----------------
|
||||
|
||||
----------------
|
||||
| 主Label | 蓝色状态值VALUE 跳转伪类(>)
|
||||
----------------
|
||||
|
||||
------- ----------------
|
||||
| Icon| | 主Label | 跳转伪类(>)
|
||||
------- ----------------
|
||||
|
||||
## 电池
|
||||
-------- ----------------
|
||||
| Icon | | 主Label | 分隔线 灰色状态值VALUE
|
||||
-------- ----------------
|
||||
|
||||
## WLAN
|
||||
-------- ---------------- ----------
|
||||
| Icon | | 主Label | | 方块标签 | Info伪类(i)
|
||||
-------- ---------------- ----------
|
||||
|
||||
-------- ----------------
|
||||
| Icon | | 主Label | 蓝色状态值VALUE 跳转伪类(>)
|
||||
-------- ----------------
|
||||
|
||||
## 移动网络
|
||||
|
||||
----------- ----------------
|
||||
| AppIcon | | 主Label | 灰色状态值VALUE 跳转伪类(>)
|
||||
----------- ----------------
|
||||
|
||||
## 加速清理
|
||||
|
||||
----------- ----------------
|
||||
| | | 主Label |
|
||||
| AppIcon | ---------------- 蓝色状态值VALUE 跳转伪类(>)
|
||||
| | | 次Description |
|
||||
----------- -----------------
|
||||
|
||||
|
||||
########################################----SLOT
|
||||
----------------
|
||||
| 主Label | Slot-选择器Selector(值选择器, 时间选择器, 日期选择器)
|
||||
----------------
|
||||
|
||||
----------------
|
||||
| 主Label | Slot-输入框Input
|
||||
----------------
|
||||
|
||||
-------- ----------------
|
||||
| Icon | | 主Label | 分隔线 Slot-复选框组 CheckBoxGroup
|
||||
-------- ----------------
|
||||
|
||||
```
|
||||
|
||||
## CheckBox
|
||||
## type="checkbox"
|
||||
|
||||
CheckBox, Switch 不直接控制点击态内容,
|
||||
|
||||
```
|
||||
## 开发者HUD
|
||||
----------------
|
||||
| 主Label | Checkbox
|
||||
----------------
|
||||
|
||||
----------------
|
||||
| 主Label | 文本|Checkbox
|
||||
----------------
|
||||
```
|
||||
|
||||
## Switch
|
||||
采用内包含式模拟
|
||||
|
||||
```
|
||||
----------------
|
||||
| 主Label | Switch
|
||||
----------------
|
||||
|
||||
-------- ----------------
|
||||
| Icon | | 主Label | Switch
|
||||
-------- ----------------
|
||||
|
||||
----------------
|
||||
| 主Label |
|
||||
---------------- Switch
|
||||
| 次Description |
|
||||
-----------------
|
||||
|
||||
----------- ----------------
|
||||
| | | 主Label |
|
||||
| AppIcon | ---------------- SplitLine Switch
|
||||
| | | 次Description |
|
||||
----------- -----------------
|
||||
┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌────────────────┐
|
||||
│ │ │ Label │ Square │ │ │ │ │
|
||||
right │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Checkbox(mock) │
|
||||
│ │ │ Description | │ │ │ │
|
||||
└─────────┘ └────────────────┘ └───────┘ └────────────────┘
|
||||
┌────────────────┐ ┌─────────┐ ┌───────┬────────┐ ┌───────┐
|
||||
│ │ │ │ │ Label │ Square │ │ │
|
||||
left │ Checkbox(mock) │ │(App)Icon│ ├───────┴────────┤ │ VALUE │
|
||||
│ │ │ │ │ Description | │ │
|
||||
└────────────────┘ └─────────┘ └────────────────┘ └───────┘
|
||||
```
|
||||
|
||||
## Radio
|
||||
```html
|
||||
<star-li type="checkbox" label="滚屏越界" checked></star-li>
|
||||
<star-li type="checkbox" label="低精度绘制"></star-li>
|
||||
<star-li type="checkbox" label="+86 180 4766 4766" pos="left"></star-li>
|
||||
<star-li type="checkbox" label="+86 180 4766 4766" pos="left" checked></star-li>
|
||||
```
|
||||
|
||||
## type="embed-checkbox-group"
|
||||
|
||||
特征: 在单行中包含不少于两个的 Checkbox
|
||||
|
||||
插入方式: 采用外嵌入式插入
|
||||
|
||||
CheckboxGroup 的作用: 在有限空间内提供横向或纵向的组织功能, 包裹 Checkbox 并提供一层抽象(类似一层专属的自动布局 div).
|
||||
|
||||
基本示例:
|
||||
|
||||
```html
|
||||
<star-li type="embed-checkbox-group" label="微博">
|
||||
<!-- 内包含 -->
|
||||
<star-checkbox-group>
|
||||
<star-checkbox value="WLAN"></star-checkbox>
|
||||
<star-checkbox value="MOBILE_NETWORK"></star-checkbox>
|
||||
</star-checkbox-group>
|
||||
</star-li>
|
||||
```
|
||||
|
||||
## type="switch"
|
||||
|
||||
```
|
||||
----------------
|
||||
| 主Label | Radio
|
||||
----------------
|
||||
┌─────────┐ ┌───────┬────────┐ ┌────────┐
|
||||
│ │ │ Label │ Square │ │ │
|
||||
│(App)Icon│ ├───────┴────────┤ │ Switch │
|
||||
│ │ │ Description | │ │
|
||||
└─────────┘ └────────────────┘ └────────┘
|
||||
```
|
||||
|
||||
----------------
|
||||
| 主Label |
|
||||
---------------- Radio(圆环)
|
||||
| 次Description |
|
||||
-----------------
|
||||
## type="embed-switch"
|
||||
|
||||
## 时区
|
||||
----------------
|
||||
| 主Label |
|
||||
---------------- Radio(对勾)
|
||||
| 次Description |
|
||||
-----------------
|
||||
```
|
||||
┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌─────────────┐
|
||||
│ │ │ Label │ Square │ │ │ │ │
|
||||
│(App)Icon│ ├───────┴────────┤ │SplitLine│ │ SLOT=Switch │
|
||||
│ │ │ Description | │ │ │ │
|
||||
└─────────┘ └────────────────┘ └─────────┘ └─────────────┘
|
||||
```
|
||||
|
||||
## type='radio'
|
||||
|
||||
```
|
||||
┌─────────┐ ┌───────┬────────┐ ┌────────────────┐
|
||||
│ │ │ Label │ Square │ │ Radio(mock) │
|
||||
│(App)Icon│ ├───────┴────────┤ │ │
|
||||
│ │ │ Description | │circle/checkmark│
|
||||
└─────────┘ └────────────────┘ └────────────────┘
|
||||
```
|
||||
|
||||
## RadioGroup
|
||||
|
||||
Radio 在纵向或横向上的叠加
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│<star-radio-group> │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ... │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```html
|
||||
<star-radio-group
|
||||
selected="first"
|
||||
|
|
|
|||
|
|
@ -200,9 +200,9 @@ export default css`
|
|||
width: var(--auto-32px);
|
||||
height: var(--auto-32px);
|
||||
margin: auto 0 auto auto;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
:host([type='radio'][checked]) a::after {
|
||||
border: var(--auto-9px) solid var(--theme-blue);
|
||||
|
|
@ -219,6 +219,36 @@ export default css`
|
|||
content: 'tick';
|
||||
}
|
||||
|
||||
/* type="checkbox" */
|
||||
:host([type='checkbox']:not([pos='left'])) span#value {
|
||||
padding-right: var(--auto-22px);
|
||||
}
|
||||
:host([type='checkbox']:not([pos='left'])) a::after,
|
||||
:host([type='checkbox'][pos='left']) a::before {
|
||||
content: ' ';
|
||||
width: var(--auto-32px);
|
||||
height: var(--auto-32px);
|
||||
margin: auto 0 auto auto;
|
||||
box-sizing: border-box;
|
||||
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
|
||||
border-radius: var(--auto-5px);
|
||||
}
|
||||
:host([type='checkbox'][pos='left']) a::before {
|
||||
margin: auto var(--auto-19px) auto 0;
|
||||
}
|
||||
:host([type='checkbox'][checked][pos='left']) a::before,
|
||||
:host([type='checkbox'][checked]:not([pos='left'])) a::after {
|
||||
content: 'tick';
|
||||
color: #fff;
|
||||
border: unset;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: 'star-icons';
|
||||
font-size: var(--auto-22px);
|
||||
line-height: var(--auto-32px);
|
||||
background: var(--theme-blue);
|
||||
}
|
||||
|
||||
/* other star-web-components */
|
||||
star-button[type='text']#li-text-button {
|
||||
--oc-text-padding-inline: 0;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export class StarLi extends StarBaseElement {
|
|||
return [liStyles]
|
||||
}
|
||||
|
||||
@property({type: String}) type = ''
|
||||
@property({type: String}) type!: LiType
|
||||
|
||||
@property({type: String}) label = ''
|
||||
|
||||
|
|
@ -68,8 +68,11 @@ export class StarLi extends StarBaseElement {
|
|||
*/
|
||||
@property({type: String}) square = ''
|
||||
|
||||
/**
|
||||
* 该属性被 type='switch', type='radio' 和 type='checkbox' 共用
|
||||
* 属性值的内容将反射至star-li标签上
|
||||
*/
|
||||
@property({type: Boolean, reflect: true}) checked!: boolean
|
||||
// @property({type: Boolean}) checked = false
|
||||
|
||||
@property({type: String, reflect: true}) value!: string
|
||||
@property({type: String}) default = ''
|
||||
|
|
@ -430,6 +433,41 @@ export class StarLi extends StarBaseElement {
|
|||
`
|
||||
}
|
||||
|
||||
renderCheckbox() {
|
||||
return html`
|
||||
<li
|
||||
.aaaa=${{hello: 1, bad: '2'}}
|
||||
@click=${() => {
|
||||
this.checked = !this.checked
|
||||
}}
|
||||
>
|
||||
<a>
|
||||
${this.icon
|
||||
? nothing
|
||||
: html`
|
||||
<slot name="icon"></slot>
|
||||
`}
|
||||
<div id="content">
|
||||
<div id="main-label">
|
||||
<span id="label">${this.label}</span>
|
||||
</div>
|
||||
${this.description
|
||||
? html`
|
||||
<span id="description">${this.description}</span>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
${this.value
|
||||
? html`
|
||||
<span id="value">${this.value}</span>
|
||||
`
|
||||
: nothing}
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
renderCheckboxGroup() {}
|
||||
|
||||
render() {
|
||||
switch (this.type) {
|
||||
/* deprecated */ case LiType.BASE:
|
||||
|
|
@ -463,7 +501,6 @@ export class StarLi extends StarBaseElement {
|
|||
|
||||
case LiType.SELECTOR:
|
||||
case LiType.EMBED_CARD:
|
||||
case LiType.EMBED_CHECKBOX_GROUP:
|
||||
// TBD
|
||||
|
||||
case LiType.INPUT:
|
||||
|
|
@ -475,9 +512,15 @@ export class StarLi extends StarBaseElement {
|
|||
case LiType.SWITCH:
|
||||
return this.renderSwitch()
|
||||
|
||||
case LiType.CHECKBOX: // 不含<star-radio>但是有同样的基本行为表现
|
||||
return this.renderCheckbox()
|
||||
|
||||
case LiType.EMBED_CHECKBOX_GROUP:
|
||||
return this.renderCheckboxGroup()
|
||||
|
||||
case LiType.DEFAULT:
|
||||
case LiType.PRIMARY:
|
||||
case LiType.RADIO:
|
||||
case LiType.RADIO: // 不含<star-radio>但是有同样的基本行为表现
|
||||
default:
|
||||
return this.renderGeneral()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import {
|
|||
aboutself,
|
||||
lockscreen,
|
||||
privacy,
|
||||
zip,
|
||||
} from './static/icons'
|
||||
import '@star-web-components/li'
|
||||
import '@star-web-components/switch'
|
||||
|
|
@ -231,6 +232,55 @@ export class PanelLi extends LitElement {
|
|||
></star-li>
|
||||
</star-radio-group>
|
||||
<hr />
|
||||
<star-li type="checkbox" label="滚屏越界" checked></star-li>
|
||||
<star-li type="checkbox" label="低精度绘制"></star-li>
|
||||
<hr />
|
||||
<star-li type="checkbox" label="+86 180 4766 4766" pos="left"></star-li>
|
||||
<star-li
|
||||
type="checkbox"
|
||||
label="+86 180 4766 4766"
|
||||
pos="left"
|
||||
checked
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type="checkbox"
|
||||
label="normal_com.sina_43.APK"
|
||||
description="2020-08-26 11:30"
|
||||
value="1.3GB"
|
||||
checked
|
||||
>
|
||||
<star-svg-icon slot="icon">${zip}</star-svg-icon>
|
||||
</star-li>
|
||||
<star-li
|
||||
type="checkbox"
|
||||
label="normal_com.sina_43.APK"
|
||||
description="2020-08-26 11:30"
|
||||
value="1.3GB"
|
||||
>
|
||||
<star-svg-icon slot="icon">${zip}</star-svg-icon>
|
||||
</star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type="checkbox"
|
||||
label="normal_com.sina_43.APK"
|
||||
pos="left"
|
||||
description="2020-08-26 11:30"
|
||||
value="1.3GB"
|
||||
checked
|
||||
>
|
||||
<star-svg-icon slot="icon">${zip}</star-svg-icon>
|
||||
</star-li>
|
||||
<star-li
|
||||
type="checkbox"
|
||||
label="normal_com.sina_43.APK"
|
||||
pos="left"
|
||||
description="2020-08-26 11:30"
|
||||
value="1.3GB"
|
||||
>
|
||||
<star-svg-icon slot="icon">${zip}</star-svg-icon>
|
||||
</star-li>
|
||||
<hr />
|
||||
|
||||
<h1>外嵌入式组件</h1>
|
||||
<star-li
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue