openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #159 in YR/star-web-components from update-star-li to master 

* commit 'd4b2c666fe0bead7c7eb421323161512f4fd8439':
  (update)适应设计图修改star-li
This commit is contained in:
汪昌棋 2022-11-19 15:23:14 +08:00
parent 2b73e38360 d4b2c666fe
commit 8116351ec6
14 changed files with 2599 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/base/auto-px-style.ts
View File

@ -5,6 +5,7 @@ export const autoPxStyle: CSSResult = css`
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
--auto-2px: calc(2px / var(--hostDevicePixelRatio));
--auto-3px: calc(3px / var(--hostDevicePixelRatio));
--auto-4px: calc(4px / var(--hostDevicePixelRatio));
--auto-5px: calc(5px / var(--hostDevicePixelRatio));
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
@ -18,6 +19,8 @@ export const autoPxStyle: CSSResult = css`
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
--auto-20px: calc(20px / var(--hostDevicePixelRatio));
--auto-22px: calc(22px / var(--hostDevicePixelRatio));
--auto-23px: calc(23px / var(--hostDevicePixelRatio));
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
@ -45,17 +48,14 @@ export const autoPxStyle: CSSResult = css`
--auto-58px: calc(58px / var(--hostDevicePixelRatio));
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
--auto-71px: calc(71px / var(--hostDevicePixelRatio));
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
--auto-71px: calc(70px / var(--hostDevicePixelRatio));
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
--auto-74px: calc(66px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-77px: calc(77px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-82px: calc(80px / var(--hostDevicePixelRatio));
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-85px: calc(85px / var(--hostDevicePixelRatio));
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
@ -63,7 +63,7 @@ export const autoPxStyle: CSSResult = css`
--auto-108px: calc(108px / var(--hostDevicePixelRatio));
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-116px: calc(116px / var(--hostDevicePixelRatio));
--auto-124px: calc(124px / var(--hostDevicePixelRatio));
--auto-118px: calc(118px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
@ -71,8 +71,8 @@ export const autoPxStyle: CSSResult = css`
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
--auto-183px: calc(183px / var(--hostDevicePixelRatio));
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
--auto-201px: calc(201px / var(--hostDevicePixelRatio));
--auto-206px: calc(206px / var(--hostDevicePixelRatio));

16
src/components/base/global-style.ts
View File

@ -9,6 +9,7 @@ import {css, CSSResultArray} from 'lit'
* btn = button
* bgc = background-color
* bs = box-shadow
* oc = out-control 外部样式控制，用于侵入性修改
*
* 模块划分原则：
* 基础模块 - 基础模块存放具有通用意义的变量
@ -35,6 +36,7 @@ const baseStyle = css`
:root {
--devicePixelRatio: 2;
--text-font-family: 'OPPPSans';
--icon-font: 'star-icons';
/*****************************线性渐变*************************************/
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
@ -364,6 +366,8 @@ const baseStyle = css`
--full-pop-up-mask: rgba(24, 24, 24, 0.35);
/********************************共用***************************************/
--split-line-color: var(--opacity-black-09);
/* 全/radio */
--bgc-radio-off: rgba(38, 38, 38, 0.25);
--bgc-radio-on: rgba(29, 152, 240, 1);
@ -448,6 +452,18 @@ const baseComponentStyle = css`
--dialog-content: var(--font-heading-black);
--dialog-checkbox: var(--font-sec-auxiliary-black);
/* Li */
--li-label: var(--font-main-black);
--li-description: var(--font-sec-auxiliary-black);
--li-square: #B3B3B3;
--li-value-primary: var(--theme-blue);
--li-value-default: var(--font-sec-auxiliary-black);
--li-link: var(--linear-icon32-black);
--li-icon: var(--linear-icon-black);
--li-info: var(--linear-icon32-black);
--li-input: var(--font-prompt-black);
--li-bg-pressed: var(--opacity-black-06);
/* Radio */
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);

22
src/components/base/star-base-element.ts
View File

@ -27,7 +27,7 @@ export type Constructor<T = Record<string, unknown>> = {
prototype: T
}
let currentHoverTarger!: StarBaseElement
let currentHoverTarget!: StarBaseElement
function handleHover(e: Event) {
// Firefox 仅支持 e.composedPath()
@ -38,16 +38,30 @@ function handleHover(e: Event) {
while (path[i++] !== undefined) {
const target = path[i] as Element
switch (target?.tagName) {
/**
* 注意：star-button为原子化组成单位，遵循同一时刻只有一个单位被命中的原则
* 在被触摸击中时将中止事件传递！
* 绕开此行为可在包含其的组件中添加:
* ::slotted::(star-button) {
* pointer-events: none;
* }
*/
case 'STAR-BUTTON':
currentHoverTarger = target as StarBaseElement
currentHoverTarger?.onhover()
case 'STAR-SWITCH':
e.stopImmediatePropagation()
currentHoverTarget = target as StarBaseElement
currentHoverTarget?.onhover()
return
case 'STAR-LI':
currentHoverTarget = target as StarBaseElement
currentHoverTarget?.onhover()
break
}
}
}
function handleHoverEnd() {
currentHoverTarger?.onhoverend()
currentHoverTarget?.onhoverend()
}
function handleContextMenu(e: Event) {

19
src/components/button/button.css.ts
View File

@ -6,6 +6,7 @@ export default [
/* fit-content 同样适用，但firefox不支持 */
width: min-content;
height: min-content;
text-align: center;
display: flex;
}
:host([type='icononly']) {
@ -25,7 +26,7 @@ export default [
height: 100%;
min-width: inherit;
min-height: inherit;
text-align: center;
text-align: inherit;
color: inherit;
font-size: inherit;
font-weight: inherit;
@ -141,8 +142,7 @@ export default [
/* 按钮共性 */
:host([type='normal']) button,
:host([type='pure'][label]) button {
padding-inline-start: var(--auto-32px);
padding-inline-end: var(--auto-32px);
padding-inline: var(--auto-32px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -150,13 +150,11 @@ export default [
}
:host([type='normal']) button.middle,
:host([type='pure'][label]) button.middle {
padding-inline-start: var(--auto-40px);
padding-inline-end: var(--auto-40px);
padding-inline: var(--auto-40px);
}
:host([type='normal']) button.large,
:host([type='pure'][label]) button.large {
padding-inline-start: var(--auto-48px);
padding-inline-end: var(--auto-48px);
padding-inline: var(--auto-48px);
}
:host([type='pure']) button::before,
:host([type='icon']) button::before,
@ -302,14 +300,13 @@ export default [
/* text 类型按钮 */
:host([type='text']) {
font-size: var(--auto-28px);
min-height: var(--auto-112px);
max-height: var(--auto-112px);
min-height: var(--oc-text-min-height, var(--auto-112px));
max-height: var(--oc-text-max-height, var(--auto-112px));
}
:host([type='text']) button {
/* min-width 保障内容最少情况下的显示 */
min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
padding-inline-start: var(--auto-56px);
padding-inline-end: var(--auto-56px);
padding-inline: var(--oc-text-padding-inline, var(--auto-56px));
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

267
src/components/li/README-settings.md Normal file
View File

@ -0,0 +1,267 @@
## Li
总结
```
-----------------------------------------------------------------------------------------------------------
| | -------------- ------------------ |
| | / | 状态值VALUE | | 伪类(>) | |
| | / | 蓝色/灰色 | | 跳转(>),Info(i) | |
| | / -------------- ------------------- |
| | ------------- ---------------- ------------ -------- / |
| | | | | 主Label | | | | | / |
| | | (App)Icon | |--------------| |--方块标签--| | 分隔线 |/ |
| STAR | | | | 次Description| | | | |\ |
| LI | ------------- ---------------- ------------ -------- \ |
| | \ ---------------------------------- |
| | \ |　　　　　 SLOT | |
| | \ ---------------------------------- |
| | \|　　 可嵌入按钮info | |
| | | 选择器Selector | |
| | | (值选择器, 时间选择器, 日期选择器) | |
| | | 输入框Input | |
| | | 复选框CheckBox | |
| | | 复选框组 CheckBoxGroup | |
| | | 单选按钮Radio | |
| | | 单选按钮组RadioGroup | |
| | | 开关Switch | |
| | ----------------------------------- |
------------------------------------------------------------------------------------------------------------
```
命名:
```html
<!-- 两态汇总 -->
<star-li type="default" label="跳转项" href="#somewhere"></star-li>
<star-li type="primary" label="已连接wifi项" icon="wifi-lock-4" value="已连接"></star-li>
<star-li type="primary" label="Kylin" icon="wifi-lock-4" square="5G" info>
<star-button type="icon" size="small" icon="debug" @click="显示xxxx"></star-button>
</star-li>
<star-li type="switch" label="护眼模式" description="开启后，可降低屏幕蓝光辐射，预防用眼疲劳"></star-li>
<star-li type="embed-switch" appicon="gallery" label="微博" description="已开启所有通知" split>
<star-switch></star-switch>
</star-li>
<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
<star-checkbox-group></star-checkbox-group>
</star-li>
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<star-li type="embed-card">
<satr-card></star-card>
</star-li>
<star-li type="primary" appicon="filemanager" label="垃圾文件" description="1.31 GB" value="去清理" href="#xxxx"></star-li>
<star-li type="default" appicon="weibo" label="微博" value="3.64GB" href="#xxxx"></star-li>
<star-li type="checkbox" label="缓存垃圾" value="322 MB"></star-li>
<!-- 基本款完全态 -->
<star-li type="default" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" value="普通灰色VALUE" href="#xxxx"></star-li>
<star-li type="primary" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" value="蓝色强调VALUE"></star-li>
<!-- 基础式 -->
<star-li type="default" appicon="weibo" label="微博" value="3.64GB" href="#xxxx"></star-li>
<star-li type="primary" appicon="filemanager" label="垃圾文件" description="1.31 GB" value="去清理" href="#xxxx"></star-li>
<!-- 内包含式 -->
<star-li type="switch" label="控件项"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<star-li type="checkbox" label="缓存垃圾" value="322 MB"></star-li>
<!-- 外嵌入式 -->
<star-li type="embed-info" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
<star-li type="embed-switch" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
<star-checkbox-group></star-checkbox-group>
</star-li>
<star-li type="embed-card">
<satr-card></star-card>
</star-li>
```
注意:
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
CheckBox, Switch 不直接控制点击态内容,
```
## 开发者HUD
----------------
| 主Label | Checkbox
----------------
----------------
| 主Label | 文本|Checkbox
----------------
```
## Switch
```
----------------
| 主Label | Switch
----------------
-------- ----------------
| Icon | | 主Label | Switch
-------- ----------------
----------------
| 主Label |
---------------- Switch
| 次Description |
-----------------
----------- ----------------
| | | 主Label |
| AppIcon | ---------------- SplitLine Switch
| | | 次Description |
----------- -----------------
```
## Radio
```
----------------
| 主Label | Radio
----------------
----------------
| 主Label |
---------------- Radio(圆环)
| 次Description |
-----------------
## 时区
----------------
| 主Label |
---------------- Radio(对勾)
| 次Description |
-----------------
```
## RadioGroup
Radio 在纵向或横向上的叠加
## Card
```
----------------
| |
| 图 |
| |
-----------------
| 文本|图标 |
-----------------
----------------
| |
| 图 |
| |
-----------------
| CheckBox |
-----------------
```
## Button
需要新适配如下内容
```
----------------
| 主Label |
----------------
| 次Description |
-----------------
```

224
src/components/li/li.css.ts
View File

@ -2,30 +2,23 @@ import {css} from 'lit'
export default css`
:host {
width: inherit;
border-radius: var(--base-border-radius);
display: flex;
width: 100%;
min-height: var(--auto-96px);
}
li {
width: inherit;
display: flex;
flex-wrap: wrap;
border-radius: var(--base-border-radius);
min-height: var(--li-base-height);
line-height: var(--li-base-height);
padding-inline-start: var(--li-left-padding);
padding-inline-end: var(
--li-right-padding
); /* right-arrow须与最右侧文字对齐 */
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
}
/* right-arrow须与最右侧文字对齐 */
/* li.hashref {
padding-inline-end: 0;
} */
a {
display: flex;
text-decoration: none;
color: #000;
width: 100%;
/* 解除Chrome用户代理-点击标签时出现的淡蓝色 */
-webkit-tap-highlight-color: transparent;
}
a.hasicon::before,
a.hashref::after {
@ -46,19 +39,6 @@ padding-inline-end: 0;
text-align: right;
content: 'right-light';
}
input {
width: 100vw;
max-width: 500px;
padding: 0;
border: 0;
height: inherit;
outline: none;
box-sizing: border-box;
vertical-align: top;
border-radius: 6px;
background-color: transparent;
font-size: 16px;
}
span.infokey,
span.label {
flex: 1;
@ -87,4 +67,196 @@ padding-inline-end: 0;
text-align: right;
color: #aaa;
}
a[data-icon]::before {
color: var(--li-icon);
content: attr(data-icon);
font-family: var(--icon-font);
font-size: var(--auto-48px);
min-width: var(--auto-48px);
padding-inline-end: var(--auto-18px);
margin: auto 0;
}
a[href]::after {
color: var(--li-link);
content: 'right-light';
font-family: var(--icon-font);
font-size: var(--auto-32px);
width: var(--auto-32px);
height: var(--auto-32px);
margin: auto 0 auto auto;
padding-left: var(--auto-14px);
}
div#content {
display: flex;
margin: auto 0;
flex-direction: column;
}
div#main-label {
display: flex;
float: left;
}
span#label {
font-weight: bold;
color: var(--li-label);
font-weight: 400;
font-size: var(--auto-26px);
line-height: var(--auto-34px);
}
div#square {
border: var(--auto-1px) solid var(--li-square);
height: var(--auto-28px);
border: var(--auto-2px) solid var(--li-square);
box-sizing: border-box;
border-radius: var(--auto-6px);
margin: auto var(--auto-16px) var(--auto-1px) var(--auto-16px);
padding-inline: var(--auto-8px);
line-height: var(--auto-23px);
font-weight: 500;
font-size: var(--auto-20px);
color: var(--li-square);
}
div#square span {
/* margin: var(--auto-_2px) var(--auto-5px) 0 var(--auto-6px); */
margin-left: var(--auto-6px);
line-height: 0;
}
span#description {
color: var(--li-description);
font-weight: 400;
font-size: var(--auto-20px);
line-height: var(--auto-18px);
margin-top: var(--auto-12px);
}
span#value {
flex: 1;
display: inline-block; /* 用于克服未知排版故障(自身被挤压为0) */
min-width: var(--auto-112px);
margin: auto 0 auto var(--auto-20px);
text-align: right;
white-space: nowrap;
font-size: var(--auto-26px);
line-height: var(--auto-26px);
color: var(--li-value-default);
}
:host([type='primary']) span#value {
color: var(--li-value-primary);
}
:host([type='input']) a {
justify-content: space-between;
}
:host([type='input']) li {
border: var(--auto-3px) solid transparent;
border-radius: var(--auto-16px);
margin: var(--auto-16px) var(--auto-22px);
padding-inline: var(--auto-26px);
}
:host([type='input']) input {
flex: 1;
width: 100%;
height: inherit;
padding-inline-start: var(--auto-40px);
border: 0;
outline: none;
box-sizing: border-box;
vertical-align: top;
text-align: right;
font-weight: 400;
font-size: var(--auto-26px);
line-height: var(--auto-26px);
color: var(--li-input);
caret-color: var(--theme-blue);
background-color: transparent;
}
:host([type='input'][active]) li {
border-color: var(--theme-blue);
}
:host([type='input'][active]) input {
color: var(--li-label);
}
/* other star-web-components */
star-button[type='text']#li-text-button {
--oc-text-padding-inline: 0;
--oc-text-min-height: var(--auto-96px);
pointer-events: none;
width: 100%;
height: 100%;
text-align: left;
}
star-switch#li-switch {
pointer-events: none;
margin: auto 0px auto auto;
}
/* 边界折叠 */
:host(:is([type='default'], [type='primary'], [type='button'], [type='switch'], [type='embed-info'], [type='embed-switch']))
li {
overflow: hidden;
white-space: nowrap;
}
:host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch']))
div#content {
overflow: hidden;
}
:host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch']))
span#label,
:host(:is([type='default'], [type='primary'])) span#value,
:host(:is([type='default'], [type='primary'], [type='embed-switch']))
span#description {
overflow: hidden;
text-overflow: ellipsis;
}
/* slot */
/**
* 当前浏览器排版都含有一个故障：
* 在包含外部slot插入的情况下，无法准确计算本宿主标签的准确width，
* 导致max-width使用百分比时不够准确。
*/
::slotted(star-button[slot='info']) {
width: var(--auto-64px);
height: var(--auto-64px);
color: var(--li-info);
margin: auto var(--auto-32px) auto 0;
font-size: var(--auto-32px);
min-width: var(--auto-64px);
}
:host(:is([type='embed-info'], [type='embed-switch'])) li {
padding-inline-end: 0;
}
::slotted(star-switch[slot='switch']) {
position: relative;
width: var(--auto-70px);
height: var(--auto-38px);
margin: auto var(--auto-48px);
}
:host([split]) ::slotted(star-switch[slot='switch'])::before {
content: '';
position: absolute;
display: block;
border-left: var(--auto-1px) solid var(--split-line-color);
height: var(--auto-40px);
left: calc(0px - var(--auto-48px));
}
::slotted(star-svg-icon[slot='icon']) {
width: var(--auto-64px);
height: var(--auto-64px);
min-width: var(--auto-64px);
margin: auto var(--oc-icon-margin-right, --auto-16px) auto 0;
}
/* 条目按压和释放时的变化 */
:host(.starpress:not([type='embed-switch'])) {
background-color: var(--li-bg-pressed);
}
:host(.starpress[type='embed-switch']) li {
background-color: var(--li-bg-pressed);
}
`

244
src/components/li/li.ts
View File

@ -1,19 +1,45 @@
import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {StarBaseElement} from '../base/star-base-element.js'
import {
customElement,
html,
ifDefined,
nothing,
property,
CSSResultArray,
HTMLTemplateResult,
StarBaseElement,
TemplateResult,
} from '@star-web-components/base'
import liStyles from './li.css.js'
import '../bubble/bubble.js'
import '../switch/switch.js'
import {StarSwitch} from '../switch/switch.js'
export enum LiType {
BASE = 'base',
BUBBLE_LABEL = 'bubble-label',
ICON_LABEL = 'icon-label',
INFO_LABEL = 'info-label',
ONLY_EDIT = 'only-edit',
ONLY_LABEL = 'only-label',
ONLY_READ = 'only-read',
SWITCH_LABEL = 'switch-label',
/* deprecated */ BASE = 'base',
/* deprecated */ BUBBLE_LABEL = 'bubble-label',
/* deprecated */ ICON_LABEL = 'icon-label',
/* deprecated */ INFO_LABEL = 'info-label',
/* deprecated */ ONLY_EDIT = 'only-edit',
/* deprecated */ ONLY_LABEL = 'only-label',
/* deprecated */ ONLY_READ = 'only-read',
/* deprecated */ SWITCH_LABEL = 'switch-label',
/* 基础式 */
DEFAULT = 'default',
PRIMARY = 'primary',
/* 内包含式 */
SWITCH = 'switch',
SELECTOR = 'selector',
BUTTON = 'button',
INPUT = 'input',
CHECKBOX = 'checkbox',
/* 嵌入式 */
EMBED_INFO = 'embed-info',
EMBED_SWITCH = 'embed-switch',
EMBED_CHECKBOX_GROUP = 'embed-checkbox-group',
EMBED_CARD = 'embed-card',
}
@customElement('star-li')
@ -23,16 +49,32 @@ export class StarLi extends StarBaseElement {
}
@property({type: String}) type = ''
@property({type: String}) label = ''
@property({type: String}) value = ''
@property({type: String}) description = ''
/**
* LiButton 内的多样性控制，有 default, primary
*/
@property({type: String}) variant = 'default'
/**
* label之后的方块信息
*/
@property({type: String}) square = ''
// @property({type: Boolean, reflect: true}) checked!: boolean
@property({type: Boolean, reflect: true}) checked = false
@property({type: String, reflect: true}) value!: string
@property({type: String}) default = ''
@property({type: String}) href = ''
@property({type: String}) icon = ''
@property({type: String}) href!: string
@property({type: String}) icon!: string
@property({type: String}) iconcolor = ''
@property({type: Number}) bubble = 0
@property({type: String}) switchcolor = ''
@property({type: Boolean}) disabled = false
@property({type: Boolean}) checked = false
@property({type: Boolean}) switchicon = false
@property({type: String}) size = ''
@ -260,27 +302,179 @@ export class StarLi extends StarBaseElement {
`
}
dynamicSlot: TemplateResult | typeof nothing = nothing
/**
* <star-li
* type="default"
* appicon="settings"
* label="这是Label"
* description="这是Description"
* square="可选的方块标签"
* value="普通灰色VALUE"
* href="#xxxx"
* ></star-li>
*/
renderGeneral() {
return html`
<li>
<a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
${this.icon
? nothing
: html`
<slot name="icon"></slot>
`}
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
${this.square
? html`
<div id="square">${this.square}</div>
`
: nothing}
</div>
${this.description
? html`
<span id="description">${this.description}</span>
`
: nothing}
</div>
${this.value
? html`
<span id="value">${this.value}</span>
`
: nothing}
</a>
</li>
${this.dynamicSlot}
`
}
renderInput() {
return html`
<li>
<a>
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
</div>
</div>
<input
placeholder=${this.value}
@focus=${(evt: Event) => {
const target = evt.target as HTMLInputElement
this.setAttribute('active', '')
this.value = target.value = target.placeholder
}}
@blur=${(evt: Event) => {
const target = evt.target as HTMLInputElement
this.removeAttribute('active')
this.value = target.placeholder = target.value
}}
/>
</a>
</li>
`
}
renderButton() {
return html`
<li>
<star-button
id="li-text-button"
type="text"
variant=${this.variant}
label=${this.label}
></star-button>
</li>
`
}
renderSwitch() {
return html`
<li
@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>
<star-switch
id="li-switch"
?checked=${this.checked}
@change=${(evt: Event) => {
const target = evt.target as StarSwitch
this.checked = target.checked
}}
></star-switch>
</a>
</li>
`
}
render() {
switch (this.type) {
case LiType.BASE:
/* deprecated */ case LiType.BASE:
return this.getbase()
case LiType.BUBBLE_LABEL:
/* deprecated */ case LiType.BUBBLE_LABEL:
return this.getbubblelabel()
case LiType.ICON_LABEL:
/* deprecated */ case LiType.ICON_LABEL:
return this.geticonlabel()
case LiType.INFO_LABEL:
/* deprecated */ case LiType.INFO_LABEL:
return this.getinfolabel()
case LiType.ONLY_EDIT:
/* deprecated */ case LiType.ONLY_EDIT:
return this.getonlyedit()
case LiType.ONLY_LABEL:
/* deprecated */ case LiType.ONLY_LABEL:
return this.getonlylabel()
case LiType.ONLY_READ:
/* deprecated */ case LiType.ONLY_READ:
return this.getonlyread()
case LiType.SWITCH_LABEL:
/* deprecated */ case LiType.SWITCH_LABEL:
return this.getswitchlabel()
case LiType.EMBED_INFO:
this.dynamicSlot = html`
<slot name="info"></slot>
`
return this.renderGeneral()
case LiType.EMBED_SWITCH:
this.dynamicSlot = html`
<slot name="switch"></slot>
`
return this.renderGeneral()
case LiType.SELECTOR:
case LiType.EMBED_CARD:
case LiType.EMBED_CHECKBOX_GROUP:
// TBD
case LiType.INPUT:
return this.renderInput()
case LiType.BUTTON:
return this.renderButton()
case LiType.SWITCH:
return this.renderSwitch()
case LiType.DEFAULT:
case LiType.PRIMARY:
default:
console.error('unhanled 【star-li】 type')
return nothing
return this.renderGeneral()
}
}
}

20
src/components/switch/switch.ts
View File

@ -18,7 +18,7 @@ export class StarSwitch extends LitElement {
@property({type: Number}) leftx = 10000
@property({type: Number}) x = 0
@property({type: Boolean}) disabled = false
@property({type: Boolean}) checked = false
@property({type: Boolean, reflect: true}) checked = false
@property({type: String})
get switchcolor() {
return this._backgoundColor
@ -36,8 +36,7 @@ export class StarSwitch extends LitElement {
<input
?disabled="${this.disabled}"
?checked="${this.checked}"
@change=${(evt: Event) =>
(this.checked = (evt.target as HTMLInputElement).checked)}
@change=${this}
type="checkbox"
class="base"
id="base"
@ -54,6 +53,21 @@ export class StarSwitch extends LitElement {
</label>
`
}
handleEvent(evt: Event) {
switch (evt.type) {
case 'change':
this.checked = (evt.target as HTMLInputElement).checked
this.dispatchEvent(
new Event('change', {
bubbles: true,
composed: true,
})
)
break
}
}
private touchStart(evt: TouchEvent) {
console.log('##')
this.startx = evt.touches[0].clientX

6
src/test/panels/button/button-group.ts
View File

@ -20,7 +20,7 @@ export class PanelButtonGroup extends LitElement {
type="base"
style="border-radius: 25px !important;"
>
<star-button-group>
<star-button-group inheritRadius>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
@ -33,7 +33,7 @@ export class PanelButtonGroup extends LitElement {
type="base"
style="border-radius: 25px !important;"
>
<star-button-group>
<star-button-group inheritRadius>
<star-button
type="text"
variant="default"
@ -47,7 +47,7 @@ export class PanelButtonGroup extends LitElement {
label="空白的第二行按钮"
></star-button>
</star-button-group>
<star-button-group>
<star-button-group inheritRadius>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>

2
src/test/panels/fonts/star-icons.ts
View File

@ -1,4 +1,4 @@
import {css, html, LitElement} from 'lit'
import {html, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
import {map} from 'lit/directives/map.js'

25
src/test/panels/gesture/gesture.ts
View File

@ -1,7 +1,6 @@
import {customElement} from 'lit/decorators.js'
import {html, LitElement, CSSResultArray} from 'lit'
import {UlType} from '../../../components/ul/ul'
import {LiType} from '../../../components/li/li'
import {sharedStyles} from '../shared-styles'
import './examples/test-tap'
@ -14,29 +13,13 @@ export class PanelGesture extends LitElement {
render() {
return html`
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_LABEL}
label="tap轻触"
href="#test-tap"
></star-li>
<star-li label="tap轻触" href="#test-tap"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="pan滑动"
href="#test-pan"
></star-li>
<star-li label="pan滑动" href="#test-pan"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="swipe轻扫"
href="#test-swipe"
></star-li>
<star-li label="swipe轻扫" href="#test-swipe"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="手指组合"
href="#test-multitouches"
></star-li>
<star-li label="手指组合" href="#test-multitouches"></star-li>
</star-ul>
`
}

336
src/test/panels/li/li.ts Normal file
View File

@ -0,0 +1,336 @@
import {css, html, customElement, LitElement} from '@star-web-components/base'
import {
weibo,
garbage,
airplane,
wlan,
network,
bluetooth,
connection,
wallpaper,
brightness,
voice,
notification,
call,
battery,
application,
password,
security,
storage,
general,
help,
aboutself,
lockscreen,
privacy,
} from './static/icons'
import '@star-web-components/li'
import '@star-web-components/switch'
@customElement('panel-li')
export class PanelLi extends LitElement {
render() {
return html`
<h1>设置边栏</h1>
<div id="settings-side-bar">
<star-li type="switch" label="飞行模式">
<star-svg-icon slot="icon">${airplane}</star-svg-icon>
</star-li>
<star-li type="switch" label="飞行模式" checked>
<star-svg-icon slot="icon">${airplane}</star-svg-icon>
</star-li>
<star-li
type="switch"
label="飞行模式飞行模式飞行模式飞行模式飞行模式飞行模式飞行模式"
checked
>
<star-svg-icon slot="icon">${airplane}</star-svg-icon>
</star-li>
<star-li type="default" label="WLAN" value="Star.">
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLANWLANWLANWLANWLANWLANWLANWLANWLANWLANWLAN"
value="Star."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLAN"
value="StarStarStarStarStarStarStarStarStarStarStar."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLANWLANWLANWLANWLANWLANWLANWLANWLANWLANWLAN"
value="StarStarStarStarStarStarStarStarStarStarStar."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li type="default" label="移动网络">
<star-svg-icon slot="icon">${network}</star-svg-icon>
</star-li>
<star-li
type="default"
label="移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络"
>
<star-svg-icon slot="icon">${network}</star-svg-icon>
</star-li>
<star-li type="default" label="蓝牙">
<star-svg-icon slot="icon">${bluetooth}</star-svg-icon>
</star-li>
<star-li type="default" label="连接共享">
<star-svg-icon slot="icon">${connection}</star-svg-icon>
</star-li>
<star-li type="default" label="个性化定制">
<star-svg-icon slot="icon">${wallpaper}</star-svg-icon>
</star-li>
<star-li type="default" label="桌面与锁屏">
<star-svg-icon slot="icon">${lockscreen}</star-svg-icon>
</star-li>
<star-li type="default" label="显示和亮度">
<star-svg-icon slot="icon">${brightness}</star-svg-icon>
</star-li>
<star-li type="default" label="声音">
<star-svg-icon slot="icon">${voice}</star-svg-icon>
</star-li>
<star-li type="default" label="消息通知">
<star-svg-icon slot="icon">${notification}</star-svg-icon>
</star-li>
<star-li type="default" label="通话">
<star-svg-icon slot="icon">${call}</star-svg-icon>
</star-li>
<star-li type="default" label="电池">
<star-svg-icon slot="icon">${battery}</star-svg-icon>
</star-li>
<star-li type="default" label="应用与权限">
<star-svg-icon slot="icon">${application}</star-svg-icon>
</star-li>
<star-li type="default" label="生物识别与密码">
<star-svg-icon slot="icon">${password}</star-svg-icon>
</star-li>
<star-li type="default" label="隐私保护">
<star-svg-icon slot="icon">${privacy}</star-svg-icon>
</star-li>
<star-li type="default" label="安全可信管理">
<star-svg-icon slot="icon">${security}</star-svg-icon>
</star-li>
<star-li type="default" label="存储">
<star-svg-icon slot="icon">${storage}</star-svg-icon>
</star-li>
<star-li type="default" label="通用">
<star-svg-icon slot="icon">${general}</star-svg-icon>
</star-li>
<star-li type="default" label="辅助功能">
<star-svg-icon slot="icon">${help}</star-svg-icon>
</star-li>
<star-li type="default" label="关于本机">
<star-svg-icon slot="icon">${aboutself}</star-svg-icon>
</star-li>
</div>
<h1>两态交互</h1>
<star-li type="switch" label="控件项" checked></star-li>
<hr />
<star-li type="default" label="跳转项" href="#xxxx"></star-li>
<hr />
<star-li
type="primary"
label="已连接Wifi项"
icon="wifi-lock-4"
value="已连接"
></star-li>
<hr />
<star-li type="embed-info" label="Kylin" icon="wifi-lock-4">
<star-button
slot="info"
type="icon"
size="small"
icon="info"
@click=${() => console.log('info按钮被点击')}
></star-button>
</star-li>
<hr />
<star-li
type="primary"
label="Kylin"
square="2.4G/5G"
icon="wifi-lock-3"
value="已连接"
></star-li>
<hr />
<star-li
type="default"
icon="bug"
label="这是Label"
square="可选的方块标签"
value="普通灰色VALUE"
href="#xxxx"
></star-li>
<hr />
<star-li
type="primary"
icon="bug"
label="这是Label"
description="这是Description"
square="可选的方块标签"
value="强调蓝色VALUE"
href="#xxxx"
></star-li>
<hr />
<star-li
type="switch"
label="护眼模式"
description="开启后，可降低屏幕蓝光辐射，预防用眼疲劳"
checked
></star-li>
<hr />
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<hr />
<star-li type="button" label="添加其他网络"></star-li>
<hr />
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<hr />
<h1>外嵌入式组件</h1>
<star-li
type="embed-switch"
label="微博"
description="已开启所有通知"
split
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
<star-switch slot="switch" id="li-switch"></star-switch>
</star-li>
<h1>外嵌图标</h1>
<star-li
type="primary"
appicon="filemanager"
label="垃圾文件"
description="1.31 GB"
value="去清理"
href="#xxxx"
>
<star-svg-icon slot="icon">${garbage}</star-svg-icon>
</star-li>
<hr />
<star-li
type="default"
appicon="weibo"
label="微博"
value="3.64GB"
href="#xxxx"
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<h1>边界测试</h1>
<star-li
type="default"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
href="#xxxx"
></star-li>
<star-li
type="switch"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
></star-li>
<star-li
type="embed-info"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
icon="wifi-lock-4"
>
<star-button
slot="info"
type="icon"
size="small"
icon="info"
@click=${() => console.log('info按钮被点击')}
></star-button>
</star-li>
<star-li
type="primary"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
square="2.4G/5G"
icon="wifi-lock-4"
value="已连接"
></star-li>
<star-li
type="default"
appicon="weibo"
label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
value="3.64GB"
href="#xxxx"
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="default"
appicon="weibo"
label="微博"
value="3.64GBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBG"
href="#xxxx"
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="default"
appicon="weibo"
label="微博微博微博微博微博微博微博微博微博微博微博微微博"
value="3.64GBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBG"
href="#xxxx"
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="primary"
appicon="filemanager"
label="垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件"
description="1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB"
value="去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理"
href="#xxxx"
>
<star-svg-icon slot="icon">${garbage}</star-svg-icon>
</star-li>
<star-li
type="button"
variant="primary"
label="添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络"
></star-li>
<star-li
type="embed-switch"
label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
description="已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知"
split
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
<star-switch slot="switch" id="li-switch"></star-switch>
</star-li>
`
}
static get styles() {
return css`
:host {
--oc-icon-margin-right: var(--auto-20px);
}
div#settings-side-bar star-li {
--oc-li-padding-inline: var(--auto-24px);
width: var(--auto-424px);
border-radius: var(--auto-16px);
}
`
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-li': PanelLi
}
}

1403
src/test/panels/li/static/icons.ts Normal file
View File

File diff suppressed because one or more lines are too long

480
src/test/panels/root.ts
View File

@ -32,6 +32,7 @@ import './iconfont/iconfont'
import './indicators/deformation-indicator'
import './indicators/home-indicator'
import './indicators/point-indicator'
import './li/li'
import './locked/locked'
import './notification/notification'
import './overflowmenu/overflowmenu'
@ -64,433 +65,156 @@ export class PanelRoot extends LitElement {
}
rootPanel = html`
<star-ul
type=${UlType.HEADER_FOOTER}
title="完整栏"
text="可在上栏中填充任意类型的条目"
>
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
<star-ul type=${UlType.ONLY_HEADER} title="基础原子组件">
<star-li
label="StarButton-按钮"
icon="play-circle"
href="#button"
></star-li>
<hr />
<star-li label="StarSwitch-开关" icon="switch" href="#switch"></star-li>
<hr />
<star-li label="StarSlider-滑杆" icon="switch" href="#slider"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="带跳转的条目"
href="#about"
label="IndicatorPagePoint-页面圆点指示器"
icon="accessibility"
href="#point-indicator"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="带图标的条目"
icon="privacy"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="带颜色图标的条目"
icon="privacy"
iconcolor="green"
></star-li>
<hr />
<star-li
type=${LiType.BUBBLE_LABEL}
label="带气泡的条目"
bubble="1"
></star-li>
<hr />
<star-li
type=${LiType.BUBBLE_LABEL}
label="带气泡的条目"
bubble="99"
></star-li>
<hr />
<star-li
type=${LiType.BUBBLE_LABEL}
label="带气泡的条目"
bubble="999"
></star-li>
<hr />
<star-li
type=${LiType.BUBBLE_LABEL}
label="有软件更新可用"
href="#about"
bubble="1"
></star-li>
<hr />
<star-li
type=${LiType.BUBBLE_LABEL}
label="包含以上的条目"
icon="privacy"
iconcolor="orange"
href="#about"
bubble="8"
label="IndicatorPageDeformation-页面横条指示器"
icon="accessibility"
href="#deformation-indicator"
></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-ul type=${UlType.ONLY_HEADER} title="基础组件组">
<star-li
type=${LiType.ICON_LABEL}
label="通用"
label="StarButtonGroup-按钮组"
icon="play-circle"
iconcolor="red"
href="#general"
href="#button-group"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="复合组件">
<star-li label="StarLi-条目" icon="play-circle" href="#li"></star-li>
<hr />
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="功能组件">
<star-li label="锁屏-数字密码" icon="lock" href="#digicipher"></star-li>
<hr />
<star-li label="锁屏-图案密码" icon="lock" href="#pattern-view"></star-li>
<hr />
<star-li label="锁屏-已锁定" icon="lock" href="#locked"></star-li>
<hr />
<star-li label="锁屏-轮播图" icon="lock" href="#swiper"></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="开关"
icon="switch"
iconcolor="#EB7347"
href="#switch"
label="notification"
icon="play-circle"
href="#notification"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="弹窗组件">
<star-li
label="浏览器模态弹窗"
icon="play-circle"
href="#dialog"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="滑动条"
icon="switch"
iconcolor="#EB7347"
href="#slider"
></star-li>
<star-li label="prompt" icon="addons" href="#prompt"></star-li>
<hr />
<star-li label="AllConfirm" icon="messages" href="#confirm"></star-li>
<hr />
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li label="通用" icon="play-circle" href="#general"></star-li>
<hr />
<star-li label="单选框" icon="oo" href="#radio"></star-li>
<hr />
<star-li label="选择器" icon="select" href="#picker"></star-li>
<hr />
<star-li label="溢出菜单" icon="menu" href="#overflowmenu"></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="锁屏-数字密码"
icon="lock"
iconcolor="#EB7347"
href="#digicipher"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="锁屏-图案密码"
icon="lock"
iconcolor="#EB7347"
href="#pattern-view"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="锁屏-已锁定"
icon="lock"
iconcolor="#EB7347"
href="#locked"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="锁屏-轮播图"
icon="lock"
iconcolor="#EB7347"
href="#swiper"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="单选框"
icon="o"
iconcolor="black"
href="#radio"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="选择器"
icon="select"
iconcolor="blue"
href="#picker"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="prompt"
icon="addons"
iconcolor="green"
href="#prompt"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="溢出菜单"
icon="menu"
iconcolor="blue"
href="#overflowmenu"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="control-center"
icon="play-circle"
iconcolor="blue"
href="#control-center"
></star-li>
<hr />
<star-li label="overlay" icon="menu" href="#activeoverlay"></star-li>
<hr />
<star-li label="基础卡片组件" icon="play-circle" href="#card"></star-li>
<hr />
<hr />
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="小组件">
<star-li label="时钟" icon="alarm" href="#clock"></star-li>
<hr />
<star-li label="天气" icon="moon" href="#weather"></star-li>
<hr />
<star-li label="电池1" icon="battery-5" href="#battery"></star-li>
<hr />
<star-li label="电池2" icon="battery-5" href="#batterysquare"></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="手势">
<star-li label="手势框架" icon="user" href="#gesture"></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="动效">
<star-li label="动效" icon="add" href="#animation"></star-li>
<hr />
<star-li label="apng动效图" icon="play-circle" href="#apng"></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="图标和字体">
<star-li
type=${LiType.ICON_LABEL}
label="notification"
label="原gaia-icons图标字体库"
icon="play-circle"
iconcolor="blue"
href="#notification"
href="#fonts-gaia-icons"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="overlay"
icon="menu"
iconcolor="yellow"
href="#activeoverlay"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="关于"
icon="privacy"
iconcolor="purple"
href="#about"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="AllConfirm"
icon="messages"
iconcolor="green"
href="#confirm"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="毛玻璃"
icon="achievement"
iconcolor="gold"
href="#blur"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="高斯模糊"
icon="achievement"
iconcolor="gold"
href="#gauss"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="主屏"
icon="dismiss-keyboard"
iconcolor="#eee"
href="#homescreen"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="基础卡片组件"
label="新star-icons图标字体库"
icon="play-circle"
iconcolor="blue"
href="#card"
href="#fonts-star-icons"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="主屏容器"
icon="addons"
iconcolor="green"
href="#container"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="查看所有图标"
label="查看所有gaia-icons图标"
icon="all-day"
href="#icon"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="电池"
icon="battery-5"
iconcolor="blue"
href="#battery"
></star-li>
<star-li
type=${LiType.ICON_LABEL}
label="电池"
icon="battery-5"
iconcolor="red"
href="#batterysquare"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="动效"
icon="add"
iconcolor="purple"
href="#animation"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="IconFont图标"
label="IconFont图标方案(码点和SVG-symbol)"
icon="all-day"
iconcolor="yellow"
href="#iconfont"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="时钟">
<star-ul type=${UlType.ONLY_HEADER} title="模型">
<star-li
type=${LiType.ICON_LABEL}
label="时钟"
icon="alarm"
iconcolor="green"
href="#clock"
label="主屏"
icon="dismiss-keyboard"
href="#homescreen"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="天气"
icon="moon"
iconcolor="green"
href="#weather"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="手势">
<star-li
type=${LiType.ICON_LABEL}
label="手势框架"
icon="user"
iconcolor="red"
href="#gesture"
></star-li>
<star-li label="主屏容器" icon="addons" href="#container"></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="home指示器"
icon="accessibility"
iconcolor="blue"
href="#home-indicator"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="指示器">
<star-li
type=${LiType.ICON_LABEL}
label="页面圆点指示器"
icon="accessibility"
iconcolor="blue"
href="#point-indicator"
></star-li>
<star-ul type=${UlType.ONLY_HEADER} title="Labs">
<star-li label="毛玻璃" icon="achievement" href="#blur"></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="页面横条指示器"
icon="accessibility"
iconcolor="blue"
href="#deformation-indicator"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="生产用基础组件">
<star-li
type=${LiType.ICON_LABEL}
label="StarButton-按钮"
icon="play-circle"
iconcolor="red"
href="#button"
></star-li>
<star-li label="高斯模糊" icon="achievement" href="#gauss"></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="StarButtonGroup-按钮组"
icon="play-circle"
iconcolor="red"
href="#button-group"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="生产用弹窗">
<star-li
type=${LiType.ICON_LABEL}
label="浏览器模态弹窗"
icon="play-circle"
iconcolor="red"
href="#dialog"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="生产用图标字体">
<star-li
type=${LiType.ICON_LABEL}
label="原gaia-icons图标字体库"
icon="play-circle"
iconcolor="red"
href="#fonts-gaia-icons"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="新star-icons图标字体库"
icon="play-circle"
iconcolor="red"
href="#fonts-star-icons"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="apng动效图"
icon="play-circle"
iconcolor="red"
href="#apng"
></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_EDIT}
label="星光麒麟"
default="星光麒麟"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
<hr />
<star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.INFO_LABEL}
label="无线局域网地址"
value=${this.wlanMacAddress}
></star-li>
<hr />
<star-li
type=${LiType.INFO_LABEL}
label="可用容量"
value=${this.availableCapability}
></star-li>
</star-ul>
<star-ul
type=${UlType.HEADER_FOOTER}
title="其他设备"
text=${this.otherdevice}
>
<star-li type=${LiType.BASE}>自动加入热点</star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
<star-li
type=${LiType.INFO_LABEL}
label="硬件保障"
value="在保障范围内"
></star-li>
<hr />
<star-li
type=${LiType.INFO_LABEL}
label="技术支持"
value="在保障范围内"
></star-li>
</star-ul>
`