(chore) format:prettier code
This commit is contained in:
wangchangqi
parent
71516545b8
commit
758831ab40
|
|
@ -7,7 +7,7 @@ export class StarBlur extends LitElement {
|
|||
@property({type: Boolean}) openblur = false
|
||||
@property({type: String}) imagesrc = ''
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
|
||||
attributeChangedCallback(name: string, _old: string, value: string): void {
|
||||
super.attributeChangedCallback(name, _old, value)
|
||||
|
||||
if (name === 'imagesrc') {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
# star-button
|
||||
|
||||
星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日）
|
||||
星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日）
|
||||
|
||||
## 介绍
|
||||
|
||||
star-button属性：
|
||||
1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
|
||||
star-button 属性：
|
||||
|
||||
1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" label="文本按钮"></star-button>
|
||||
|
|
@ -13,18 +14,28 @@ star-button属性：
|
|||
<star-button type="icononly" label="图标按钮"></star-button>
|
||||
```
|
||||
|
||||
2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。
|
||||
2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="accent"></star-button>
|
||||
<star-button type="base" variant="primary" label="primary"></star-button>
|
||||
```
|
||||
|
||||
3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
|
||||
3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="accent" size="small"></star-button>
|
||||
<star-button type="base" variant="primary" label="primary" size="large"></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="accent"
|
||||
label="accent"
|
||||
size="small"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="primary"
|
||||
label="primary"
|
||||
size="large"
|
||||
></star-button>
|
||||
```
|
||||
|
||||
4. label：显示按钮名，如省略则显示为“默认”。
|
||||
|
|
@ -39,16 +50,31 @@ star-button属性：
|
|||
<star-button type="base" variant="accent" label="禁用" disabled></star-button>
|
||||
```
|
||||
|
||||
6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。
|
||||
6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="fill" treatment="fill"></star-button>
|
||||
<star-button type="base" variant="accent" label="outline" treatment="outline"></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="accent"
|
||||
label="fill"
|
||||
treatment="fill"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="accent"
|
||||
label="outline"
|
||||
treatment="outline"
|
||||
></star-button>
|
||||
```
|
||||
|
||||
7. icon和iconcolor：控制图标样式和其颜色。
|
||||
7. icon 和 iconcolor：控制图标样式和其颜色。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="accent"
|
||||
label="图标按钮"
|
||||
icon="alarm"
|
||||
iconcolor="white"
|
||||
></star-button>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -56,42 +56,42 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
.accent {
|
||||
background-color: #0469e3;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.accent:hover {
|
||||
background-color: #015BC7;
|
||||
background-color: #015bc7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #222222;
|
||||
color: #EBEBEB;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: #E6E6E6;
|
||||
background-color: #e6e6e6;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
background-color: #D5D5D5;
|
||||
background-color: #d5d5d5;
|
||||
color: #d42222;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background-color: #B30202;
|
||||
color: #EBEBEB;
|
||||
background-color: #b30202;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.negative:hover {
|
||||
background-color: #A20101;
|
||||
color: #EBEBEB;
|
||||
background-color: #a20101;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.black {
|
||||
|
|
@ -100,18 +100,18 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.white {
|
||||
background-color: #FFFFFF;
|
||||
color: #EBEBEB;
|
||||
background-color: #ffffff;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #E6E6E6;
|
||||
background-color: #e6e6e6;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fill.primary {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.fill.primary:hover {
|
||||
|
|
@ -125,7 +125,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.outline.primary:hover {
|
||||
background-color: #D5D5D5;
|
||||
background-color: #d5d5d5;
|
||||
border-style: solid;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
@ -153,7 +153,7 @@ export const sharedStyles: CSSResult = css`
|
|||
min-width: 32.2px;
|
||||
padding: 0px;
|
||||
}
|
||||
.start-button-confirm{
|
||||
.start-button-confirm {
|
||||
display: inline-block;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -48,9 +48,7 @@ export class StarButton extends LitElement {
|
|||
getBaseButton(): HTMLTemplateResult {
|
||||
if (this.hasAttribute('disabled')) {
|
||||
return html`
|
||||
<button
|
||||
class="disabled ${this.variant} ${this.size} ${this.treatment}"
|
||||
>
|
||||
<button class="disabled ${this.variant} ${this.size} ${this.treatment}">
|
||||
${this.label}
|
||||
</button>
|
||||
`
|
||||
|
|
@ -126,9 +124,9 @@ export class StarButton extends LitElement {
|
|||
`
|
||||
}
|
||||
}
|
||||
getConfirmButton(): HTMLTemplateResult{
|
||||
getConfirmButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
<span class="start-button-confirm"><slot></slot></span>
|
||||
<span class="start-button-confirm"><slot></slot></span>
|
||||
`
|
||||
}
|
||||
render() {
|
||||
|
|
@ -139,8 +137,8 @@ export class StarButton extends LitElement {
|
|||
return this.getIconOnlyButton()
|
||||
case ButtonType.ICONLABEL:
|
||||
return this.getIconLabelButton()
|
||||
case ButtonType.Confirm:
|
||||
return this.getConfirmButton()
|
||||
case ButtonType.Confirm:
|
||||
return this.getConfirmButton()
|
||||
default:
|
||||
console.error('unhanled 【star-button】 type')
|
||||
return nothing
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@ star-card 的用途：
|
|||
|
||||
star-card 类型：
|
||||
1、base
|
||||
具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
|
||||
具有图片、标题、内容以及页脚几个模块，同时删除 base 类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
|
||||
|
||||
2、linkcard
|
||||
该类型相比base类型多出点击后跳转相应链接的功能。
|
||||
该类型相比 base 类型多出点击后跳转相应链接的功能。
|
||||
|
||||
3、tupianonly
|
||||
该类型只展现一张正方形图片，用于陈列图片组。
|
||||
|
||||
star-card 其他属性：
|
||||
1、image
|
||||
通过填写图片URL来讲图片展示在卡片上。
|
||||
通过填写图片 URL 来讲图片展示在卡片上。
|
||||
|
||||
2、heading
|
||||
填写卡片标题以表明该卡片的用途。
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@ import {css, CSSResult} from 'lit'
|
|||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
--background-image-url: ''
|
||||
--background-image-url: '';
|
||||
}
|
||||
|
||||
div {
|
||||
width:200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
border-color: #E6E6E6;
|
||||
background: #ffffff;
|
||||
border-color: #e6e6e6;
|
||||
border-radius: 4px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
|
@ -28,8 +28,8 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.base:hover {
|
||||
background: #E6E6E6;
|
||||
border-color: #B1B1B1;
|
||||
background: #e6e6e6;
|
||||
border-color: #b1b1b1;
|
||||
}
|
||||
|
||||
.cardhead {
|
||||
|
|
@ -79,7 +79,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.cardfooter {
|
||||
border-color: #E6E6E6;
|
||||
border-color: #e6e6e6;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
display: block;
|
||||
|
|
@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.imageonly {
|
||||
background: #B1B1B1;
|
||||
background: #b1b1b1;
|
||||
border-color: #000000;
|
||||
border: 10px;
|
||||
border-style: solid;
|
||||
|
|
@ -108,6 +108,6 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.imageonly:hover {
|
||||
border-color: #E6E6E6;
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
`
|
||||
|
|
@ -1,134 +1,134 @@
|
|||
import {
|
||||
html,
|
||||
LitElement,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
} from "lit"
|
||||
import {customElement, property} from "lit/decorators.js"
|
||||
import {sharedStyles} from "./card-styles"
|
||||
html,
|
||||
LitElement,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './card-styles'
|
||||
|
||||
export enum CardType {
|
||||
BASE = "base",
|
||||
LINKCARD = "linkcard",
|
||||
IMAGEONLY = "imageonly",
|
||||
LABELONLY = "labelonly",
|
||||
FOOTERDELETED = 'footerdeleted',
|
||||
export enum CardType {
|
||||
BASE = 'base',
|
||||
LINKCARD = 'linkcard',
|
||||
IMAGEONLY = 'imageonly',
|
||||
LABELONLY = 'labelonly',
|
||||
FOOTERDELETED = 'footerdeleted',
|
||||
}
|
||||
|
||||
// export enum CardSize {
|
||||
// SMALL = "small",
|
||||
// MEDIUM = "medium",
|
||||
// }
|
||||
|
||||
@customElement('star-card')
|
||||
export class StarCard extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
// export enum CardSize {
|
||||
// SMALL = "small",
|
||||
// MEDIUM = "medium",
|
||||
// }
|
||||
@property({type: String}) type = 'base'
|
||||
// @property({type: String}) size = "medium"
|
||||
@property({type: String}) heading = ''
|
||||
@property({type: String}) subheading = ''
|
||||
@property({type: String}) footer = ''
|
||||
@property({type: String}) image = ''
|
||||
@property({type: String}) link = ''
|
||||
|
||||
@customElement("star-card")
|
||||
export class StarCard extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
@property({type: String}) type = "base"
|
||||
// @property({type: String}) size = "medium"
|
||||
@property({type: String}) heading = ""
|
||||
@property({type: String}) subheading = ""
|
||||
@property({type: String}) footer = ""
|
||||
@property({type: String}) image = ""
|
||||
@property({type: String}) link = ""
|
||||
|
||||
getBaseCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}">
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
getLinkCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<a href=${this.link} target="_blank" style="text-decoration:none;">
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}">
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
getBaseCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}" />
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
getLabelOnlyCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card base">
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
getLinkCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<a href=${this.link} target="_blank" style="text-decoration:none;">
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
getImageOnlyCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card imageonly">
|
||||
<div class="cardhead">
|
||||
<img class="imageonly-image" src="${this.image}">
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
getFooterDeletedCard(): HTMLTemplateResult {
|
||||
return html `
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}">
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
render() {
|
||||
switch (this.type) {
|
||||
case CardType.BASE:
|
||||
return this.getBaseCard()
|
||||
case CardType.LINKCARD:
|
||||
return this.getLinkCard()
|
||||
case CardType.IMAGEONLY:
|
||||
return this.getImageOnlyCard()
|
||||
case CardType.LABELONLY:
|
||||
return this.getLabelOnlyCard()
|
||||
case CardType.FOOTERDELETED:
|
||||
return this.getFooterDeletedCard()
|
||||
default:
|
||||
console.error("unhanled 【star-card】 type")
|
||||
return nothing
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"star-card": StarCard
|
||||
getLabelOnlyCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card base">
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
<div class="cardfooter">
|
||||
<p class="foooter">${this.footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
getImageOnlyCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card imageonly">
|
||||
<div class="cardhead">
|
||||
<img class="imageonly-image" src="${this.image}" />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
getFooterDeletedCard(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="card base">
|
||||
<div class="cardhead">
|
||||
<img class="base-image" src="${this.image}" />
|
||||
</div>
|
||||
<div class="cardbody">
|
||||
<h3 class="heading">${this.heading}</h3>
|
||||
<p class="subheading">${this.subheading}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
render() {
|
||||
switch (this.type) {
|
||||
case CardType.BASE:
|
||||
return this.getBaseCard()
|
||||
case CardType.LINKCARD:
|
||||
return this.getLinkCard()
|
||||
case CardType.IMAGEONLY:
|
||||
return this.getImageOnlyCard()
|
||||
case CardType.LABELONLY:
|
||||
return this.getLabelOnlyCard()
|
||||
case CardType.FOOTERDELETED:
|
||||
return this.getFooterDeletedCard()
|
||||
default:
|
||||
console.error('unhanled 【star-card】 type')
|
||||
return nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-card': StarCard
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
## 星光 Web 组件——确认弹窗组件：confirm组件介绍（9月13日)
|
||||
## 星光 Web 组件——确认弹窗组件：confirm 组件介绍（9 月 13 日)
|
||||
|
||||
## 介绍
|
||||
|
||||
star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。
|
||||
|
||||
## 1、操作确认框
|
||||
|
||||
使用场景：一般用于删除、卸载、二次确认等。
|
||||
|
||||
## 2、消息确认框
|
||||
|
||||
使用场景：一般用于确认权限、安全提示、功能开启提示等。
|
||||
|
||||
参考：UI设计
|
||||
参考：UI 设计
|
||||
|
||||
## 内容排布
|
||||
|
||||
|
|
@ -23,6 +29,7 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
|
|||
```
|
||||
|
||||
特点：
|
||||
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
- 支持静态资源插槽(此处为图片)
|
||||
|
|
@ -36,19 +43,21 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
|
|||
- checkbox
|
||||
|
||||
## 基本用法
|
||||
通过click事件调用Confirm函数，根据传入属性的不同显示不同的弹出框类型
|
||||
```
|
||||
Confirm({
|
||||
type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
|
||||
model：'', 支持深色模式和浅色模式,默认背景是深色模式
|
||||
image: '', 图标slot插槽
|
||||
headline: '', 标题
|
||||
subtitle: '', 子标题
|
||||
checkBoxText: '', 复选框文本(checkbox插槽)
|
||||
confirmButtonText: '', 操作按钮()
|
||||
cancelButtonText: '', 取消
|
||||
location: '', 弹出框位置，默认是在屏幕中心弹出
|
||||
onConfirm: () => {}, 确认回调函数
|
||||
onCancel: () => {}, 取消回调函数
|
||||
})
|
||||
|
||||
通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型
|
||||
|
||||
```
|
||||
Confirm({
|
||||
type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
|
||||
model：'', 支持深色模式和浅色模式,默认背景是深色模式
|
||||
image: '', 图标slot插槽
|
||||
headline: '', 标题
|
||||
subtitle: '', 子标题
|
||||
checkBoxText: '', 复选框文本(checkbox插槽)
|
||||
confirmButtonText: '', 操作按钮()
|
||||
cancelButtonText: '', 取消
|
||||
location: '', 弹出框位置，默认是在屏幕中心弹出
|
||||
onConfirm: () => {}, 确认回调函数
|
||||
onCancel: () => {}, 取消回调函数
|
||||
})
|
||||
```
|
||||
|
|
@ -20,8 +20,9 @@
|
|||
## 每层的任务
|
||||
|
||||
- root-container
|
||||
|
||||
1. 负责主屏,次屏等页容器
|
||||
2. 负责dock栏容器
|
||||
2. 负责 dock 栏容器
|
||||
3. 负责主屏页面指示器
|
||||
4. 负责传导编辑状态
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export class ChildContainer extends LitElement {
|
|||
gridArea: `${gridRowStart}/${gridColumnStart}/${gridRowEnd}/${gridColumnEnd}`,
|
||||
}
|
||||
const child = childs?.[index]
|
||||
let childNode: TemplateResult | (typeof nothing) = nothing
|
||||
let childNode: TemplateResult | typeof nothing = nothing
|
||||
|
||||
if (child !== undefined) {
|
||||
childNode = this.parsedata(child)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
export interface ChildContainerNode<T> {
|
||||
node: string,
|
||||
node: string
|
||||
type: string
|
||||
size?: string
|
||||
childs: Array<T>
|
||||
|
|
@ -24,4 +23,7 @@ export interface FolderContainerNode {
|
|||
childs: Array<ChildContainerNode<IconContainerNode>>
|
||||
}
|
||||
|
||||
export type ChildData = IconContainerNode|FolderContainerNode|SmallComponentContainerNode
|
||||
export type ChildData =
|
||||
| IconContainerNode
|
||||
| FolderContainerNode
|
||||
| SmallComponentContainerNode
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import './icon-container'
|
||||
|
||||
@customElement('dock-container')
|
||||
|
|
@ -30,7 +30,9 @@ export class DockContainer extends LitElement {
|
|||
flex-wrap: wrap;
|
||||
align-content: start;
|
||||
}
|
||||
icon-container, folder-container, small-component-container {
|
||||
icon-container,
|
||||
folder-container,
|
||||
small-component-container {
|
||||
margin: var(--icon-container-margin);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
import {customElement, state} from 'lit/decorators.js'
|
||||
import {classMap} from 'lit/directives/class-map.js'
|
||||
import './child-container'
|
||||
import { FolderContainerNode } from './data-type'
|
||||
import {FolderContainerNode} from './data-type'
|
||||
import './icon-container'
|
||||
|
||||
@customElement('folder-container')
|
||||
|
|
@ -44,7 +44,7 @@ export class FolderContainer extends LitElement {
|
|||
|
||||
protected willUpdate(_changedProperties: PropertyValueMap<any>) {
|
||||
this.pages = this.node.childs.length
|
||||
if(this.node?.name) {
|
||||
if (this.node?.name) {
|
||||
this.name = this.node.name
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +118,8 @@ export class FolderContainer extends LitElement {
|
|||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--folder-margin-height)) calc(var(--folder-margin-width)/2);
|
||||
padding: calc(var(--folder-margin-height))
|
||||
calc(var(--folder-margin-width) / 2);
|
||||
width: calc(100vw - var(--folder-margin-width));
|
||||
height: calc(100vh - calc(2 * var(--folder-margin-height)));
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
# 抓握指示器-Grabber
|
||||
|
||||
下分：
|
||||
|
||||
- Multitasking Indicator (多任务指示器)(TODO)
|
||||
- App Divider (App分割条)(TODO)
|
||||
- App Divider (App 分割条)(TODO)
|
||||
- Resizable Indicator (可调指示器)
|
||||
- Home Indicator (主屏指示器)
|
||||
|
||||
## 主屏指示器(Home Indicator)
|
||||
|
||||
主屏指示器应具备的功能：
|
||||
|
||||
- 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页
|
||||
- 应用内，向上拨动且不减速，进入主屏页
|
||||
- 应用内，向上拨动且减速至0，进入任务管理页
|
||||
- 应用内，向上拨动且减速至 0，进入任务管理页
|
||||
- 主屏内，向右滑动，打开最近的后台应用
|
||||
- 应用内，向右滑动，打开最近的后台应用
|
||||
- 应用内，向左滑动，打开之前切换的后台应用
|
||||
|
||||
设计时应具备的功能：
|
||||
|
||||
- 手指在抓取器上的状态
|
||||
- 向各个方向移动的事件指向
|
||||
- 移动的二维尺度(x,y)
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
|
||||
自身发送事件
|
||||
|
||||
向上拨动y轴超出一定距离，则发出 'go-home'
|
||||
向上拨动y轴超出一定距离，则发出 'go-task'
|
||||
向左拨动x轴超出一定距离，则发出 'go-prev'
|
||||
向右拨动x轴超出一定距离，则发出 'go-next'
|
||||
向上拨动 y 轴超出一定距离，则发出 'go-home'
|
||||
向上拨动 y 轴超出一定距离，则发出 'go-task'
|
||||
向左拨动 x 轴超出一定距离，则发出 'go-prev'
|
||||
向右拨动 x 轴超出一定距离，则发出 'go-next'
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export class HomeBarIndicator extends StarBaseElement {
|
|||
*
|
||||
* 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序
|
||||
*
|
||||
*/
|
||||
*/
|
||||
// this.addEventListener('tap', log, {once:true});
|
||||
// this.addEventListener('doubletap', log);
|
||||
// this.addEventListener('panstart', log);
|
||||
|
|
|
|||
|
|
@ -1269,13 +1269,10 @@ class GaiaContainer extends LitElement {
|
|||
* 交换被拖拽元素位置
|
||||
*/
|
||||
dropElement_bak() {
|
||||
let {dropTarget, dropChild, isPage, pagination} =
|
||||
this.getChildFromPoint(
|
||||
this._dnd.gridPosition.x +
|
||||
(this._dnd.last.pageX - this._dnd.start.pageX),
|
||||
this._dnd.gridPosition.y +
|
||||
(this._dnd.last.pageY - this._dnd.start.pageY)
|
||||
)
|
||||
let {dropTarget, dropChild, isPage, pagination} = this.getChildFromPoint(
|
||||
this._dnd.gridPosition.x + (this._dnd.last.pageX - this._dnd.start.pageX),
|
||||
this._dnd.gridPosition.y + (this._dnd.last.pageY - this._dnd.start.pageY)
|
||||
)
|
||||
if (this._staticElements.includes(dropTarget)) return
|
||||
|
||||
this._dnd.dropTarget = dropTarget
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ export class IndicatorPagePoint extends LitElement {
|
|||
|
||||
#firstRender = true
|
||||
|
||||
protected shouldUpdate(
|
||||
_changedProperties: PropertyValueMap<this>
|
||||
): boolean {
|
||||
protected shouldUpdate(_changedProperties: PropertyValueMap<this>): boolean {
|
||||
let isShouldUpdate = true
|
||||
|
||||
if (this.total < 1) {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
# 输入框-Input
|
||||
|
||||
工作职责：
|
||||
|
||||
- 输入信息
|
||||
|
||||
## 特点
|
||||
|
||||
拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法
|
||||
拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该 input，弹起输入法
|
||||
删除图标在 input 中文字为空时应不显示
|
||||
input应拥有可配置的默认值(对于一些总要类型，需强制配置)
|
||||
input 应拥有可配置的默认值(对于一些总要类型，需强制配置)
|
||||
|
||||
## 类型包括
|
||||
|
||||
- input输入|删除图标
|
||||
- input 输入|删除图标
|
||||
|
||||
## 特殊说明
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
# 行-Line
|
||||
|
||||
工作职责：
|
||||
- `组合排列``有限种`内容填充物
|
||||
|
||||
- ` 组合排列``有限种 `内容填充物
|
||||
|
||||
## 特点
|
||||
|
||||
行宽 - 100%填充父容器给的宽
|
||||
行高 - 存在一个min-height，实际行高由行内填充物决定
|
||||
行高 - 存在一个 min-height，实际行高由行内填充物决定
|
||||
行中独立嵌套其他内容时，使用 slot
|
||||
|
||||
## 说明：
|
||||
|
||||
- | 用途：偏左侧 | 偏右侧
|
||||
- () 用途：可选内容
|
||||
- 主文字在上，辅助文字在下
|
||||
|
|
@ -30,10 +32,10 @@
|
|||
- 右侧图标，通常包括：
|
||||
- 下一级图标
|
||||
- 勾选类型图标
|
||||
- Loading图标
|
||||
- Loading 图标
|
||||
- 云下载图标
|
||||
- 图标组中的单个图标或多个图标
|
||||
- 图标组：加密锁图标、wifi信号强度图标、其他状态图标
|
||||
- 图标组：加密锁图标、wifi 信号强度图标、其他状态图标
|
||||
- 选择器，通常包括：
|
||||
- 时间选择器
|
||||
- 日期选择器
|
||||
|
|
@ -54,9 +56,9 @@
|
|||
- 一排复选框
|
||||
- 滑块控件
|
||||
- 步进器控件
|
||||
- input输入
|
||||
- input 输入
|
||||
- 纯文字
|
||||
- 组合的SVG
|
||||
- 组合的 SVG
|
||||
- (左侧占位) 主文字(辅助信息) | (右侧图标)
|
||||
- (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
|
||||
- (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标)
|
||||
|
|
@ -70,9 +72,9 @@
|
|||
|
||||
如：iPhone-通用-关于本机-SEID
|
||||
|
||||
### 组合的SVG
|
||||
### 组合的 SVG
|
||||
|
||||
如：iPhone-通用-iPhone储存空间
|
||||
如：iPhone-通用-iPhone 储存空间
|
||||
|
||||
### 一排复选框
|
||||
|
||||
|
|
@ -87,8 +89,8 @@
|
|||
|
||||
### (大图标) 主文字(辅助信息) | 按钮
|
||||
|
||||
如：iPhone-通用-关于本机-支持范围-Apple支持
|
||||
如：iPhone-通用-iPhone储存空间-任意应用内
|
||||
如：iPhone-通用-关于本机-支持范围-Apple 支持
|
||||
如：iPhone-通用-iPhone 储存空间-任意应用内
|
||||
|
||||
### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,25 +5,26 @@
|
|||
### overflowmenu：溢出菜单。
|
||||
|
||||
## 新需求（主页面要求——罗 9.5）
|
||||
1. 外部颜色控制（思路：使用自定义css样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义css样式的值达到从外部修改组件颜色）
|
||||
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
|
||||
思路：
|
||||
（1）首先获取button在屏幕显示的left、right、top和bottom值以及menu的width和height
|
||||
（2）对于右侧边界：right >= width ? true则menu的left = button的left : false则menu的right = button的right
|
||||
（3）对于下边界：bottom >= height ? true则menu的top = button的bottom ： false则menu的bottom = button的top
|
||||
3. 外部控制接口，事件还是属性（暂定）
|
||||
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过overlay组件实现）
|
||||
|
||||
1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
|
||||
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
|
||||
思路：
|
||||
（1）首先获取 button 在屏幕显示的 left、right、top 和 bottom 值以及 menu 的 width 和 height
|
||||
（2）对于右侧边界：right >= width ? true 则 menu 的 left = button 的 left : false 则 menu 的 right = button 的 right
|
||||
（3）对于下边界：bottom >= height ? true 则 menu 的 top = button 的 bottom ： false 则 menu 的 bottom = button 的 top
|
||||
3. 外部控制接口，事件还是属性（暂定）
|
||||
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现）
|
||||
|
||||
## 问题(9.6)
|
||||
|
||||
1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失）
|
||||
2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中）
|
||||
|
||||
|
||||
## 新要求：(9.7)
|
||||
|
||||
（1）将不需要修改的“var”变量声明变成“const”(已修改)
|
||||
（2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释）
|
||||
（3）点击一个按钮后其余按钮应关闭（方法同（1））
|
||||
（4）可以将slot增加名称从而将div以删除
|
||||
（5）定位方式修改为相对定位，将将fixed改为relative，达到适应效果
|
||||
（6）控制菜单栏宽度，菜单栏中star-ul中的ul标签负责扩充大小，修改其width值
|
||||
（4）可以将 slot 增加名称从而将 div 以删除
|
||||
（5）定位方式修改为相对定位，将将 fixed 改为 relative，达到适应效果
|
||||
（6）控制菜单栏宽度，菜单栏中 star-ul 中的 ul 标签负责扩充大小，修改其 width 值
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class StarOverflowMenu extends LitElement {
|
|||
const bodywidth = document.documentElement.clientWidth
|
||||
const bodyheight = document.documentElement.clientHeight
|
||||
// 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement
|
||||
const mu = this.renderRoot.querySelector("#menuitem") as HTMLElement
|
||||
const mu = this.renderRoot.querySelector('#menuitem') as HTMLElement
|
||||
// 获取star-button相对屏幕的位置
|
||||
const buttonposition = this.renderRoot
|
||||
.querySelector('star-button')
|
||||
|
|
@ -40,7 +40,7 @@ export class StarOverflowMenu extends LitElement {
|
|||
for (var i = 0; i < this._evenEl.length; i++) {
|
||||
const slotelement = this._evenEl[i]
|
||||
// 设置div显示display状态
|
||||
mu.style.display = "block"
|
||||
mu.style.display = 'block'
|
||||
// 设置显示位置类型
|
||||
// this._evenEl[i].style.position = 'fixed'
|
||||
slotelement.style.position = 'relative'
|
||||
|
|
@ -49,20 +49,24 @@ export class StarOverflowMenu extends LitElement {
|
|||
const menuwidth = slotelement.getBoundingClientRect().width
|
||||
const menuheight = slotelement.getBoundingClientRect().height
|
||||
// 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域
|
||||
const rightline = (buttonright + menuwidth > bodywidth)?true:false
|
||||
const bottomline = (buttonbottom + menuheight > bodyheight)?true:false
|
||||
const rightline = buttonright + menuwidth > bodywidth ? true : false
|
||||
const bottomline = buttonbottom + menuheight > bodyheight ? true : false
|
||||
// 右下角边界
|
||||
if (rightline && bottomline) {
|
||||
slotelement.style.left = -(menuwidth - (buttonright - buttonleft)) + 'px'
|
||||
slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
|
||||
slotelement.style.left =
|
||||
-(menuwidth - (buttonright - buttonleft)) + 'px'
|
||||
slotelement.style.bottom =
|
||||
menuheight + (buttonbottom - buttontop) + 'px'
|
||||
return
|
||||
} else if (rightline) {
|
||||
// 右侧边界
|
||||
slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px'
|
||||
slotelement.style.right =
|
||||
menuwidth - (buttonright - buttonleft) + 'px'
|
||||
return
|
||||
} else if (bottomline) {
|
||||
// 下侧边界
|
||||
slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
|
||||
slotelement.style.bottom =
|
||||
menuheight + (buttonbottom - buttontop) + 'px'
|
||||
return
|
||||
} else {
|
||||
// 正常情况
|
||||
|
|
@ -71,7 +75,7 @@ export class StarOverflowMenu extends LitElement {
|
|||
}
|
||||
} else {
|
||||
for (var i = 0; i < this._evenEl.length; i++) {
|
||||
mu.style.display = "none"
|
||||
mu.style.display = 'none'
|
||||
this.open = true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export const sharedStyles: CSSResult = css`
|
|||
:host {
|
||||
width: auto;
|
||||
display: block;
|
||||
text-align: left
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#menuitem {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# 全局overlay
|
||||
# 全局 overlay
|
||||
|
||||
## 类型包括：
|
||||
|
||||
- 置于底部的overlay，内可填充ul
|
||||
- 置于底部的 overlay，内可填充 ul
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
# star-picker
|
||||
|
||||
星光组件--picker组件(8月30日)
|
||||
星光组件--picker 组件(8 月 30 日)
|
||||
|
||||
# 介绍
|
||||
|
||||
|
||||
1. type：实现了用type属性控制不同大小的picker选择框，包括small、medium、large、extralarge
|
||||
1. type：实现了用 type 属性控制不同大小的 picker 选择框，包括 small、medium、large、extralarge
|
||||
|
||||
```html demo
|
||||
<star-picker type="small" hide-value>
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
</star-picker>
|
||||
|
||||
<star-picker type="medium" hide-value>
|
||||
<star-picker-option value="1" >red</star-picker-option>
|
||||
<star-picker-option value="1">red</star-picker-option>
|
||||
<star-picker-option value="2">yellow</star-picker-option>
|
||||
<star-picker-option value="3">blue</star-picker-option>
|
||||
</star-picker>
|
||||
|
|
@ -34,6 +33,7 @@
|
|||
```
|
||||
|
||||
2. hide-value：实现了隐藏选择项的索引值
|
||||
|
||||
```html demo
|
||||
<star-picker hide-value>
|
||||
<star-picker-option value="1">red</star-picker-option>
|
||||
|
|
@ -42,7 +42,8 @@
|
|||
</star-picker>
|
||||
```
|
||||
|
||||
3. disable：实现了picker选择框的禁用状态
|
||||
3. disable：实现了 picker 选择框的禁用状态
|
||||
|
||||
```html demo
|
||||
<star-picker disable>
|
||||
<star-picker-option value="1">red</star-picker-option>
|
||||
|
|
|
|||
|
|
@ -1,129 +1,129 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
:host {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:host,
|
||||
.input {
|
||||
font-family: sans-serif;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
}
|
||||
:host,
|
||||
.input {
|
||||
font-family: sans-serif;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input,
|
||||
.value-container {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.input,
|
||||
.value-container {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #2DA7E0;
|
||||
box-shadow: inset 0 0 0 1000px #FFFFFF!important;
|
||||
}
|
||||
.input:focus {
|
||||
background: #ffffff;
|
||||
border: 1px solid #2da7e0;
|
||||
box-shadow: inset 0 0 0 1000px #ffffff !important;
|
||||
}
|
||||
|
||||
.main-options-container {
|
||||
position: relative;
|
||||
}
|
||||
.main-options-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
width: 100%;
|
||||
}
|
||||
.options-container {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option,
|
||||
.value-container {
|
||||
display: flex;
|
||||
}
|
||||
.option,
|
||||
.value-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 10px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.option {
|
||||
padding: 10px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
.option:hover {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.option-value,
|
||||
.value,
|
||||
.magnifying-glass {
|
||||
flex-shrink: 0;
|
||||
width: 15px;
|
||||
}
|
||||
.option-value,
|
||||
.value,
|
||||
.magnifying-glass {
|
||||
flex-shrink: 0;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.option-label,
|
||||
.label,
|
||||
.placeholder {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.option-label,
|
||||
.label,
|
||||
.placeholder {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
}
|
||||
.placeholder-text {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.label,
|
||||
.option-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.label,
|
||||
.option-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.no-results {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
:host([hide-value]) .value,
|
||||
:host([hide-value]) .option-value {
|
||||
display: none;
|
||||
}
|
||||
:host([hide-value]) .value,
|
||||
:host([hide-value]) .option-value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([disable]){
|
||||
pointer-events: none;
|
||||
color: #c0c4cc;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
:host([disable]) {
|
||||
pointer-events: none;
|
||||
color: #c0c4cc;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 4px 6px;
|
||||
font-size: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.small {
|
||||
padding: 4px 6px;
|
||||
font-size: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.medium {
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.large {
|
||||
padding: 8px 15px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.large {
|
||||
padding: 8px 15px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.extralarge {
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.extralarge {
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
`
|
||||
|
|
@ -1,21 +1,19 @@
|
|||
/* eslint-disable lit-a11y/click-events-have-key-events */
|
||||
import { html,LitElement, CSSResultArray } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import {styleMap} from 'lit/directives/style-map.js'
|
||||
import {sharedStyles} from './picker-styles'
|
||||
|
||||
|
||||
interface StarPickerOption {
|
||||
value: string;
|
||||
label: string;
|
||||
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export enum PickerType {
|
||||
SMALL = 'small',
|
||||
MEDIUM = 'medium',
|
||||
LARGE = 'large',
|
||||
EXTRALARGE = 'extralarge'
|
||||
EXTRALARGE = 'extralarge',
|
||||
}
|
||||
|
||||
@customElement('star-picker')
|
||||
|
|
@ -24,78 +22,83 @@ export class StarPicker extends LitElement {
|
|||
return [sharedStyles]
|
||||
}
|
||||
|
||||
@property({ type: PickerType}) type = '';
|
||||
@property({type: PickerType}) type = ''
|
||||
|
||||
@property({ type: String }) tabindex = '0';
|
||||
@property({type: String}) tabindex = '0'
|
||||
|
||||
@property({ type: String }) placeholder = '';
|
||||
@property({type: String}) placeholder = ''
|
||||
|
||||
@property({ type: String }) value = '';
|
||||
@property({type: String}) value = ''
|
||||
|
||||
@property({ type: Boolean, attribute: 'hide-value' }) hideValue = false;
|
||||
@property({type: Boolean, attribute: 'hide-value'}) hideValue = false
|
||||
|
||||
@property({ type: Boolean, attribute: 'disable'}) disAble = false;
|
||||
@property({type: Boolean, attribute: 'disable'}) disAble = false
|
||||
|
||||
@property({ type: Boolean, attribute: 'small'}) small = false;
|
||||
@property({type: Boolean, attribute: 'small'}) small = false
|
||||
|
||||
@property({ type: Boolean, attribute: 'medium'}) medium = false;
|
||||
@property({type: Boolean, attribute: 'medium'}) medium = false
|
||||
|
||||
@property({ type: Boolean, attribute: 'large'}) large = false;
|
||||
@property({type: Boolean, attribute: 'large'}) large = false
|
||||
|
||||
@property({ type: Boolean, attribute: 'extralarge'}) extralarge = false;
|
||||
@property({type: Boolean, attribute: 'extralarge'}) extralarge = false
|
||||
|
||||
@property({ type: String, attribute: 'value-pattern' }) valuePattern =
|
||||
'\\d{1,5}';
|
||||
@property({type: String, attribute: 'value-pattern'}) valuePattern =
|
||||
'\\d{1,5}'
|
||||
|
||||
@state() private _searchState: Boolean = false;
|
||||
@state() private _searchState: Boolean = false
|
||||
|
||||
@state() private _options: StarPickerOption[] = [];
|
||||
@state() private _options: StarPickerOption[] = []
|
||||
|
||||
@state() private _query: String = '';
|
||||
@state() private _query: String = ''
|
||||
|
||||
firstUpdated() {
|
||||
this.setAttribute('tabindex', this.tabindex);
|
||||
this.setAttribute('tabindex', this.tabindex)
|
||||
|
||||
this.addEventListener('keydown', e => {
|
||||
this.addEventListener('keydown', (e) => {
|
||||
if (this._searchState === false) {
|
||||
this._onKeyDownValueContainer(e);
|
||||
this._onKeyDownValueContainer(e)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
this.addEventListener('blur', () => { //聚焦事件
|
||||
this._searchState = false;
|
||||
this.addEventListener('blur', () => {
|
||||
//聚焦事件
|
||||
this._searchState = false
|
||||
|
||||
const pattern = new RegExp(this.valuePattern); //正则表达式匹配字符串
|
||||
if (pattern.test(this._query as string)) { //返回是否匹配
|
||||
this.value = this._query as string;//类型断言
|
||||
const pattern = new RegExp(this.valuePattern) //正则表达式匹配字符串
|
||||
if (pattern.test(this._query as string)) {
|
||||
//返回是否匹配
|
||||
this.value = this._query as string //类型断言
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
this._updateOptionsList();
|
||||
this._updateOptionsList()
|
||||
|
||||
const observer = new MutationObserver(() => { //js监听dom元素的属性变化
|
||||
this._updateOptionsList();
|
||||
});
|
||||
const observer = new MutationObserver(() => {
|
||||
//js监听dom元素的属性变化
|
||||
this._updateOptionsList()
|
||||
})
|
||||
|
||||
//开始观察目标节点的DOM元素的属性变化
|
||||
observer.observe(this as Node, { //将this作为节点
|
||||
observer.observe(this as Node, {
|
||||
//将this作为节点
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const selectedOption = this._options.find( //查找数组中符合条件的第一个元素
|
||||
option => option.value === this.value //比较是不是严格相等
|
||||
);
|
||||
const label = selectedOption ? selectedOption.label : null; //判断返回值
|
||||
const selectedOption = this._options.find(
|
||||
//查找数组中符合条件的第一个元素
|
||||
(option) => option.value === this.value //比较是不是严格相等
|
||||
)
|
||||
const label = selectedOption ? selectedOption.label : null //判断返回值
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="main-options-container"
|
||||
style=${styleMap({ display: this._searchState ? 'block' : 'none' })}
|
||||
style=${styleMap({display: this._searchState ? 'block' : 'none'})}
|
||||
>
|
||||
<input
|
||||
class="input ${this.type}"
|
||||
|
|
@ -106,9 +109,9 @@ export class StarPicker extends LitElement {
|
|||
/>
|
||||
<div class="options-container">
|
||||
${this._options
|
||||
.filter(option => this._doesOptionMatchQuery(option))
|
||||
.filter((option) => this._doesOptionMatchQuery(option))
|
||||
.map(
|
||||
option => html`
|
||||
(option) => html`
|
||||
<div
|
||||
class="option"
|
||||
@click="${() => this._onClickOption(option)}"
|
||||
|
|
@ -118,14 +121,16 @@ export class StarPicker extends LitElement {
|
|||
</div>
|
||||
`
|
||||
)}
|
||||
${this._options.filter(option => this._doesOptionMatchQuery(option)) //过滤元素
|
||||
${this._options.filter((option) => this._doesOptionMatchQuery(option)) //过滤元素
|
||||
.length === 0 && this._query.length > 0
|
||||
? html` <div class="no-results">No results</div> `
|
||||
? html`
|
||||
<div class="no-results">No results</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style=${styleMap({ display: this._searchState ? 'none' : 'flex' })}
|
||||
style=${styleMap({display: this._searchState ? 'none' : 'flex'})}
|
||||
@click="${this._onClickValueContainer}"
|
||||
class="value-container ${this.type}"
|
||||
>
|
||||
|
|
@ -134,47 +139,52 @@ export class StarPicker extends LitElement {
|
|||
<div class="value">${this.value}</div>
|
||||
<div class="label">
|
||||
${label ||
|
||||
html`<span class="placeholder-text">Loading...</span>`}
|
||||
html`
|
||||
<span class="placeholder-text">Loading...</span>
|
||||
`}
|
||||
</div>
|
||||
<div @click="${this._onClickClearButton}"><img src="src/assets/close.svg" class="magnifying-glass">
|
||||
<div @click="${this._onClickClearButton}">
|
||||
<img src="src/assets/close.svg" class="magnifying-glass" />
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="placeholder">
|
||||
<span class="placeholder-text">${this.placeholder}</span>
|
||||
</div>
|
||||
<div class="magnifying-glass"><img src="src/assets/down.svg"></div>
|
||||
<div class="magnifying-glass">
|
||||
<img src="src/assets/down.svg" />
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
`
|
||||
}
|
||||
|
||||
private _updateOptionsList() {
|
||||
const options = this.querySelectorAll('star-picker-option');
|
||||
this._options = Array.from(options).map(option => ({
|
||||
const options = this.querySelectorAll('star-picker-option')
|
||||
this._options = Array.from(options).map((option) => ({
|
||||
value: option.getAttribute('value'),
|
||||
label: option.textContent,
|
||||
})) as StarPickerOption[];
|
||||
})) as StarPickerOption[]
|
||||
}
|
||||
|
||||
private _onChangeQueryInput(e: KeyboardEvent) {
|
||||
const queryInput = e.target! as HTMLInputElement;
|
||||
this._query = queryInput.value;
|
||||
const queryInput = e.target! as HTMLInputElement
|
||||
this._query = queryInput.value
|
||||
}
|
||||
|
||||
private _onKeyDownQueryInput(e: KeyboardEvent) {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
this._searchState = false;
|
||||
e.preventDefault()
|
||||
this._searchState = false
|
||||
|
||||
const pattern = new RegExp(this.valuePattern);
|
||||
const pattern = new RegExp(this.valuePattern)
|
||||
if (pattern.test(this._query as string)) {
|
||||
this.value = this._query as string;
|
||||
this.value = this._query as string
|
||||
}
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.focus();
|
||||
});
|
||||
this.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,49 +192,50 @@ export class StarPicker extends LitElement {
|
|||
return (
|
||||
option.label.toLowerCase().includes(this._query.toLowerCase()) || //转换位小写后判断是否包含
|
||||
option.value.toLocaleLowerCase() === this._query.toLocaleLowerCase()
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
private _onClickOption(option: StarPickerOption) {
|
||||
this.value = option.value;
|
||||
this._searchState = false;
|
||||
this.updateComplete.then(() => { //更新完成
|
||||
this.focus(); //聚焦元素
|
||||
});
|
||||
this.value = option.value
|
||||
this._searchState = false
|
||||
this.updateComplete.then(() => {
|
||||
//更新完成
|
||||
this.focus() //聚焦元素
|
||||
})
|
||||
}
|
||||
|
||||
private _onClickValueContainer() {
|
||||
this._openOptionsContainer();
|
||||
this._openOptionsContainer()
|
||||
}
|
||||
|
||||
private _onKeyDownValueContainer(e: KeyboardEvent) {
|
||||
if (e.code === 'Space') {
|
||||
this._openOptionsContainer();
|
||||
e.preventDefault();
|
||||
this._openOptionsContainer()
|
||||
e.preventDefault()
|
||||
} else if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
this.value = '';
|
||||
this.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
private _onClickClearButton(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
this.value = '';
|
||||
e.stopPropagation()
|
||||
this.value = ''
|
||||
this.updateComplete.then(() => {
|
||||
this.focus();
|
||||
});
|
||||
this.focus()
|
||||
})
|
||||
}
|
||||
|
||||
private _openOptionsContainer() {
|
||||
this._searchState = true;
|
||||
this._searchState = true
|
||||
if (this.value !== '' && this.hideValue === false) {
|
||||
this._query = this.value;
|
||||
this._query = this.value
|
||||
} else {
|
||||
this._query = '';
|
||||
this._query = ''
|
||||
}
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.shadowRoot?.querySelector('input')?.select();
|
||||
});
|
||||
this.shadowRoot?.querySelector('input')?.select()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -233,5 +244,3 @@ declare global {
|
|||
'star-picker': StarPicker
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# 提示输入弹窗-Prompt
|
||||
|
||||
参考：UI设计
|
||||
参考：UI 设计
|
||||
|
||||
## 内容排布
|
||||
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
```
|
||||
|
||||
特点：
|
||||
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
|
||||
|
|
@ -24,4 +25,4 @@
|
|||
|
||||
- button
|
||||
- input
|
||||
- 外部链接slot
|
||||
- 外部链接 slot
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
|
||||
@customElement('star-prompt')
|
||||
export class StarPrompt extends LitElement {
|
||||
|
|
@ -10,14 +10,10 @@ export class StarPrompt extends LitElement {
|
|||
bar = ''
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
`
|
||||
return html``
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
static styles = css``
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,71 +1,48 @@
|
|||
# star-radio and star-radio group
|
||||
星光 Web 组件——单选框组件：radio组件介绍（8月31日)
|
||||
|
||||
星光 Web 组件——单选框组件：radio 组件介绍（8 月 31 日)
|
||||
|
||||
## 介绍
|
||||
star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
|
||||
star-radio属性：
|
||||
|
||||
### 1、checkedType属性
|
||||
单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义
|
||||
```html demo
|
||||
<star-radio-group checkedType="round">
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 2、checked属性
|
||||
Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。
|
||||
```html demo
|
||||
<star-radio-group>
|
||||
<star-radio checked></star-radio>
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 3、checkedLocation属性
|
||||
单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio checked></star-radio>
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 4、label属性
|
||||
UI界面中的正文主体文本内容
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio label="content1" checked></star-radio>
|
||||
<star-radio> label="content2"</star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 5、node属性
|
||||
UI界面中的正文主体文本内容下方补充扩展文本内容
|
||||
``` html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 6、icon属性
|
||||
控制ui界面中的图标字体样式属性
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 7、iconcolor属性
|
||||
控制图标字体颜色样式属性，和icon属性同时使用时起作用
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 8、disabled属性
|
||||
控制单选框按钮禁用状态，默认为：false。
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio>
|
||||
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
star-radio 和 star-radio-group 为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
|
||||
star-radio 属性：
|
||||
|
||||
### 1、checkedType 属性
|
||||
|
||||
单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义
|
||||
`html demo <star-radio-group checkedType="round"> <star-radio></star-radio> <star-radio-group> `
|
||||
|
||||
### 2、checked 属性
|
||||
|
||||
Booloean 类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为 false，不选中状态。
|
||||
`html demo <star-radio-group> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
|
||||
|
||||
### 3、checkedLocation 属性
|
||||
|
||||
单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
|
||||
`html demo <star-radio-group checkedLocation="right"> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
|
||||
|
||||
### 4、label 属性
|
||||
|
||||
UI 界面中的正文主体文本内容
|
||||
`html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" checked></star-radio> <star-radio> label="content2"</star-radio> <star-radio-group> `
|
||||
|
||||
### 5、node 属性
|
||||
|
||||
UI 界面中的正文主体文本内容下方补充扩展文本内容
|
||||
`html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" label2="expand1" checked></star-radio> <star-radio> label="content2" label2="expand2" </star-radio> <star-radio-group> `
|
||||
|
||||
### 6、icon 属性
|
||||
|
||||
控制 ui 界面中的图标字体样式属性
|
||||
`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio> <star-radio-group> `
|
||||
|
||||
### 7、iconcolor 属性
|
||||
|
||||
控制图标字体颜色样式属性，和 icon 属性同时使用时起作用
|
||||
`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio> <star-radio-group> `
|
||||
|
||||
### 8、disabled 属性
|
||||
|
||||
控制单选框按钮禁用状态，默认为：false。
|
||||
`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio> <star-radio-group> `
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const sharedStyles: CSSResult = css`
|
|||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
/*按钮选中状态*/
|
||||
/*按钮选中状态*/
|
||||
.star-radio.checked {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@
|
|||
|
||||
付费|免费|畅销排行
|
||||
|
||||
过去24小时|过去4天
|
||||
过去 24 小时|过去 4 天
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
工作职责：
|
||||
|
||||
- 滑块空间
|
||||
- 滑块拖动后返回value值
|
||||
- 滑块拖动后返回 value 值
|
||||
|
||||
## 类型包括：
|
||||
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
```
|
||||
<star-slider></star-slider>
|
||||
```
|
||||
|
||||
2. `coverWidth` --- 初始填充
|
||||
|
||||
```
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
<star-slider disabled></star-slider>
|
||||
<star-slider disabled coverWidth="150px"></star-slider>
|
||||
```
|
||||
|
||||
4. `unfilled` --- 滑块中小球左侧不进行填充
|
||||
|
||||
```
|
||||
|
|
@ -33,27 +35,25 @@
|
|||
<star-slider unfilled coverWidth="30%" disabled></star-slider>
|
||||
```
|
||||
|
||||
|
||||
5. `Tick` --- 分格滑块(默认是unfilled属性)
|
||||
min=0,mix=100，按照需求填写step(每一格）的大小<br>
|
||||
5. `Tick` --- 分格滑块(默认是 unfilled 属性)
|
||||
min=0,mix=100，按照需求填写 step(每一格）的大小<br>
|
||||
example : <br>
|
||||
step="25" 表示把slider分为4块<br>
|
||||
step="25" 表示把 slider 分为 4 块<br>
|
||||
coverWidth="40%" 表示初始小球落在第二格上
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<star-slider tick step="10"></star-slider>
|
||||
<star-slider tick step="20" coverWidth="40%" disabled></star-slider>
|
||||
```
|
||||
6. `vertical` --- 垂直slider
|
||||
|
||||
6. `vertical` --- 垂直 slider
|
||||
|
||||
```
|
||||
<star-slider vertical></star-slider>
|
||||
<star-slider vertical disabled></star-slider>
|
||||
<star-slider vertical coverWidth="50%"></star-slider>
|
||||
```
|
||||
|
||||
7. 左侧图标|滑块|右侧图标
|
||||
|
||||
```
|
||||
|
|
@ -63,5 +63,6 @@
|
|||
```
|
||||
|
||||
## 后续需解决的问题：
|
||||
- tick 属性中小球不能完全覆盖step
|
||||
|
||||
- tick 属性中小球不能完全覆盖 step
|
||||
- vertical 属性变化太快
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
# SVG图标容器-SVG Icon
|
||||
# SVG 图标容器-SVG Icon
|
||||
|
||||
参照物:
|
||||
|
||||
- https://github.com/apple/swift-docc-render.git
|
||||
- src/components/SVGIcon.vue
|
||||
- src/components/Icons
|
||||
|
||||
使用 <svg-icon> 元素，可以通过拷贝SVG的主体内容(如一个绘制路径path)到标签内,来实现SVG图标的显示。
|
||||
使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。
|
||||
|
||||
好处：
|
||||
- 内联加载SVG矢量图标
|
||||
- 可动态操作SVG，通过修改扩展的svg-icon的属性值（如颜色、填充等）
|
||||
|
||||
- 内联加载 SVG 矢量图标
|
||||
- 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等）
|
||||
|
||||
目标物：
|
||||
1. SVG内容填充
|
||||
2. 普通的SVG图标
|
||||
3. 动态的SVG应用图标(时钟、日历、设置、安装应用过程中)
|
||||
|
||||
1. SVG 内容填充
|
||||
2. 普通的 SVG 图标
|
||||
3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import '../svgicon'
|
||||
|
||||
@customElement('example-icon')
|
||||
|
|
@ -16,9 +16,7 @@ export class ExampleIcon extends LitElement {
|
|||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
static styles = css``
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
|
||||
@customElement('svg-icon')
|
||||
export class SvgIcon extends LitElement {
|
||||
|
|
@ -10,14 +10,10 @@ export class SvgIcon extends LitElement {
|
|||
bar = ''
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
`
|
||||
return html``
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
static styles = css``
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
# 块-无序列表-Unordered List
|
||||
|
||||
工作职责：
|
||||
- `顺序罗列``有限种`内容填充
|
||||
|
||||
- ` 顺序罗列``有限种 `内容填充
|
||||
|
||||
说明：
|
||||
|
||||
- | 用途：分割上下
|
||||
- TabBar 用于切换内容栏
|
||||
|
||||
|
|
|
|||
|
|
@ -2,21 +2,19 @@
|
|||
|
||||
## Gesture Detector Finite State Machine
|
||||
|
||||
|
||||
<center><h2>FSM状态转移表</h2></center>
|
||||
|
||||
当前状态→<br>条件↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState
|
||||
-|-|-|-|-|-|-|-|-
|
||||
收到 touchstart | touchStartedState
|
||||
收到 touchstart 且触摸点=1 | | initialState
|
||||
收到 touchstart 且触摸点>1 | | touchesStartedState
|
||||
收到 touchstart 且判定进行捏 | | | pinchState
|
||||
收到 touchstart 且判定进行旋转 | | | rotateState
|
||||
收到 touchstart 且判定进行平移 | | | panState
|
||||
收到 touchmove 且移动差值>平移阈值 || panState
|
||||
收到 touchend ||initialState||initialState|swipeState|initialState |initialState|initialState
|
||||
hold超时完成 || holdState
|
||||
|
||||
| 当前状态 →<br>条件 ↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState |
|
||||
| ---------------------------------- | ----------------- | ------------------- | ------------------- | ------------ | ---------- | ------------ | ------------ | ------------ |
|
||||
| 收到 touchstart | touchStartedState |
|
||||
| 收到 touchstart 且触摸点=1 | | initialState |
|
||||
| 收到 touchstart 且触摸点>1 | | touchesStartedState |
|
||||
| 收到 touchstart 且判定进行捏 | | | pinchState |
|
||||
| 收到 touchstart 且判定进行旋转 | | | rotateState |
|
||||
| 收到 touchstart 且判定进行平移 | | | panState |
|
||||
| 收到 touchmove 且移动差值>平移阈值 | | panState |
|
||||
| 收到 touchend | | initialState | | initialState | swipeState | initialState | initialState | initialState |
|
||||
| hold 超时完成 | | holdState |
|
||||
|
||||
## Gesture Events
|
||||
|
||||
|
|
@ -26,6 +24,7 @@ hold超时完成 || holdState
|
|||
- Usage: Select / Zoom in
|
||||
- Event: tap
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface TapEvent {
|
||||
readonly attribute TouchList touches;
|
||||
|
|
@ -39,6 +38,7 @@ Interface TapEvent {
|
|||
- Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
|
||||
- Event: panstart/panmove/panend
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface PanEvent {
|
||||
readonly attribute TouchList startTouches;
|
||||
|
|
@ -49,10 +49,12 @@ Interface PanEvent {
|
|||
```
|
||||
|
||||
### SwipeEvent
|
||||
|
||||
- Definition: One fingers press, move quickly, lift
|
||||
- Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
|
||||
- Event: swipestart/swipemove/swipeend
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface SwipeEvent {
|
||||
readonly attribute Touch startTouch;
|
||||
|
|
@ -68,6 +70,7 @@ Interface SwipeEvent {
|
|||
- Usage: Zoom in/out
|
||||
- Event: pinchstart/pinchmove/pinchend
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface Enum PinchZoom {
|
||||
IN,
|
||||
|
|
@ -88,6 +91,7 @@ Interface PinchEvent {
|
|||
- Usage: Select an element,
|
||||
- Event: longpress
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface LongPressEvent {
|
||||
readonly attribute TouchList pressTouches;
|
||||
|
|
@ -101,6 +105,7 @@ Interface LongPressEvent {
|
|||
- Usage: Selection / Context menu
|
||||
- Event: doubletap
|
||||
- Interface
|
||||
|
||||
```idl
|
||||
Interface DoubleTapEvent {
|
||||
readonly attribute TouchList firstTapTouches;
|
||||
|
|
@ -115,6 +120,7 @@ Interface DoubleTapEvent {
|
|||
- Usage: Rotate content, a picture or a map.
|
||||
- Event: rotatestart/rotatemove/rotateend
|
||||
- Interface
|
||||
|
||||
```ts
|
||||
Interface RotateEvent {
|
||||
readonly attribute TouchList startTouches;
|
||||
|
|
|
|||
|
|
@ -1,85 +1,84 @@
|
|||
import {html, LitElement, CSSResultArray} from "lit"
|
||||
import {customElement} from "lit/decorators.js"
|
||||
import {sharedStyles} from "../shared-styles"
|
||||
import "../../../components/card/card"
|
||||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {sharedStyles} from '../shared-styles'
|
||||
import '../../../components/card/card'
|
||||
|
||||
@customElement("panel-card")
|
||||
@customElement('panel-card')
|
||||
export class PanelCard extends LitElement {
|
||||
render() {
|
||||
return html `
|
||||
<div>
|
||||
<h4>基础卡片</h4>
|
||||
<star-card
|
||||
type="base"
|
||||
image="./src/test/panels/card/image/1.png"
|
||||
heading="基础卡片"
|
||||
subheading="详情叙述"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<h4>链接卡片</h4>
|
||||
<star-card
|
||||
type="linkcard"
|
||||
link="https://www.kylinos.cn/"
|
||||
image="./src/test/panels/card/image/1.png"
|
||||
heading="连接卡片"
|
||||
subheading="详情叙述"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<h4>无图卡片</h4>
|
||||
<star-card
|
||||
type="labelonly"
|
||||
heading="无图卡片"
|
||||
subheading="内容展示"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<h4>无页脚卡片</h4>
|
||||
<star-card
|
||||
type="footerdeleted"
|
||||
image="./src/test/panels/card/image/2.jpg"
|
||||
heading="无页脚卡片"
|
||||
subheading="内容展示"
|
||||
></star-card>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<h4>只图卡片</h4>
|
||||
<star-card
|
||||
type="imageonly"
|
||||
image="./src/test/panels/card/image/2.jpg"
|
||||
></star-card>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<h4>基础卡片</h4>
|
||||
<star-card
|
||||
type="base"
|
||||
image="./src/test/panels/card/image/1.png"
|
||||
heading="基础卡片"
|
||||
subheading="详情叙述"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<h4>链接卡片</h4>
|
||||
<star-card
|
||||
type="linkcard"
|
||||
link="https://www.kylinos.cn/"
|
||||
image="./src/test/panels/card/image/1.png"
|
||||
heading="连接卡片"
|
||||
subheading="详情叙述"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<h4>无图卡片</h4>
|
||||
<star-card
|
||||
type="labelonly"
|
||||
heading="无图卡片"
|
||||
subheading="内容展示"
|
||||
footer="footer"
|
||||
></star-card>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<h4>无页脚卡片</h4>
|
||||
<star-card
|
||||
type="footerdeleted"
|
||||
image="./src/test/panels/card/image/2.jpg"
|
||||
heading="无页脚卡片"
|
||||
subheading="内容展示"
|
||||
></star-card>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<h4>只图卡片</h4>
|
||||
<star-card
|
||||
type="imageonly"
|
||||
image="./src/test/panels/card/image/2.jpg"
|
||||
></star-card>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"panel-card": PanelCard
|
||||
}
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-card': PanelCard
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ export class PanelHomeIndicator extends LitElement {
|
|||
@state()
|
||||
bar = ''
|
||||
|
||||
|
||||
attributeChangedCallback(name: string, _old: string, value: string): void {
|
||||
super.attributeChangedCallback(name, _old, value)
|
||||
console.log(name)
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class PanelPicker extends LitElement {
|
|||
<label>
|
||||
<span>medium</span>
|
||||
<star-picker type="medium" hide-value>
|
||||
<star-picker-option value="1" >red</star-picker-option>
|
||||
<star-picker-option value="1">red</star-picker-option>
|
||||
<star-picker-option value="2">yellow</star-picker-option>
|
||||
<star-picker-option value="3">blue</star-picker-option>
|
||||
</star-picker>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedPickerStyles: CSSResult = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fafafa;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
body {
|
||||
background: #fafafa;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
width: inherit;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#demo {
|
||||
margin:20px;
|
||||
}
|
||||
#demo {
|
||||
margin: 20px;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import { css, CSSResult } from 'lit'
|
||||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const switchStyles: CSSResult = css`
|
||||
div {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
html {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--left-transform: -100vw;
|
||||
--right-transform: +100vw;
|
||||
--li-base-height: 43px;
|
||||
--li-left-padding: 10px;
|
||||
--li-right-padding: 10px;
|
||||
}
|
||||
:root {
|
||||
--left-transform: -100vw;
|
||||
--right-transform: +100vw;
|
||||
--li-base-height: 43px;
|
||||
--li-left-padding: 10px;
|
||||
--li-right-padding: 10px;
|
||||
}
|
||||
`
|
||||
|
|
@ -7,7 +7,7 @@ export default defineConfig({
|
|||
entry: 'src/index.ts',
|
||||
formats: ['es'],
|
||||
},
|
||||
outDir: 'dist/'
|
||||
outDir: 'dist/',
|
||||
// rollupOptions: {
|
||||
// external: /^lit/,
|
||||
// },
|
||||
|
|
|
|||
Loading…
Reference in New Issue