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 './svg-icon.js'
|
||||||
|
export * from './apng/index.js'
|
||||||
|
|
|
||||||
|
|
@ -4,5 +4,5 @@
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"rootDir": "../../"
|
"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);
|
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
|
||||||
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
|
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
|
||||||
--auto-2px: calc(2px / var(--hostDevicePixelRatio));
|
--auto-2px: calc(2px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-3px: calc(3px / var(--hostDevicePixelRatio));
|
||||||
--auto-4px: calc(4px / var(--hostDevicePixelRatio));
|
--auto-4px: calc(4px / var(--hostDevicePixelRatio));
|
||||||
--auto-5px: calc(5px / var(--hostDevicePixelRatio));
|
--auto-5px: calc(5px / var(--hostDevicePixelRatio));
|
||||||
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
|
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
|
||||||
|
|
@ -18,6 +19,8 @@ export const autoPxStyle: CSSResult = css`
|
||||||
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
|
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
|
||||||
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
||||||
--auto-20px: calc(20px / 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-24px: calc(24px / var(--hostDevicePixelRatio));
|
||||||
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
||||||
--auto-25_6px: calc(25.6px / 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-48px: calc(48px / var(--hostDevicePixelRatio));
|
||||||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||||
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
|
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-54px: calc(54px / var(--hostDevicePixelRatio));
|
||||||
--auto-55px: calc(55px / var(--hostDevicePixelRatio));
|
--auto-55px: calc(55px / var(--hostDevicePixelRatio));
|
||||||
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
|
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
|
||||||
--auto-57_6px: calc(57.6px / 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-60px: calc(60px / var(--hostDevicePixelRatio));
|
||||||
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
||||||
--auto-66px: calc(66px / 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-68px: calc(68px / var(--hostDevicePixelRatio));
|
||||||
--auto-74px: calc(66px / var(--hostDevicePixelRatio));
|
--auto-74px: calc(66px / var(--hostDevicePixelRatio));
|
||||||
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
|
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-77px: calc(77px / var(--hostDevicePixelRatio));
|
||||||
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
|
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
|
||||||
--auto-82px: 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-85px: calc(85px / var(--hostDevicePixelRatio));
|
||||||
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
|
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
|
||||||
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
|
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
|
||||||
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-108px: calc(108px / var(--hostDevicePixelRatio));
|
||||||
--auto-105px: calc(105px / var(--hostDevicePixelRatio));
|
--auto-105px: calc(105px / var(--hostDevicePixelRatio));
|
||||||
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
||||||
--auto-116px: calc(116px / 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-128px: calc(128px / var(--hostDevicePixelRatio));
|
||||||
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
|
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
|
||||||
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
||||||
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
|
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
|
||||||
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
|
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
|
||||||
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
|
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-183px: calc(183px / var(--hostDevicePixelRatio));
|
||||||
--auto-185px: calc(185px / var(--hostDevicePixelRatio));
|
--auto-185px: calc(185px / var(--hostDevicePixelRatio));
|
||||||
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
|
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
|
||||||
--auto-188px: calc(188px / var(--hostDevicePixelRatio));
|
--auto-188px: calc(188px / var(--hostDevicePixelRatio));
|
||||||
|
|
@ -82,25 +92,39 @@ export const autoPxStyle: CSSResult = css`
|
||||||
--auto-306px: calc(306px / var(--hostDevicePixelRatio));
|
--auto-306px: calc(306px / var(--hostDevicePixelRatio));
|
||||||
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
|
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
|
||||||
--auto-320px: calc(320px / var(--hostDevicePixelRatio));
|
--auto-320px: calc(320px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-328px: calc(328px / var(--hostDevicePixelRatio));
|
||||||
--auto-334px: calc(334px / var(--hostDevicePixelRatio));
|
--auto-334px: calc(334px / var(--hostDevicePixelRatio));
|
||||||
--auto-340px: calc(340px / var(--hostDevicePixelRatio));
|
--auto-340px: calc(340px / var(--hostDevicePixelRatio));
|
||||||
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
|
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
|
||||||
--auto-370px: calc(370px / var(--hostDevicePixelRatio));
|
--auto-370px: calc(370px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-382px: calc(382px / var(--hostDevicePixelRatio));
|
||||||
--auto-388px: calc(388px / var(--hostDevicePixelRatio));
|
--auto-388px: calc(388px / var(--hostDevicePixelRatio));
|
||||||
--auto-396px: calc(396px / var(--hostDevicePixelRatio));
|
--auto-396px: calc(396px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-411px: calc(411px / var(--hostDevicePixelRatio));
|
||||||
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
|
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-424px: calc(424px / var(--hostDevicePixelRatio));
|
||||||
--auto-436px: calc(436px / var(--hostDevicePixelRatio));
|
--auto-436px: calc(436px / var(--hostDevicePixelRatio));
|
||||||
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
|
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
|
||||||
--auto-448px: calc(448px / 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-500px: calc(500px / var(--hostDevicePixelRatio));
|
||||||
--auto-514px: calc(514px / var(--hostDevicePixelRatio));
|
--auto-514px: calc(514px / var(--hostDevicePixelRatio));
|
||||||
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
|
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
|
||||||
--auto-524px: calc(520px / var(--hostDevicePixelRatio));
|
--auto-524px: calc(520px / var(--hostDevicePixelRatio));
|
||||||
--auto-534px: calc(534px / var(--hostDevicePixelRatio));
|
--auto-534px: calc(534px / var(--hostDevicePixelRatio));
|
||||||
|
--auto-543px: calc(543px / var(--hostDevicePixelRatio));
|
||||||
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
|
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
|
||||||
--auto-620px: calc(620px / var(--hostDevicePixelRatio));
|
--auto-620px: calc(620px / var(--hostDevicePixelRatio));
|
||||||
--auto-640px: calc(640px / 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-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
|
* btn = button
|
||||||
* bgc = background-color
|
* bgc = background-color
|
||||||
* bs = box-shadow
|
* bs = box-shadow
|
||||||
|
* oc = out-control 外部样式控制，用于侵入性修改
|
||||||
*
|
*
|
||||||
* 模块划分原则：
|
* 模块划分原则：
|
||||||
* 基础模块 - 基础模块存放具有通用意义的变量
|
* 基础模块 - 基础模块存放具有通用意义的变量
|
||||||
|
|
@ -35,6 +36,7 @@ const baseStyle = css`
|
||||||
:root {
|
:root {
|
||||||
--devicePixelRatio: 2;
|
--devicePixelRatio: 2;
|
||||||
--text-font-family: 'OPPPSans';
|
--text-font-family: 'OPPPSans';
|
||||||
|
--icon-font: 'star-icons';
|
||||||
|
|
||||||
/*****************************线性渐变*************************************/
|
/*****************************线性渐变*************************************/
|
||||||
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
|
--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);
|
--full-pop-up-mask: rgba(24, 24, 24, 0.35);
|
||||||
|
|
||||||
/********************************共用***************************************/
|
/********************************共用***************************************/
|
||||||
|
--split-line-color: var(--opacity-black-09);
|
||||||
|
|
||||||
/* 全/radio */
|
/* 全/radio */
|
||||||
--bgc-radio-off: rgba(38, 38, 38, 0.25);
|
--bgc-radio-off: rgba(38, 38, 38, 0.25);
|
||||||
--bgc-radio-on: rgba(29, 152, 240, 1);
|
--bgc-radio-on: rgba(29, 152, 240, 1);
|
||||||
|
|
@ -448,6 +452,18 @@ const baseComponentStyle = css`
|
||||||
--dialog-content: var(--font-heading-black);
|
--dialog-content: var(--font-heading-black);
|
||||||
--dialog-checkbox: var(--font-sec-auxiliary-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 */
|
/* Radio */
|
||||||
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
||||||
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-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
|
prototype: T
|
||||||
}
|
}
|
||||||
|
|
||||||
let currentHoverTarger!: StarBaseElement
|
let currentHoverTarget!: StarBaseElement
|
||||||
|
|
||||||
function handleHover(e: Event) {
|
function handleHover(e: Event) {
|
||||||
// Firefox 仅支持 e.composedPath()
|
// Firefox 仅支持 e.composedPath()
|
||||||
|
|
@ -38,16 +38,30 @@ function handleHover(e: Event) {
|
||||||
while (path[i++] !== undefined) {
|
while (path[i++] !== undefined) {
|
||||||
const target = path[i] as Element
|
const target = path[i] as Element
|
||||||
switch (target?.tagName) {
|
switch (target?.tagName) {
|
||||||
|
/**
|
||||||
|
* 注意：star-button为原子化组成单位，遵循同一时刻只有一个单位被命中的原则
|
||||||
|
* 在被触摸击中时将中止事件传递！
|
||||||
|
* 绕开此行为可在包含其的组件中添加:
|
||||||
|
* ::slotted::(star-button) {
|
||||||
|
* pointer-events: none;
|
||||||
|
* }
|
||||||
|
*/
|
||||||
case 'STAR-BUTTON':
|
case 'STAR-BUTTON':
|
||||||
currentHoverTarger = target as StarBaseElement
|
case 'STAR-SWITCH':
|
||||||
currentHoverTarger?.onhover()
|
e.stopImmediatePropagation()
|
||||||
|
currentHoverTarget = target as StarBaseElement
|
||||||
|
currentHoverTarget?.onhover()
|
||||||
|
return
|
||||||
|
case 'STAR-LI':
|
||||||
|
currentHoverTarget = target as StarBaseElement
|
||||||
|
currentHoverTarget?.onhover()
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleHoverEnd() {
|
function handleHoverEnd() {
|
||||||
currentHoverTarger?.onhoverend()
|
currentHoverTarget?.onhoverend()
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleContextMenu(e: Event) {
|
function handleContextMenu(e: Event) {
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ export default [
|
||||||
/* fit-content 同样适用，但firefox不支持 */
|
/* fit-content 同样适用，但firefox不支持 */
|
||||||
width: min-content;
|
width: min-content;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
:host([type='icononly']) {
|
:host([type='icononly']) {
|
||||||
|
|
@ -25,7 +26,7 @@ export default [
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: inherit;
|
min-width: inherit;
|
||||||
min-height: inherit;
|
min-height: inherit;
|
||||||
text-align: center;
|
text-align: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
|
|
@ -141,8 +142,7 @@ export default [
|
||||||
/* 按钮共性 */
|
/* 按钮共性 */
|
||||||
:host([type='normal']) button,
|
:host([type='normal']) button,
|
||||||
:host([type='pure'][label]) button {
|
:host([type='pure'][label]) button {
|
||||||
padding-inline-start: var(--auto-32px);
|
padding-inline: var(--auto-32px);
|
||||||
padding-inline-end: var(--auto-32px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -150,13 +150,11 @@ export default [
|
||||||
}
|
}
|
||||||
:host([type='normal']) button.middle,
|
:host([type='normal']) button.middle,
|
||||||
:host([type='pure'][label]) button.middle {
|
:host([type='pure'][label]) button.middle {
|
||||||
padding-inline-start: var(--auto-40px);
|
padding-inline: var(--auto-40px);
|
||||||
padding-inline-end: var(--auto-40px);
|
|
||||||
}
|
}
|
||||||
:host([type='normal']) button.large,
|
:host([type='normal']) button.large,
|
||||||
:host([type='pure'][label]) button.large {
|
:host([type='pure'][label]) button.large {
|
||||||
padding-inline-start: var(--auto-48px);
|
padding-inline: var(--auto-48px);
|
||||||
padding-inline-end: var(--auto-48px);
|
|
||||||
}
|
}
|
||||||
:host([type='pure']) button::before,
|
:host([type='pure']) button::before,
|
||||||
:host([type='icon']) button::before,
|
:host([type='icon']) button::before,
|
||||||
|
|
@ -302,14 +300,13 @@ export default [
|
||||||
/* text 类型按钮 */
|
/* text 类型按钮 */
|
||||||
:host([type='text']) {
|
:host([type='text']) {
|
||||||
font-size: var(--auto-28px);
|
font-size: var(--auto-28px);
|
||||||
min-height: var(--auto-112px);
|
min-height: var(--oc-text-min-height, var(--auto-112px));
|
||||||
max-height: var(--auto-112px);
|
max-height: var(--oc-text-max-height, var(--auto-112px));
|
||||||
}
|
}
|
||||||
:host([type='text']) button {
|
:host([type='text']) button {
|
||||||
/* min-width 保障内容最少情况下的显示 */
|
/* min-width 保障内容最少情况下的显示 */
|
||||||
min-width: min-content;
|
min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
|
||||||
padding-inline-start: var(--auto-56px);
|
padding-inline: var(--oc-text-padding-inline, var(--auto-56px));
|
||||||
padding-inline-end: var(--auto-56px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './clock.js'
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
"default": "./index.js"
|
"default": "./index.js"
|
||||||
},
|
},
|
||||||
"./confirm.js": {
|
"./confirm.js": {
|
||||||
"default": "./clock.js"
|
"default": "./index.js"
|
||||||
},
|
},
|
||||||
"./package.json": "./package.json"
|
"./package.json": "./package.json"
|
||||||
},
|
},
|
||||||
|
|
@ -11,6 +11,7 @@ export default css`
|
||||||
line-height: var(--auto-36px);
|
line-height: var(--auto-36px);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
padding: var(--auto-10px) 0;
|
padding: var(--auto-10px) 0;
|
||||||
max-height: var(--auto-200px);
|
max-height: var(--auto-200px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ export default css`
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: var(--auto-14px);
|
border-radius: var(--auto-14px);
|
||||||
border: var(--auto-2px) solid var(--theme-blue);
|
border: var(--auto-2px) solid var(--theme-blue);
|
||||||
padding-inline-start: var(--auto-28px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -33,6 +32,7 @@ export default css`
|
||||||
caret-color: var(--theme-blue);
|
caret-color: var(--theme-blue);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: var(--auto-26px);
|
font-size: var(--auto-26px);
|
||||||
|
margin-left: var(--auto-28px);
|
||||||
}
|
}
|
||||||
|
|
||||||
star-button#delete {
|
star-button#delete {
|
||||||
|
|
@ -50,6 +50,7 @@ export default css`
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: var(--auto-28px);
|
font-size: var(--auto-28px);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.star-prompt-subtitle {
|
.star-prompt-subtitle {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,7 @@ export const sharedStyles: CSSResult = css`
|
||||||
p {
|
p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-family: 'OPPOSans';
|
font-family: 'OPPOSans';
|
||||||
|
font-size: var(--auto-40px);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #292929;
|
color: #292929;
|
||||||
|
|
@ -58,9 +59,9 @@ export const sharedStyles: CSSResult = css`
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 70px;
|
width: var(--auto-140px);
|
||||||
height: 70px;
|
height: var(--auto-140px);
|
||||||
font-size: var(--auto-36px);
|
font-size: var(--auto-70px);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: none;
|
border: none;
|
||||||
/*button背景无色*/
|
/*button背景无色*/
|
||||||
|
|
@ -94,13 +95,13 @@ export const sharedStyles: CSSResult = css`
|
||||||
}
|
}
|
||||||
#textcenter {
|
#textcenter {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: var(--auto-40px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.topText {
|
.topText {
|
||||||
font-size: 20px;
|
|
||||||
height: var(--auto-53px);
|
height: var(--auto-53px);
|
||||||
line-height: var(--auto-53px);
|
line-height: var(--auto-53px);
|
||||||
width: var(--auto-160px);
|
|
||||||
left: calc(50% - var(--auto-160px) / 2);
|
|
||||||
top: 31%;
|
top: 31%;
|
||||||
}
|
}
|
||||||
.spanContainer {
|
.spanContainer {
|
||||||
|
|
|
||||||
|
|
@ -58,8 +58,8 @@ export class StarLockNumber extends StarBaseElement {
|
||||||
this.spanContainer.style.visibility = `visible`
|
this.spanContainer.style.visibility = `visible`
|
||||||
this.parent.style.visibility = `visible`
|
this.parent.style.visibility = `visible`
|
||||||
this.addEventListener('passcode-create-success', this)
|
this.addEventListener('passcode-create-success', this)
|
||||||
this.addEventListener('passcode-verify-success', this)
|
this.addEventListener('digicipher-passcode-verify-success', this)
|
||||||
this.addEventListener('passcode-verify-error', this)
|
this.addEventListener('digicipher-passcode-verify-error', this)
|
||||||
this.addEventListener('passcode-reset', this)
|
this.addEventListener('passcode-reset', this)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -119,20 +119,19 @@ export class StarLockNumber extends StarBaseElement {
|
||||||
this.parent.style.visibility = `hidden`
|
this.parent.style.visibility = `hidden`
|
||||||
this.changeText = '保存成功'
|
this.changeText = '保存成功'
|
||||||
break
|
break
|
||||||
case 'passcode-verify-success':
|
case 'digicipher-passcode-verify-success':
|
||||||
this.guess = ''
|
this.guess = ''
|
||||||
this.clicks = 0
|
this.clicks = 0
|
||||||
for (let i = 0; i < 6; i++) {
|
for (let i = 0; i < 6; i++) {
|
||||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
case 'passcode-verify-error':
|
case 'digicipher-passcode-verify-error':
|
||||||
this.errors = event.detail.value
|
this.errors = event.detail.value
|
||||||
//当密码失败三次后
|
//当密码失败5次后
|
||||||
if (this.errors == 3) {
|
if (this.errors == 5) {
|
||||||
console.log('进入已锁定页面')
|
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('star-digicipher-passcode-error-third', {
|
new CustomEvent('star-digicipher-passcode-error-fifth', {
|
||||||
detail: {
|
detail: {
|
||||||
value: true,
|
value: true,
|
||||||
},
|
},
|
||||||
|
|
@ -252,7 +251,7 @@ export class StarLockNumber extends StarBaseElement {
|
||||||
this.guess = ''
|
this.guess = ''
|
||||||
this.clicks = 0
|
this.clicks = 0
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('star-digicipher-passcode-verify', {
|
new CustomEvent('star-digicipher-passwd', {
|
||||||
detail: {
|
detail: {
|
||||||
value: this.passwd,
|
value: this.passwd,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ export class DropDownMenu extends LitElement {
|
||||||
id="edit"
|
id="edit"
|
||||||
type=${IconControlBarType.BASE_WITHOUT_BORDER}
|
type=${IconControlBarType.BASE_WITHOUT_BORDER}
|
||||||
icon="compose"
|
icon="compose"
|
||||||
|
disabled="true"
|
||||||
></icon-control-bar>
|
></icon-control-bar>
|
||||||
<icon-control-bar
|
<icon-control-bar
|
||||||
id="settings"
|
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`
|
export default css`
|
||||||
:host {
|
:host {
|
||||||
width: inherit;
|
display: flex;
|
||||||
border-radius: var(--base-border-radius);
|
width: 100%;
|
||||||
|
min-height: var(--auto-96px);
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
border-radius: var(--base-border-radius);
|
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
|
||||||
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须与最右侧文字对齐 */
|
|
||||||
}
|
}
|
||||||
/* right-arrow须与最右侧文字对齐 */
|
|
||||||
/* li.hashref {
|
|
||||||
padding-inline-end: 0;
|
|
||||||
} */
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #000;
|
color: #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
/* 解除Chrome用户代理-点击标签时出现的淡蓝色 */
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
a.hasicon::before,
|
a.hasicon::before,
|
||||||
a.hashref::after {
|
a.hashref::after {
|
||||||
|
|
@ -46,19 +39,6 @@ padding-inline-end: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
content: 'right-light';
|
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.infokey,
|
||||||
span.label {
|
span.label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -87,4 +67,196 @@ padding-inline-end: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: #aaa;
|
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 {
|
||||||
import {customElement, property} from 'lit/decorators.js'
|
customElement,
|
||||||
import {StarBaseElement} from '../base/star-base-element.js'
|
html,
|
||||||
|
ifDefined,
|
||||||
|
nothing,
|
||||||
|
property,
|
||||||
|
CSSResultArray,
|
||||||
|
HTMLTemplateResult,
|
||||||
|
StarBaseElement,
|
||||||
|
TemplateResult,
|
||||||
|
} from '@star-web-components/base'
|
||||||
import liStyles from './li.css.js'
|
import liStyles from './li.css.js'
|
||||||
import '../bubble/bubble.js'
|
import '../bubble/bubble.js'
|
||||||
import '../switch/switch.js'
|
import '../switch/switch.js'
|
||||||
|
import {StarSwitch} from '../switch/switch.js'
|
||||||
|
|
||||||
export enum LiType {
|
export enum LiType {
|
||||||
BASE = 'base',
|
/* deprecated */ BASE = 'base',
|
||||||
BUBBLE_LABEL = 'bubble-label',
|
/* deprecated */ BUBBLE_LABEL = 'bubble-label',
|
||||||
ICON_LABEL = 'icon-label',
|
/* deprecated */ ICON_LABEL = 'icon-label',
|
||||||
INFO_LABEL = 'info-label',
|
/* deprecated */ INFO_LABEL = 'info-label',
|
||||||
ONLY_EDIT = 'only-edit',
|
/* deprecated */ ONLY_EDIT = 'only-edit',
|
||||||
ONLY_LABEL = 'only-label',
|
/* deprecated */ ONLY_LABEL = 'only-label',
|
||||||
ONLY_READ = 'only-read',
|
/* deprecated */ ONLY_READ = 'only-read',
|
||||||
SWITCH_LABEL = 'switch-label',
|
/* 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')
|
@customElement('star-li')
|
||||||
|
|
@ -23,16 +49,32 @@ export class StarLi extends StarBaseElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
@property({type: String}) type = ''
|
@property({type: String}) type = ''
|
||||||
|
|
||||||
@property({type: String}) label = ''
|
@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}) default = ''
|
||||||
@property({type: String}) href = ''
|
@property({type: String}) href!: string
|
||||||
@property({type: String}) icon = ''
|
@property({type: String}) icon!: string
|
||||||
@property({type: String}) iconcolor = ''
|
@property({type: String}) iconcolor = ''
|
||||||
@property({type: Number}) bubble = 0
|
@property({type: Number}) bubble = 0
|
||||||
@property({type: String}) switchcolor = ''
|
@property({type: String}) switchcolor = ''
|
||||||
@property({type: Boolean}) disabled = false
|
@property({type: Boolean}) disabled = false
|
||||||
@property({type: Boolean}) checked = false
|
|
||||||
@property({type: Boolean}) switchicon = false
|
@property({type: Boolean}) switchicon = false
|
||||||
@property({type: String}) size = ''
|
@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() {
|
render() {
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
case LiType.BASE:
|
/* deprecated */ case LiType.BASE:
|
||||||
return this.getbase()
|
return this.getbase()
|
||||||
case LiType.BUBBLE_LABEL:
|
/* deprecated */ case LiType.BUBBLE_LABEL:
|
||||||
return this.getbubblelabel()
|
return this.getbubblelabel()
|
||||||
case LiType.ICON_LABEL:
|
/* deprecated */ case LiType.ICON_LABEL:
|
||||||
return this.geticonlabel()
|
return this.geticonlabel()
|
||||||
case LiType.INFO_LABEL:
|
/* deprecated */ case LiType.INFO_LABEL:
|
||||||
return this.getinfolabel()
|
return this.getinfolabel()
|
||||||
case LiType.ONLY_EDIT:
|
/* deprecated */ case LiType.ONLY_EDIT:
|
||||||
return this.getonlyedit()
|
return this.getonlyedit()
|
||||||
case LiType.ONLY_LABEL:
|
/* deprecated */ case LiType.ONLY_LABEL:
|
||||||
return this.getonlylabel()
|
return this.getonlylabel()
|
||||||
case LiType.ONLY_READ:
|
/* deprecated */ case LiType.ONLY_READ:
|
||||||
return this.getonlyread()
|
return this.getonlyread()
|
||||||
case LiType.SWITCH_LABEL:
|
/* deprecated */ case LiType.SWITCH_LABEL:
|
||||||
return this.getswitchlabel()
|
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:
|
default:
|
||||||
console.error('unhanled 【star-li】 type')
|
return this.renderGeneral()
|
||||||
return nothing
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -83,10 +83,7 @@ export class StarNotificationGroup extends LitElement {
|
||||||
this.setAttribute('show', 'false')
|
this.setAttribute('show', 'false')
|
||||||
firstChild.setAttribute('notificationType', 'one-notification')
|
firstChild.setAttribute('notificationType', 'one-notification')
|
||||||
firstChild.withArrowUp = false
|
firstChild.withArrowUp = false
|
||||||
firstChild.removeEventListener(
|
firstChild.removeEventListener('notification-tap', allNotificationshown)
|
||||||
'notification-click',
|
|
||||||
allNotificationshown
|
|
||||||
)
|
|
||||||
} else if (slotLen > 1) {
|
} else if (slotLen > 1) {
|
||||||
let lastChild = slotElements[slotLen - 1] as StarNotification
|
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(
|
let otherChild = Array.from(slotElements as StarNotification[]).filter(
|
||||||
(child) => {
|
(child) => {
|
||||||
|
|
@ -122,7 +119,7 @@ export class StarNotificationGroup extends LitElement {
|
||||||
)
|
)
|
||||||
;(child as StarNotification).setAttribute('radiusType', '')
|
;(child as StarNotification).setAttribute('radiusType', '')
|
||||||
;(child as StarNotification).removeEventListener(
|
;(child as StarNotification).removeEventListener(
|
||||||
'notification-click',
|
'notification-tap',
|
||||||
allNotificationshown
|
allNotificationshown
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
@ -154,20 +151,54 @@ export class StarNotificationGroup extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
let isShow = this.getAttribute('show') == 'true'
|
let isShow = this.getAttribute('show') == 'true'
|
||||||
|
console.log('hellowq allNotificationshown isShow: ', isShow)
|
||||||
if (isShow) {
|
if (isShow) {
|
||||||
// 当前是展开状态，点击需折叠
|
// 当前是展开状态，点击需折叠
|
||||||
this.setAttribute('show', 'false')
|
let self = this
|
||||||
firstChild.setAttribute('radiusType', 'border-radius')
|
firstChild.setAttribute('radiusType', 'border-radius')
|
||||||
firstChild.withArrowUp = false
|
firstChild.withArrowUp = false
|
||||||
firstChild.setAttribute('notificationType', 'more-notifiactions-first')
|
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 {
|
} else {
|
||||||
this.setAttribute('show', 'true')
|
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.setAttribute('radiusType', 'top-border-radius')
|
||||||
firstChild.withArrowUp = true
|
firstChild.withArrowUp = true
|
||||||
firstChild.setAttribute('notificationType', 'more-notifiactions')
|
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`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -187,9 +218,51 @@ export class StarNotificationGroup extends LitElement {
|
||||||
display: block;
|
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)) {
|
:host([show='true']) ::slotted(:not(:last-child)) {
|
||||||
border-bottom: 0.08vw solid rgba(0, 0, 0, 0.09);
|
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 {
|
import {html, HTMLTemplateResult, nothing, CSSResultArray} from 'lit'
|
||||||
html,
|
|
||||||
LitElement,
|
|
||||||
HTMLTemplateResult,
|
|
||||||
nothing,
|
|
||||||
CSSResultArray,
|
|
||||||
} from 'lit'
|
|
||||||
import {
|
import {
|
||||||
customElement,
|
customElement,
|
||||||
property,
|
property,
|
||||||
|
|
@ -13,6 +7,7 @@ import {
|
||||||
state,
|
state,
|
||||||
} from 'lit/decorators.js'
|
} from 'lit/decorators.js'
|
||||||
import {sharedStyles} from './notificationstyle.js'
|
import {sharedStyles} from './notificationstyle.js'
|
||||||
|
import {StarBaseElement} from '../base'
|
||||||
// ONE ： 单条通知，notification-group展开时第一条notification类型
|
// ONE ： 单条通知，notification-group展开时第一条notification类型
|
||||||
// MORE ： notification-group中除第一条以外的notification类型
|
// MORE ： notification-group中除第一条以外的notification类型
|
||||||
// MORE_FIRST: notification-group折叠时第一条notification类型
|
// MORE_FIRST: notification-group折叠时第一条notification类型
|
||||||
|
|
@ -32,7 +27,7 @@ export enum RadiusType {
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('star-notification')
|
@customElement('star-notification')
|
||||||
export class StarNotification extends LitElement {
|
export class StarNotification extends StarBaseElement {
|
||||||
// 公共属性
|
// 公共属性
|
||||||
@property({type: String}) id = ''
|
@property({type: String}) id = ''
|
||||||
@property({type: String}) _timestamp = ''
|
@property({type: String}) _timestamp = ''
|
||||||
|
|
@ -60,6 +55,8 @@ export class StarNotification extends LitElement {
|
||||||
@property({type: Boolean}) isToast = false
|
@property({type: Boolean}) isToast = false
|
||||||
@property({type: Boolean}) btnShown = false
|
@property({type: Boolean}) btnShown = false
|
||||||
@property({type: Number}) notificationPosition = 0
|
@property({type: Number}) notificationPosition = 0
|
||||||
|
@property({type: Number}) width = 0
|
||||||
|
@property({type: Number}) widthleft = 0
|
||||||
@property({type: Number}) velocityThreshold = 0.8
|
@property({type: Number}) velocityThreshold = 0.8
|
||||||
@query('.notification') notification!: HTMLDivElement
|
@query('.notification') notification!: HTMLDivElement
|
||||||
@query('.btn-tool') btnTool!: HTMLDivElement
|
@query('.btn-tool') btnTool!: HTMLDivElement
|
||||||
|
|
@ -92,8 +89,21 @@ export class StarNotification extends LitElement {
|
||||||
this._timestamp = value
|
this._timestamp = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.startGestureDetector()
|
||||||
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
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.notificationPosition = this.getBoundingClientRect().right
|
||||||
|
this.width = this.getBoundingClientRect().width
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): HTMLTemplateResult | typeof nothing {
|
render(): HTMLTemplateResult | typeof nothing {
|
||||||
|
|
@ -410,6 +420,7 @@ export class StarNotification extends LitElement {
|
||||||
self.btnShown = true
|
self.btnShown = true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
this.widthleft = this.width - translateX
|
||||||
} else if (touchPosX > 0) {
|
} else if (touchPosX > 0) {
|
||||||
// if (touchPosX > 44) {
|
// if (touchPosX > 44) {
|
||||||
// (this.btnTool.children[0] as any).style.opacity = 0.6;
|
// (this.btnTool.children[0] as any).style.opacity = 0.6;
|
||||||
|
|
@ -443,9 +454,15 @@ export class StarNotification extends LitElement {
|
||||||
case 'click':
|
case 'click':
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
let target = event.target as HTMLElement
|
let target = event.target as HTMLElement
|
||||||
this.notification.style.transform = ''
|
|
||||||
switch (target.dataset.icon) {
|
switch (target.dataset.icon) {
|
||||||
case 'delete':
|
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.setAttribute('clicked', 'true')
|
||||||
target.addEventListener('transitionend', function tranEnd() {
|
target.addEventListener('transitionend', function tranEnd() {
|
||||||
target.removeEventListener('transitionend', tranEnd)
|
target.removeEventListener('transitionend', tranEnd)
|
||||||
|
|
@ -478,30 +495,43 @@ export class StarNotification extends LitElement {
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.notification.setAttribute('clicked', 'true')
|
this.dispatchEvent(
|
||||||
this.notification.addEventListener(
|
new CustomEvent('notification-tap', {
|
||||||
'transitionend',
|
detail: {
|
||||||
function tranEnd() {
|
id: self.id,
|
||||||
self.notification.removeEventListener(
|
notification: self,
|
||||||
'transitionend',
|
},
|
||||||
tranEnd
|
bubbles: true,
|
||||||
)
|
composed: true,
|
||||||
self.notification.removeAttribute('clicked')
|
})
|
||||||
self.dispatchEvent(
|
|
||||||
new CustomEvent('notification-click', {
|
|
||||||
detail: {
|
|
||||||
id: self.id,
|
|
||||||
notification: self,
|
|
||||||
},
|
|
||||||
bubbles: true,
|
|
||||||
composed: true,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
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 {
|
} else {
|
||||||
switch (event.type) {
|
switch (event.type) {
|
||||||
|
|
|
||||||
|
|
@ -38,11 +38,18 @@ export const sharedStyles: CSSResult = css`
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification {
|
.notification {
|
||||||
transition: transform 0.6s;
|
// transition: transform 0.6s;
|
||||||
|
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||||
height: inherit;
|
height: inherit;
|
||||||
width: 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] {
|
.notification[clicked] {
|
||||||
transition: transform 0.1s;
|
transition: transform 0.1s;
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
|
|
@ -515,4 +522,43 @@ export const sharedStyles: CSSResult = css`
|
||||||
color: var(--single-text-color-dm);
|
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'
|
import {css, CSSResult} from 'lit'
|
||||||
export const sharedStyles: CSSResult = css`
|
export const sharedStyles: CSSResult = css`
|
||||||
:host {
|
/* :host {
|
||||||
--top-dir: 40%;
|
--top-dir: 40%;
|
||||||
}
|
} */
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -15,7 +15,6 @@ export const sharedStyles: CSSResult = css`
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: var(--auto-160px);
|
|
||||||
line-height: var(--auto-53px);
|
line-height: var(--auto-53px);
|
||||||
font-size: var(--auto-40px);
|
font-size: var(--auto-40px);
|
||||||
height: var(--auto-53px);
|
height: var(--auto-53px);
|
||||||
|
|
@ -32,7 +31,7 @@ export const sharedStyles: CSSResult = css`
|
||||||
}
|
}
|
||||||
#canvasdown {
|
#canvasdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: var(--top-dir);
|
top: var(--auto-781px);
|
||||||
}
|
}
|
||||||
.textTop {
|
.textTop {
|
||||||
top: 31%;
|
top: 31%;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
|
||||||
|
|
||||||
@customElement('star-pattern-view')
|
@customElement('star-pattern-view')
|
||||||
export class StarPatternView extends StarBaseElement {
|
export class StarPatternView extends StarBaseElement {
|
||||||
_topDir: string = ''
|
/* _topDir: string = '' */
|
||||||
_getRed: boolean = false
|
_getRed: boolean = false
|
||||||
|
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
|
|
@ -17,6 +17,7 @@ export class StarPatternView extends StarBaseElement {
|
||||||
}
|
}
|
||||||
@query('canvas') canvas!: HTMLCanvasElement
|
@query('canvas') canvas!: HTMLCanvasElement
|
||||||
@query('.textTop') saveP!: HTMLParagraphElement
|
@query('.textTop') saveP!: HTMLParagraphElement
|
||||||
|
@query('#canvasdown') canvasdown!: HTMLDivElement
|
||||||
@property({attribute: false}) cxt!: CanvasRenderingContext2D
|
@property({attribute: false}) cxt!: CanvasRenderingContext2D
|
||||||
@property({type: Boolean})
|
@property({type: Boolean})
|
||||||
get getRed() {
|
get getRed() {
|
||||||
|
|
@ -48,7 +49,7 @@ export class StarPatternView extends StarBaseElement {
|
||||||
@property({type: String}) changeText = ''
|
@property({type: String}) changeText = ''
|
||||||
@property({type: String}) cancel = '取消'
|
@property({type: String}) cancel = '取消'
|
||||||
@property({type: String}) lessfourinfo = ''
|
@property({type: String}) lessfourinfo = ''
|
||||||
@property({type: String})
|
/* @property({type: String})
|
||||||
get topDir() {
|
get topDir() {
|
||||||
return this._topDir
|
return this._topDir
|
||||||
}
|
}
|
||||||
|
|
@ -56,7 +57,7 @@ export class StarPatternView extends StarBaseElement {
|
||||||
this.style.setProperty('--top-dir', value)
|
this.style.setProperty('--top-dir', value)
|
||||||
this._topDir = value
|
this._topDir = value
|
||||||
this.top = parseInt(this._topDir)
|
this.top = parseInt(this._topDir)
|
||||||
}
|
} */
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (!this.saveMode) {
|
if (!this.saveMode) {
|
||||||
|
|
@ -99,8 +100,8 @@ export class StarPatternView extends StarBaseElement {
|
||||||
): void {
|
): void {
|
||||||
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
|
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
|
||||||
if (this.saveMode) {
|
if (this.saveMode) {
|
||||||
this.topDir = '34%'
|
this.canvasdown.style.setProperty('top', 'var(--auto-543px)')
|
||||||
this.saveP.style.setProperty('top', '27.8%')
|
this.saveP.style.setProperty('top', 'var(--auto-411px)')
|
||||||
}
|
}
|
||||||
//canvas的高度和宽度都是
|
//canvas的高度和宽度都是
|
||||||
this.canvas.width = this.canvasWidth
|
this.canvas.width = this.canvasWidth
|
||||||
|
|
@ -113,8 +114,8 @@ export class StarPatternView extends StarBaseElement {
|
||||||
this.Draw()
|
this.Draw()
|
||||||
this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
|
this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
|
||||||
this.addEventListener('passcode-create-success', this)
|
this.addEventListener('passcode-create-success', this)
|
||||||
this.addEventListener('passcode-verify-success', this)
|
this.addEventListener('pattern-passcode-verify-success', this)
|
||||||
this.addEventListener('passcode-verify-error', this)
|
this.addEventListener('pattern-passcode-verify-error', this)
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEvent(event: CustomEvent) {
|
handleEvent(event: CustomEvent) {
|
||||||
|
|
@ -122,22 +123,21 @@ export class StarPatternView extends StarBaseElement {
|
||||||
case 'passcode-create-success':
|
case 'passcode-create-success':
|
||||||
this.changeText = '密码设置成功'
|
this.changeText = '密码设置成功'
|
||||||
break
|
break
|
||||||
case 'passcode-verify-success':
|
case 'pattern-passcode-verify-success':
|
||||||
console.log('图案正确')
|
console.log('图案正确')
|
||||||
this.getRed = false
|
this.getRed = false
|
||||||
this.changeText = '绘制图案'
|
this.changeText = '绘制图案'
|
||||||
break
|
break
|
||||||
case 'passcode-verify-error':
|
case 'pattern-passcode-verify-error':
|
||||||
this.passwd = event.detail.passwd
|
this.passwd = event.detail.passwd
|
||||||
this.getRed = true
|
this.getRed = true
|
||||||
this.changeText = '绘制图案错误'
|
this.changeText = '绘制图案错误'
|
||||||
//当密码失败三次后
|
//当密码失败三次后
|
||||||
this.errors = event.detail.value
|
this.errors = event.detail.value
|
||||||
if (this.errors == 3) {
|
if (this.errors == 5) {
|
||||||
console.log('进入已锁定页面')
|
|
||||||
this.initialState()
|
this.initialState()
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('star-pattern-view-passwd-error-third', {
|
new CustomEvent('star-pattern-view-passwd-error-fifth', {
|
||||||
detail: {
|
detail: {
|
||||||
value: true,
|
value: true,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ export class StarSwitch extends LitElement {
|
||||||
@property({type: Number}) leftx = 10000
|
@property({type: Number}) leftx = 10000
|
||||||
@property({type: Number}) x = 0
|
@property({type: Number}) x = 0
|
||||||
@property({type: Boolean}) disabled = false
|
@property({type: Boolean}) disabled = false
|
||||||
@property({type: Boolean}) checked = false
|
@property({type: Boolean, reflect: true}) checked = false
|
||||||
@property({type: String})
|
@property({type: String})
|
||||||
get switchcolor() {
|
get switchcolor() {
|
||||||
return this._backgoundColor
|
return this._backgoundColor
|
||||||
|
|
@ -36,8 +36,7 @@ export class StarSwitch extends LitElement {
|
||||||
<input
|
<input
|
||||||
?disabled="${this.disabled}"
|
?disabled="${this.disabled}"
|
||||||
?checked="${this.checked}"
|
?checked="${this.checked}"
|
||||||
@change=${(evt: Event) =>
|
@change=${this}
|
||||||
(this.checked = (evt.target as HTMLInputElement).checked)}
|
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="base"
|
class="base"
|
||||||
id="base"
|
id="base"
|
||||||
|
|
@ -54,6 +53,21 @@ export class StarSwitch extends LitElement {
|
||||||
</label>
|
</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) {
|
private touchStart(evt: TouchEvent) {
|
||||||
console.log('##')
|
console.log('##')
|
||||||
this.startx = evt.touches[0].clientX
|
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"
|
type="base"
|
||||||
style="border-radius: 25px !important;"
|
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="default" label="取消"></star-button>
|
||||||
<star-button type="text" variant="primary" label="确定"></star-button>
|
<star-button type="text" variant="primary" label="确定"></star-button>
|
||||||
</star-button-group>
|
</star-button-group>
|
||||||
|
|
@ -33,7 +33,7 @@ export class PanelButtonGroup extends LitElement {
|
||||||
type="base"
|
type="base"
|
||||||
style="border-radius: 25px !important;"
|
style="border-radius: 25px !important;"
|
||||||
>
|
>
|
||||||
<star-button-group>
|
<star-button-group inheritRadius>
|
||||||
<star-button
|
<star-button
|
||||||
type="text"
|
type="text"
|
||||||
variant="default"
|
variant="default"
|
||||||
|
|
@ -47,7 +47,7 @@ export class PanelButtonGroup extends LitElement {
|
||||||
label="空白的第二行按钮"
|
label="空白的第二行按钮"
|
||||||
></star-button>
|
></star-button>
|
||||||
</star-button-group>
|
</star-button-group>
|
||||||
<star-button-group>
|
<star-button-group inheritRadius>
|
||||||
<star-button type="text" variant="default" label="取消"></star-button>
|
<star-button type="text" variant="default" label="取消"></star-button>
|
||||||
<star-button type="text" variant="primary" label="确定"></star-button>
|
<star-button type="text" variant="primary" label="确定"></star-button>
|
||||||
</star-button-group>
|
</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 {customElement} from 'lit/decorators.js'
|
||||||
import {map} from 'lit/directives/map.js'
|
import {map} from 'lit/directives/map.js'
|
||||||
|
|
||||||
|
|
@ -8,7 +8,7 @@ export class PanelFontsStarIcons extends LitElement {
|
||||||
'2g',
|
'2g',
|
||||||
'3g',
|
'3g',
|
||||||
'4g',
|
'4g',
|
||||||
'IP_lm',
|
'ip',
|
||||||
'accessibility',
|
'accessibility',
|
||||||
'achievement',
|
'achievement',
|
||||||
'add-contact',
|
'add-contact',
|
||||||
|
|
@ -437,6 +437,7 @@ export class PanelFontsStarIcons extends LitElement {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
|
<h1><center>基础</center></h1>
|
||||||
<star-li type="base">
|
<star-li type="base">
|
||||||
${map(
|
${map(
|
||||||
this.icons,
|
this.icons,
|
||||||
|
|
@ -449,37 +450,22 @@ export class PanelFontsStarIcons extends LitElement {
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</star-li>
|
</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 {
|
declare global {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import {customElement} from 'lit/decorators.js'
|
import {customElement} from 'lit/decorators.js'
|
||||||
import {html, LitElement, CSSResultArray} from 'lit'
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
import {UlType} from '../../../components/ul/ul'
|
import {UlType} from '../../../components/ul/ul'
|
||||||
import {LiType} from '../../../components/li/li'
|
|
||||||
import {sharedStyles} from '../shared-styles'
|
import {sharedStyles} from '../shared-styles'
|
||||||
|
|
||||||
import './examples/test-tap'
|
import './examples/test-tap'
|
||||||
|
|
@ -14,29 +13,13 @@ export class PanelGesture extends LitElement {
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li
|
<star-li label="tap轻触" href="#test-tap"></star-li>
|
||||||
type=${LiType.ONLY_LABEL}
|
|
||||||
label="tap轻触"
|
|
||||||
href="#test-tap"
|
|
||||||
></star-li>
|
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="pan滑动" href="#test-pan"></star-li>
|
||||||
type=${LiType.ONLY_LABEL}
|
|
||||||
label="pan滑动"
|
|
||||||
href="#test-pan"
|
|
||||||
></star-li>
|
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="swipe轻扫" href="#test-swipe"></star-li>
|
||||||
type=${LiType.ONLY_LABEL}
|
|
||||||
label="swipe轻扫"
|
|
||||||
href="#test-swipe"
|
|
||||||
></star-li>
|
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="手指组合" href="#test-multitouches"></star-li>
|
||||||
type=${LiType.ONLY_LABEL}
|
|
||||||
label="手指组合"
|
|
||||||
href="#test-multitouches"
|
|
||||||
></star-li>
|
|
||||||
</star-ul>
|
</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 '../../components/li/li'
|
||||||
|
|
||||||
import './about/about'
|
import './about/about'
|
||||||
|
import './apng/apng'
|
||||||
import './activeoverlay/activeoverlay'
|
import './activeoverlay/activeoverlay'
|
||||||
import './battery/battery'
|
import './battery/battery'
|
||||||
import './battery-square/battery-square'
|
import './battery-square/battery-square'
|
||||||
|
|
@ -27,9 +28,11 @@ import './gauss_canvas/gauss-blur'
|
||||||
import './general/general'
|
import './general/general'
|
||||||
import './gesture/gesture'
|
import './gesture/gesture'
|
||||||
import './icon/icon'
|
import './icon/icon'
|
||||||
|
import './iconfont/iconfont'
|
||||||
import './indicators/deformation-indicator'
|
import './indicators/deformation-indicator'
|
||||||
import './indicators/home-indicator'
|
import './indicators/home-indicator'
|
||||||
import './indicators/point-indicator'
|
import './indicators/point-indicator'
|
||||||
|
import './li/li'
|
||||||
import './locked/locked'
|
import './locked/locked'
|
||||||
import './notification/notification'
|
import './notification/notification'
|
||||||
import './overflowmenu/overflowmenu'
|
import './overflowmenu/overflowmenu'
|
||||||
|
|
@ -41,7 +44,6 @@ import './slider/slider'
|
||||||
import './switch/switch'
|
import './switch/switch'
|
||||||
import './toast/toast'
|
import './toast/toast'
|
||||||
import './weather/weather'
|
import './weather/weather'
|
||||||
import './iconfont/iconfont'
|
|
||||||
import './swiper/swiper'
|
import './swiper/swiper'
|
||||||
|
|
||||||
import './animation/animation'
|
import './animation/animation'
|
||||||
|
|
@ -63,425 +65,156 @@ export class PanelRoot extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
rootPanel = html`
|
rootPanel = html`
|
||||||
<star-ul
|
<star-ul type=${UlType.ONLY_HEADER} title="基础原子组件">
|
||||||
type=${UlType.HEADER_FOOTER}
|
<star-li
|
||||||
title="完整栏"
|
label="StarButton-按钮"
|
||||||
text="可在上栏中填充任意类型的条目"
|
icon="play-circle"
|
||||||
>
|
href="#button"
|
||||||
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
></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 />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ONLY_LABEL}
|
label="IndicatorPagePoint-页面圆点指示器"
|
||||||
label="带跳转的条目"
|
icon="accessibility"
|
||||||
href="#about"
|
href="#point-indicator"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="IndicatorPageDeformation-页面横条指示器"
|
||||||
label="带图标的条目"
|
icon="accessibility"
|
||||||
icon="privacy"
|
href="#deformation-indicator"
|
||||||
></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"
|
|
||||||
></star-li>
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.ONLY_HEADER} title="基础组件组">
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="StarButtonGroup-按钮组"
|
||||||
label="通用"
|
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
iconcolor="red"
|
href="#button-group"
|
||||||
href="#general"
|
|
||||||
></star-li>
|
></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 />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="notification"
|
||||||
label="开关"
|
icon="play-circle"
|
||||||
icon="switch"
|
href="#notification"
|
||||||
iconcolor="#EB7347"
|
></star-li>
|
||||||
href="#switch"
|
</star-ul>
|
||||||
|
|
||||||
|
<star-ul type=${UlType.ONLY_HEADER} title="弹窗组件">
|
||||||
|
<star-li
|
||||||
|
label="浏览器模态弹窗"
|
||||||
|
icon="play-circle"
|
||||||
|
href="#dialog"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="prompt" icon="addons" href="#prompt"></star-li>
|
||||||
type=${LiType.ICON_LABEL}
|
<hr />
|
||||||
label="滑动条"
|
<star-li label="AllConfirm" icon="messages" href="#confirm"></star-li>
|
||||||
icon="switch"
|
<hr />
|
||||||
iconcolor="#EB7347"
|
</star-ul>
|
||||||
href="#slider"
|
|
||||||
></star-li>
|
<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 />
|
<hr />
|
||||||
<star-li
|
<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"
|
label="control-center"
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
iconcolor="blue"
|
|
||||||
href="#control-center"
|
href="#control-center"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<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
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="原gaia-icons图标字体库"
|
||||||
label="notification"
|
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
iconcolor="blue"
|
href="#fonts-gaia-icons"
|
||||||
href="#notification"
|
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="新star-icons图标字体库"
|
||||||
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="基础卡片组件"
|
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
iconcolor="blue"
|
href="#fonts-star-icons"
|
||||||
href="#card"
|
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="查看所有gaia-icons图标"
|
||||||
label="主屏容器"
|
|
||||||
icon="addons"
|
|
||||||
iconcolor="green"
|
|
||||||
href="#container"
|
|
||||||
></star-li>
|
|
||||||
<hr />
|
|
||||||
<star-li
|
|
||||||
type=${LiType.ICON_LABEL}
|
|
||||||
label="查看所有图标"
|
|
||||||
icon="all-day"
|
icon="all-day"
|
||||||
href="#icon"
|
href="#icon"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="IconFont图标方案(码点和SVG-symbol)"
|
||||||
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图标"
|
|
||||||
icon="all-day"
|
icon="all-day"
|
||||||
iconcolor="yellow"
|
|
||||||
href="#iconfont"
|
href="#iconfont"
|
||||||
></star-li>
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.ONLY_HEADER} title="时钟">
|
<star-ul type=${UlType.ONLY_HEADER} title="模型">
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
label="主屏"
|
||||||
label="时钟"
|
icon="dismiss-keyboard"
|
||||||
icon="alarm"
|
href="#homescreen"
|
||||||
iconcolor="green"
|
|
||||||
href="#clock"
|
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="主屏容器" icon="addons" href="#container"></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>
|
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
|
||||||
type=${LiType.ICON_LABEL}
|
|
||||||
label="home指示器"
|
|
||||||
icon="accessibility"
|
|
||||||
iconcolor="blue"
|
|
||||||
href="#home-indicator"
|
|
||||||
></star-li>
|
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
|
||||||
<star-ul type=${UlType.ONLY_HEADER} title="指示器">
|
<star-ul type=${UlType.ONLY_HEADER} title="Labs">
|
||||||
<star-li
|
<star-li label="毛玻璃" icon="achievement" href="#blur"></star-li>
|
||||||
type=${LiType.ICON_LABEL}
|
|
||||||
label="页面圆点指示器"
|
|
||||||
icon="accessibility"
|
|
||||||
iconcolor="blue"
|
|
||||||
href="#point-indicator"
|
|
||||||
></star-li>
|
|
||||||
<hr />
|
<hr />
|
||||||
<star-li
|
<star-li label="高斯模糊" icon="achievement" href="#gauss"></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>
|
|
||||||
<hr />
|
<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>
|
</star-ul>
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue