Merge branch 'master' into battery_px
This commit is contained in:
wangguoqing
commit
4122b5e825
|
|
@ -0,0 +1,8 @@
|
|||
export const loading_lm_1x = new URL('./loading-lm@1x.png', import.meta.url)
|
||||
.href
|
||||
export const loading_lm_2x = new URL('./loading-lm@2x.png', import.meta.url)
|
||||
.href
|
||||
export const loading_dm_1x = new URL('./loading-dm@1x.png', import.meta.url)
|
||||
.href
|
||||
export const loading_dm_2x = new URL('./loading-dm@2x.png', import.meta.url)
|
||||
.href
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
|
|
@ -1 +1,2 @@
|
|||
export * from './svg-icon.js'
|
||||
export * from './apng/index.js'
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../base/*.ts", "icons/*.ts"]
|
||||
"include": ["**/*.ts", "../base/*.ts", "icons/*.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
@ -39,6 +42,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
|
||||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
|
||||
--auto-54px: calc(54px / var(--hostDevicePixelRatio));
|
||||
--auto-55px: calc(55px / var(--hostDevicePixelRatio));
|
||||
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
|
||||
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -46,27 +50,33 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-60px: calc(60px / var(--hostDevicePixelRatio));
|
||||
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
||||
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
|
||||
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
|
||||
--auto-71px: calc(70px / var(--hostDevicePixelRatio));
|
||||
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
|
||||
--auto-68px: calc(68px / 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-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));
|
||||
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
||||
--auto-108px: calc(108px / var(--hostDevicePixelRatio));
|
||||
--auto-105px: calc(105px / var(--hostDevicePixelRatio));
|
||||
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
||||
--auto-116px: calc(116px / var(--hostDevicePixelRatio));
|
||||
--auto-118px: calc(118px / var(--hostDevicePixelRatio));
|
||||
--auto-124px: calc(124px / var(--hostDevicePixelRatio));
|
||||
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
|
||||
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
|
||||
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
|
||||
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
||||
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
|
||||
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
|
||||
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
|
||||
--auto-183px: calc(183px / var(--hostDevicePixelRatio));
|
||||
--auto-185px: calc(185px / var(--hostDevicePixelRatio));
|
||||
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
|
||||
--auto-188px: calc(188px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -82,25 +92,39 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-306px: calc(306px / var(--hostDevicePixelRatio));
|
||||
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
|
||||
--auto-320px: calc(320px / var(--hostDevicePixelRatio));
|
||||
--auto-328px: calc(328px / var(--hostDevicePixelRatio));
|
||||
--auto-334px: calc(334px / var(--hostDevicePixelRatio));
|
||||
--auto-340px: calc(340px / var(--hostDevicePixelRatio));
|
||||
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
|
||||
--auto-370px: calc(370px / var(--hostDevicePixelRatio));
|
||||
--auto-382px: calc(382px / var(--hostDevicePixelRatio));
|
||||
--auto-388px: calc(388px / var(--hostDevicePixelRatio));
|
||||
--auto-396px: calc(396px / var(--hostDevicePixelRatio));
|
||||
--auto-411px: calc(411px / var(--hostDevicePixelRatio));
|
||||
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
|
||||
--auto-424px: calc(424px / var(--hostDevicePixelRatio));
|
||||
--auto-436px: calc(436px / var(--hostDevicePixelRatio));
|
||||
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
|
||||
--auto-448px: calc(448px / var(--hostDevicePixelRatio));
|
||||
--auto-472px: calc(440px / var(--hostDevicePixelRatio));
|
||||
--auto-464px: calc(464px / var(--hostDevicePixelRatio));
|
||||
--auto-472px: calc(472px / var(--hostDevicePixelRatio));
|
||||
--auto-484px: calc(484px / var(--hostDevicePixelRatio));
|
||||
--auto-500px: calc(500px / var(--hostDevicePixelRatio));
|
||||
--auto-514px: calc(514px / var(--hostDevicePixelRatio));
|
||||
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
|
||||
--auto-524px: calc(520px / var(--hostDevicePixelRatio));
|
||||
--auto-534px: calc(534px / var(--hostDevicePixelRatio));
|
||||
--auto-543px: calc(543px / var(--hostDevicePixelRatio));
|
||||
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
|
||||
--auto-620px: calc(620px / var(--hostDevicePixelRatio));
|
||||
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
|
||||
--auto-736px: calc(736px / var(--hostDevicePixelRatio));
|
||||
--auto-781px: calc(781px / var(--hostDevicePixelRatio));
|
||||
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
|
||||
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
|
||||
--auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
|
||||
--auto-1592px: calc(1592px / var(--hostDevicePixelRatio));
|
||||
--auto-1760px: calc(1760px / var(--hostDevicePixelRatio));
|
||||
--auto-1920px: calc(1920px / var(--hostDevicePixelRatio));
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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: min-content;
|
||||
padding-inline-start: var(--auto-56px);
|
||||
padding-inline-end: var(--auto-56px);
|
||||
min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
|
||||
padding-inline: var(--oc-text-padding-inline, var(--auto-56px));
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './clock.js'
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"default": "./index.js"
|
||||
},
|
||||
"./confirm.js": {
|
||||
"default": "./clock.js"
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
|
|
@ -11,6 +11,7 @@ export default css`
|
|||
line-height: var(--auto-36px);
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: var(--auto-10px) 0;
|
||||
max-height: var(--auto-200px);
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export default css`
|
|||
background: #ffffff;
|
||||
border-radius: var(--auto-14px);
|
||||
border: var(--auto-2px) solid var(--theme-blue);
|
||||
padding-inline-start: var(--auto-28px);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -33,6 +32,7 @@ export default css`
|
|||
caret-color: var(--theme-blue);
|
||||
font-weight: bold;
|
||||
font-size: var(--auto-26px);
|
||||
margin-left: var(--auto-28px);
|
||||
}
|
||||
|
||||
star-button#delete {
|
||||
|
|
@ -50,6 +50,7 @@ export default css`
|
|||
overflow: auto;
|
||||
font-weight: bold;
|
||||
font-size: var(--auto-28px);
|
||||
text-align: center;
|
||||
}
|
||||
.star-prompt-subtitle {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export const sharedStyles: CSSResult = css`
|
|||
p {
|
||||
position: absolute;
|
||||
font-family: 'OPPOSans';
|
||||
font-size: var(--auto-40px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
|
|
@ -58,9 +59,9 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
button {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: var(--auto-36px);
|
||||
width: var(--auto-140px);
|
||||
height: var(--auto-140px);
|
||||
font-size: var(--auto-70px);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
/*button背景无色*/
|
||||
|
|
@ -94,13 +95,13 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
#textcenter {
|
||||
text-align: center;
|
||||
font-size: var(--auto-40px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.topText {
|
||||
font-size: 20px;
|
||||
height: var(--auto-53px);
|
||||
line-height: var(--auto-53px);
|
||||
width: var(--auto-160px);
|
||||
left: calc(50% - var(--auto-160px) / 2);
|
||||
top: 31%;
|
||||
}
|
||||
.spanContainer {
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.spanContainer.style.visibility = `visible`
|
||||
this.parent.style.visibility = `visible`
|
||||
this.addEventListener('passcode-create-success', this)
|
||||
this.addEventListener('passcode-verify-success', this)
|
||||
this.addEventListener('passcode-verify-error', this)
|
||||
this.addEventListener('digicipher-passcode-verify-success', this)
|
||||
this.addEventListener('digicipher-passcode-verify-error', this)
|
||||
this.addEventListener('passcode-reset', this)
|
||||
}
|
||||
|
||||
|
|
@ -119,20 +119,19 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.parent.style.visibility = `hidden`
|
||||
this.changeText = '保存成功'
|
||||
break
|
||||
case 'passcode-verify-success':
|
||||
case 'digicipher-passcode-verify-success':
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
break
|
||||
case 'passcode-verify-error':
|
||||
case 'digicipher-passcode-verify-error':
|
||||
this.errors = event.detail.value
|
||||
//当密码失败三次后
|
||||
if (this.errors == 3) {
|
||||
console.log('进入已锁定页面')
|
||||
//当密码失败5次后
|
||||
if (this.errors == 5) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passcode-error-third', {
|
||||
new CustomEvent('star-digicipher-passcode-error-fifth', {
|
||||
detail: {
|
||||
value: true,
|
||||
},
|
||||
|
|
@ -252,7 +251,7 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passcode-verify', {
|
||||
new CustomEvent('star-digicipher-passwd', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export class DropDownMenu extends LitElement {
|
|||
id="edit"
|
||||
type=${IconControlBarType.BASE_WITHOUT_BORDER}
|
||||
icon="compose"
|
||||
disabled="true"
|
||||
></icon-control-bar>
|
||||
<icon-control-bar
|
||||
id="settings"
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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 |
|
||||
-----------------
|
||||
```
|
||||
|
|
@ -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, var(--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);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,10 +83,7 @@ export class StarNotificationGroup extends LitElement {
|
|||
this.setAttribute('show', 'false')
|
||||
firstChild.setAttribute('notificationType', 'one-notification')
|
||||
firstChild.withArrowUp = false
|
||||
firstChild.removeEventListener(
|
||||
'notification-click',
|
||||
allNotificationshown
|
||||
)
|
||||
firstChild.removeEventListener('notification-tap', allNotificationshown)
|
||||
} else if (slotLen > 1) {
|
||||
let lastChild = slotElements[slotLen - 1] as StarNotification
|
||||
|
||||
|
|
@ -106,7 +103,7 @@ export class StarNotificationGroup extends LitElement {
|
|||
}
|
||||
|
||||
// 仅对一条以上的进行监听处理
|
||||
firstChild.addEventListener('notification-click', allNotificationshown)
|
||||
firstChild.addEventListener('notification-tap', allNotificationshown)
|
||||
|
||||
let otherChild = Array.from(slotElements as StarNotification[]).filter(
|
||||
(child) => {
|
||||
|
|
@ -122,7 +119,7 @@ export class StarNotificationGroup extends LitElement {
|
|||
)
|
||||
;(child as StarNotification).setAttribute('radiusType', '')
|
||||
;(child as StarNotification).removeEventListener(
|
||||
'notification-click',
|
||||
'notification-tap',
|
||||
allNotificationshown
|
||||
)
|
||||
})
|
||||
|
|
@ -154,20 +151,54 @@ export class StarNotificationGroup extends LitElement {
|
|||
}
|
||||
|
||||
let isShow = this.getAttribute('show') == 'true'
|
||||
console.log('hellowq allNotificationshown isShow: ', isShow)
|
||||
if (isShow) {
|
||||
// 当前是展开状态，点击需折叠
|
||||
this.setAttribute('show', 'false')
|
||||
let self = this
|
||||
firstChild.setAttribute('radiusType', 'border-radius')
|
||||
firstChild.withArrowUp = false
|
||||
firstChild.setAttribute('notificationType', 'more-notifiactions-first')
|
||||
this.slotElements.forEach((element, index) => {
|
||||
if (element !== firstChild) {
|
||||
;(element as StarNotification).classList.add('animation-out')
|
||||
element.addEventListener('animationend', function tEnd() {
|
||||
if (index == self.slotElements.length - 1) {
|
||||
self.setAttribute('show', 'false')
|
||||
}
|
||||
;(element as StarNotification).classList.remove('animation-out')
|
||||
element.removeEventListener('animationend', tEnd)
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.setAttribute('show', 'true')
|
||||
this.slotElements.forEach((element) => {
|
||||
if (element !== firstChild) {
|
||||
;(element as StarNotification).classList.add('animation-in')
|
||||
element.addEventListener('animationend', function tEnd() {
|
||||
element.removeEventListener('animationend', tEnd)
|
||||
;(element as StarNotification).classList.remove('animation-in')
|
||||
})
|
||||
}
|
||||
})
|
||||
firstChild.setAttribute('radiusType', 'top-border-radius')
|
||||
firstChild.withArrowUp = true
|
||||
firstChild.setAttribute('notificationType', 'more-notifiactions')
|
||||
}
|
||||
}
|
||||
|
||||
disappearing(callback?: Function) {
|
||||
this.classList.add('disappearing')
|
||||
let self = this
|
||||
this.addEventListener('animationend', function tranEnd() {
|
||||
self.removeEventListener('animationend', tranEnd)
|
||||
self.classList.remove('disappearing')
|
||||
if (callback) {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
|
|
@ -187,9 +218,51 @@ export class StarNotificationGroup extends LitElement {
|
|||
display: block;
|
||||
}
|
||||
|
||||
:host(.fadein) {
|
||||
animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
:host(.fadeout) {
|
||||
animation: hide 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
:host([show='true']) ::slotted(:not(:last-child)) {
|
||||
border-bottom: 0.08vw solid rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
:host(.disappearing) {
|
||||
animation: disappearing 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
@keyframes disappearing {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {
|
||||
html,
|
||||
LitElement,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
CSSResultArray,
|
||||
} from 'lit'
|
||||
import {html, HTMLTemplateResult, nothing, CSSResultArray} from 'lit'
|
||||
import {
|
||||
customElement,
|
||||
property,
|
||||
|
|
@ -13,6 +7,7 @@ import {
|
|||
state,
|
||||
} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './notificationstyle.js'
|
||||
import {StarBaseElement} from '../base'
|
||||
// ONE ： 单条通知，notification-group展开时第一条notification类型
|
||||
// MORE ： notification-group中除第一条以外的notification类型
|
||||
// MORE_FIRST: notification-group折叠时第一条notification类型
|
||||
|
|
@ -32,7 +27,7 @@ export enum RadiusType {
|
|||
}
|
||||
|
||||
@customElement('star-notification')
|
||||
export class StarNotification extends LitElement {
|
||||
export class StarNotification extends StarBaseElement {
|
||||
// 公共属性
|
||||
@property({type: String}) id = ''
|
||||
@property({type: String}) _timestamp = ''
|
||||
|
|
@ -60,6 +55,8 @@ export class StarNotification extends LitElement {
|
|||
@property({type: Boolean}) isToast = false
|
||||
@property({type: Boolean}) btnShown = false
|
||||
@property({type: Number}) notificationPosition = 0
|
||||
@property({type: Number}) width = 0
|
||||
@property({type: Number}) widthleft = 0
|
||||
@property({type: Number}) velocityThreshold = 0.8
|
||||
@query('.notification') notification!: HTMLDivElement
|
||||
@query('.btn-tool') btnTool!: HTMLDivElement
|
||||
|
|
@ -92,8 +89,21 @@ export class StarNotification extends LitElement {
|
|||
this._timestamp = value
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.startGestureDetector()
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.updateComplete.then(() => {
|
||||
this.addEventListener('swipeleft', this)
|
||||
this.addEventListener('swiperight', this)
|
||||
this.addEventListener('holdstart', this)
|
||||
this.addEventListener('holdmove', this)
|
||||
this.addEventListener('holdend', this)
|
||||
})
|
||||
this.notificationPosition = this.getBoundingClientRect().right
|
||||
this.width = this.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
render(): HTMLTemplateResult | typeof nothing {
|
||||
|
|
@ -410,6 +420,7 @@ export class StarNotification extends LitElement {
|
|||
self.btnShown = true
|
||||
}
|
||||
)
|
||||
this.widthleft = this.width - translateX
|
||||
} else if (touchPosX > 0) {
|
||||
// if (touchPosX > 44) {
|
||||
// (this.btnTool.children[0] as any).style.opacity = 0.6;
|
||||
|
|
@ -443,9 +454,15 @@ export class StarNotification extends LitElement {
|
|||
case 'click':
|
||||
event.stopPropagation()
|
||||
let target = event.target as HTMLElement
|
||||
this.notification.style.transform = ''
|
||||
switch (target.dataset.icon) {
|
||||
case 'delete':
|
||||
this.btnTool.classList.add('deletebybtn')
|
||||
this.notification.style.transform =
|
||||
'translateX(-' + this.widthleft + 'px)'
|
||||
this.btnTool.addEventListener('transitionend', function tEnd() {
|
||||
self.btnTool.removeEventListener('transitionend', tEnd)
|
||||
self.btnTool.classList.remove('deletebybtn')
|
||||
})
|
||||
target.setAttribute('clicked', 'true')
|
||||
target.addEventListener('transitionend', function tranEnd() {
|
||||
target.removeEventListener('transitionend', tranEnd)
|
||||
|
|
@ -478,30 +495,43 @@ export class StarNotification extends LitElement {
|
|||
})
|
||||
break
|
||||
default:
|
||||
this.notification.setAttribute('clicked', 'true')
|
||||
this.notification.addEventListener(
|
||||
'transitionend',
|
||||
function tranEnd() {
|
||||
self.notification.removeEventListener(
|
||||
'transitionend',
|
||||
tranEnd
|
||||
)
|
||||
self.notification.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-click', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('notification-tap', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
break
|
||||
}
|
||||
break
|
||||
case 'holdstart':
|
||||
this.notification.classList.add('click-start')
|
||||
break
|
||||
case 'holdend':
|
||||
this.notification.classList.remove('click-start')
|
||||
this.notification.classList.add('click-end')
|
||||
this.notification.addEventListener(
|
||||
'transitionend',
|
||||
function tranEnd() {
|
||||
self.notification.removeEventListener('transitionend', tranEnd)
|
||||
self.notification.classList.remove('click-end')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-click', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
switch (event.type) {
|
||||
|
|
|
|||
|
|
@ -38,11 +38,18 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.notification {
|
||||
transition: transform 0.6s;
|
||||
// transition: transform 0.6s;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.deletebybtn {
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: opacity translateX(-2.5vw);
|
||||
// animation: notification-disappear 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.notification[clicked] {
|
||||
transition: transform 0.1s;
|
||||
transform: scale(0.95);
|
||||
|
|
@ -515,4 +522,43 @@ export const sharedStyles: CSSResult = css`
|
|||
color: var(--single-text-color-dm);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-disappear {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.click-start {
|
||||
transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: scale(0.95);
|
||||
background: var(--notification-background-active);
|
||||
}
|
||||
|
||||
.click-end {
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
:host(.animation-in) {
|
||||
animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
:host(.animation-out) {
|
||||
animation: notification-disappear 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
/* :host {
|
||||
--top-dir: 40%;
|
||||
}
|
||||
} */
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
|
@ -15,7 +15,6 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
p {
|
||||
position: absolute;
|
||||
width: var(--auto-160px);
|
||||
line-height: var(--auto-53px);
|
||||
font-size: var(--auto-40px);
|
||||
height: var(--auto-53px);
|
||||
|
|
@ -32,7 +31,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
#canvasdown {
|
||||
position: relative;
|
||||
top: var(--top-dir);
|
||||
top: var(--auto-781px);
|
||||
}
|
||||
.textTop {
|
||||
top: 31%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
|
|||
|
||||
@customElement('star-pattern-view')
|
||||
export class StarPatternView extends StarBaseElement {
|
||||
_topDir: string = ''
|
||||
/* _topDir: string = '' */
|
||||
_getRed: boolean = false
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
@ -17,6 +17,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
}
|
||||
@query('canvas') canvas!: HTMLCanvasElement
|
||||
@query('.textTop') saveP!: HTMLParagraphElement
|
||||
@query('#canvasdown') canvasdown!: HTMLDivElement
|
||||
@property({attribute: false}) cxt!: CanvasRenderingContext2D
|
||||
@property({type: Boolean})
|
||||
get getRed() {
|
||||
|
|
@ -48,7 +49,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
@property({type: String}) changeText = ''
|
||||
@property({type: String}) cancel = '取消'
|
||||
@property({type: String}) lessfourinfo = ''
|
||||
@property({type: String})
|
||||
/* @property({type: String})
|
||||
get topDir() {
|
||||
return this._topDir
|
||||
}
|
||||
|
|
@ -56,7 +57,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
this.style.setProperty('--top-dir', value)
|
||||
this._topDir = value
|
||||
this.top = parseInt(this._topDir)
|
||||
}
|
||||
} */
|
||||
|
||||
render() {
|
||||
if (!this.saveMode) {
|
||||
|
|
@ -99,8 +100,8 @@ export class StarPatternView extends StarBaseElement {
|
|||
): void {
|
||||
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
|
||||
if (this.saveMode) {
|
||||
this.topDir = '34%'
|
||||
this.saveP.style.setProperty('top', '27.8%')
|
||||
this.canvasdown.style.setProperty('top', 'var(--auto-543px)')
|
||||
this.saveP.style.setProperty('top', 'var(--auto-411px)')
|
||||
}
|
||||
//canvas的高度和宽度都是
|
||||
this.canvas.width = this.canvasWidth
|
||||
|
|
@ -113,8 +114,8 @@ export class StarPatternView extends StarBaseElement {
|
|||
this.Draw()
|
||||
this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
|
||||
this.addEventListener('passcode-create-success', this)
|
||||
this.addEventListener('passcode-verify-success', this)
|
||||
this.addEventListener('passcode-verify-error', this)
|
||||
this.addEventListener('pattern-passcode-verify-success', this)
|
||||
this.addEventListener('pattern-passcode-verify-error', this)
|
||||
}
|
||||
|
||||
handleEvent(event: CustomEvent) {
|
||||
|
|
@ -122,22 +123,21 @@ export class StarPatternView extends StarBaseElement {
|
|||
case 'passcode-create-success':
|
||||
this.changeText = '密码设置成功'
|
||||
break
|
||||
case 'passcode-verify-success':
|
||||
case 'pattern-passcode-verify-success':
|
||||
console.log('图案正确')
|
||||
this.getRed = false
|
||||
this.changeText = '绘制图案'
|
||||
break
|
||||
case 'passcode-verify-error':
|
||||
case 'pattern-passcode-verify-error':
|
||||
this.passwd = event.detail.passwd
|
||||
this.getRed = true
|
||||
this.changeText = '绘制图案错误'
|
||||
//当密码失败三次后
|
||||
this.errors = event.detail.value
|
||||
if (this.errors == 3) {
|
||||
console.log('进入已锁定页面')
|
||||
if (this.errors == 5) {
|
||||
this.initialState()
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-passwd-error-third', {
|
||||
new CustomEvent('star-pattern-view-passwd-error-fifth', {
|
||||
detail: {
|
||||
value: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import {html, customElement, LitElement} from '@star-web-components/base'
|
||||
import {
|
||||
loading_lm_1x,
|
||||
loading_lm_2x,
|
||||
loading_dm_1x,
|
||||
loading_dm_2x,
|
||||
} from '@star-web-components/asset'
|
||||
|
||||
@customElement('panel-apng')
|
||||
export class PanelApng extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<h1>1X - 50KB</h1>
|
||||
<div style="background: #fff">
|
||||
<img src=${loading_lm_1x} />
|
||||
</div>
|
||||
<div style="background: #000">
|
||||
<img src=${loading_dm_1x} />
|
||||
</div>
|
||||
|
||||
<h1>2X - 125KB</h1>
|
||||
<div style="background: #fff">
|
||||
<img src=${loading_lm_2x} />
|
||||
</div>
|
||||
<div style="background: #000">
|
||||
<img src=${loading_dm_2x} />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-apng': PanelApng
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ export class PanelFontsStarIcons extends LitElement {
|
|||
'2g',
|
||||
'3g',
|
||||
'4g',
|
||||
'IP_lm',
|
||||
'ip',
|
||||
'accessibility',
|
||||
'achievement',
|
||||
'add-contact',
|
||||
|
|
@ -437,6 +437,7 @@ export class PanelFontsStarIcons extends LitElement {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<h1><center>基础</center></h1>
|
||||
<star-li type="base">
|
||||
${map(
|
||||
this.icons,
|
||||
|
|
@ -449,37 +450,22 @@ export class PanelFontsStarIcons extends LitElement {
|
|||
`
|
||||
)}
|
||||
</star-li>
|
||||
<h1><center>变色</center></h1>
|
||||
<star-li type="base">
|
||||
${map(
|
||||
this.icons,
|
||||
(iconname, _) => html`
|
||||
<star-button
|
||||
type="icon"
|
||||
icon=${iconname}
|
||||
size="small"
|
||||
style="color: red;"
|
||||
></star-button>
|
||||
`
|
||||
)}
|
||||
</star-li>
|
||||
`
|
||||
}
|
||||
|
||||
styles = css`
|
||||
a {
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: #222;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-decoration: none;
|
||||
border: solid 1px #eee;
|
||||
text-align: center;
|
||||
margin: -1px;
|
||||
background: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 30px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@ import '../../components/ul/ul'
|
|||
import '../../components/li/li'
|
||||
|
||||
import './about/about'
|
||||
import './apng/apng'
|
||||
import './activeoverlay/activeoverlay'
|
||||
import './battery/battery'
|
||||
import './battery-square/battery-square'
|
||||
|
|
@ -27,9 +28,11 @@ import './gauss_canvas/gauss-blur'
|
|||
import './general/general'
|
||||
import './gesture/gesture'
|
||||
import './icon/icon'
|
||||
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'
|
||||
|
|
@ -41,7 +44,6 @@ import './slider/slider'
|
|||
import './switch/switch'
|
||||
import './toast/toast'
|
||||
import './weather/weather'
|
||||
import './iconfont/iconfont'
|
||||
import './swiper/swiper'
|
||||
|
||||
import './animation/animation'
|
||||
|
|
@ -63,425 +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>
|
||||
</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>
|
||||
`
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue