Merge pull request #20 in YR/star-web-components from feature-component-prompt to master
* commit 'e40e3176ad98244b94861ac8fc0af9f9c8035076': TASK:#108924-修改代码 TASK:#108924-修改组件的实现方式并增加了相应的功能 TASK:#108924-修改了样式 TASK:#108924-增加了内容改变的标签 TASK:#108924-增加了README.md TASK:#108924-修改了测试页 TASK:#108924-修改合并造成的bug TASK:#108924-优化了鼠标点击事件的响应范围 字体的样式细节 输入框背景色的显示bug TASK:#108924-增加了密码模式并修改了弹窗的样式 TASK:#108924-修改了picker组件的样式 TASK:#108924-完成了prompt组件基础功能和样式的开发
This commit is contained in:
汪昌棋
commit
c55db66243
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662551454749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1825" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M938.666667 317.866667m-29.866667 0a29.866667 29.866667 0 1 0 59.733333 0 29.866667 29.866667 0 1 0-59.733333 0Z" fill="#666666" p-id="1826"></path><path d="M876.8 454.4c6.4-6.4 12.8-14.933333 19.2-21.333333 8.533333-8.533333 6.4-23.466667-2.133333-29.866667-8.533333-8.533333-23.466667-6.4-29.866667 2.133333-85.333333 100.266667-209.066667 157.866667-341.333333 157.866667-166.4 0-317.866667-91.733333-394.666667-238.933333-6.4-10.666667-19.2-14.933333-27.733333-8.533334-10.666667 6.4-14.933333 19.2-8.533334 27.733334 14.933333 27.733333 32 53.333333 49.066667 76.8L64 499.2c-8.533333 8.533333-8.533333 23.466667 0 32 4.266667 4.266667 8.533333 6.4 14.933333 6.4 6.4 0 12.8-2.133333 17.066667-8.533333l72.533333-76.8c36.266667 40.533333 81.066667 72.533333 128 98.133333l-55.466666 102.4c-6.4 10.666667-2.133333 25.6 8.533333 32 2.133333 2.133333 6.4 2.133333 8.533333 2.133333 8.533333 0 17.066667-4.266667 21.333334-12.8l55.466666-104.533333c51.2 21.333333 106.666667 34.133333 162.133334 36.266667v106.666666c0 12.8 10.666667 23.466667 21.333333 23.466667 12.8 0 21.333333-10.666667 21.333333-23.466667v-106.666666c53.333333-2.133333 104.533333-12.8 151.466667-29.866667l55.466667 102.4c4.266667 8.533333 12.8 12.8 21.333333 12.8 2.133333 0 6.4 0 8.533333-2.133333 10.666667-6.4 12.8-19.2 8.533334-32l-53.333334-98.133334c40.533333-19.2 78.933333-44.8 113.066667-74.666666l74.666667 78.933333c4.266667 4.266667 10.666667 8.533333 17.066666 8.533333 4.266667 0 10.666667-2.133333 14.933334-6.4 8.533333-8.533333 8.533333-23.466667 0-32l-74.666667-78.933333z" fill="#666666" p-id="1827"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662622097048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="860" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M938.666667 317.866667m-29.866667 0a29.866667 29.866667 0 1 0 59.733333 0 29.866667 29.866667 0 1 0-59.733333 0Z" fill="#ffffff" p-id="861"></path><path d="M876.8 454.4c6.4-6.4 12.8-14.933333 19.2-21.333333 8.533333-8.533333 6.4-23.466667-2.133333-29.866667-8.533333-8.533333-23.466667-6.4-29.866667 2.133333-85.333333 100.266667-209.066667 157.866667-341.333333 157.866667-166.4 0-317.866667-91.733333-394.666667-238.933333-6.4-10.666667-19.2-14.933333-27.733333-8.533334-10.666667 6.4-14.933333 19.2-8.533334 27.733334 14.933333 27.733333 32 53.333333 49.066667 76.8L64 499.2c-8.533333 8.533333-8.533333 23.466667 0 32 4.266667 4.266667 8.533333 6.4 14.933333 6.4 6.4 0 12.8-2.133333 17.066667-8.533333l72.533333-76.8c36.266667 40.533333 81.066667 72.533333 128 98.133333l-55.466666 102.4c-6.4 10.666667-2.133333 25.6 8.533333 32 2.133333 2.133333 6.4 2.133333 8.533333 2.133333 8.533333 0 17.066667-4.266667 21.333334-12.8l55.466666-104.533333c51.2 21.333333 106.666667 34.133333 162.133334 36.266667v106.666666c0 12.8 10.666667 23.466667 21.333333 23.466667 12.8 0 21.333333-10.666667 21.333333-23.466667v-106.666666c53.333333-2.133333 104.533333-12.8 151.466667-29.866667l55.466667 102.4c4.266667 8.533333 12.8 12.8 21.333333 12.8 2.133333 0 6.4 0 8.533333-2.133333 10.666667-6.4 12.8-19.2 8.533334-32l-53.333334-98.133334c40.533333-19.2 78.933333-44.8 113.066667-74.666666l74.666667 78.933333c4.266667 4.266667 10.666667 8.533333 17.066666 8.533333 4.266667 0 10.666667-2.133333 14.933334-6.4 8.533333-8.533333 8.533333-23.466667 0-32l-74.666667-78.933333z" fill="#ffffff" p-id="862" data-spm-anchor-id="a313x.7781069.0.i1"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662604947168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1462" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="1463"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="1464"></path></svg>
|
||||
|
After Width: | Height: | Size: 871 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662623767353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1877" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="1878" fill="#ffffff"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="1879" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 901 B |
|
|
@ -1,28 +1,26 @@
|
|||
# 提示输入弹窗-Prompt
|
||||
# star-prompt
|
||||
|
||||
参考：UI 设计
|
||||
星光组件--prompt组件(9月12日)
|
||||
|
||||
## 内容排布
|
||||
# 介绍
|
||||
|
||||
- 括号中的内容为可选项
|
||||
1. 浅色模式
|
||||
|
||||
从上到下：
|
||||
|
||||
```
|
||||
标题
|
||||
(子标题)
|
||||
输入框
|
||||
输入状态提示 外部链接<slot>
|
||||
按钮1 按钮2
|
||||
```html demo
|
||||
<star-prompt></star-prompt>
|
||||
```
|
||||
|
||||
特点：
|
||||
2. 深色模式
|
||||
```html demo
|
||||
<star-prompt deep></star-prompt>
|
||||
```
|
||||
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
3. 密码模式
|
||||
```html demo
|
||||
<star-prompt password></star-prompt>
|
||||
```
|
||||
|
||||
## 关联组件
|
||||
|
||||
- button
|
||||
- input
|
||||
- 外部链接 slot
|
||||
4. 深色密码模式
|
||||
```html demo
|
||||
<star-prompt deep password></star-prompt>
|
||||
```
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
--deep--color: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.popBox {
|
||||
width: inherit;
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
text-align: center;
|
||||
padding: 3%;
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
z-index: 101;
|
||||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica,
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: dialogSlipToUP 500ms ease 1 forwards;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: inherit;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0px 1000px white inset;
|
||||
border: 2px solid #e6e8f5;
|
||||
border-radius: 6px;
|
||||
padding-left: 4%;
|
||||
padding-bottom: 2%;
|
||||
padding-top: 1.5%;
|
||||
font-family: Verdana;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
outline: none;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border: 2px solid #1d98f0;
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: 5%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.show::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
right: 0%;
|
||||
top: 30%;
|
||||
bottom: 30%;
|
||||
}
|
||||
|
||||
@keyframes dialogSlipToUP {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -100%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
text-align: right;
|
||||
margin-top: 3.5%;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: right;
|
||||
color: #292929;
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
color: #292929;
|
||||
margin-right: 20%;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sure {
|
||||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
color: #1d98f0;
|
||||
margin-left: 20%;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: #cfd8e8;
|
||||
}
|
||||
|
||||
.drop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.wifi {
|
||||
line-height: 18.2px;
|
||||
cursor: pointer;
|
||||
background: rgba(51, 51, 51, 0.06);
|
||||
color: #4d4d4d;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 45px 14px;
|
||||
margin-right: 0%;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
line-height: 18.2px;
|
||||
cursor: pointer;
|
||||
background: #1d98f0;
|
||||
color: #f0f0f0;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 45px 14px;
|
||||
margin-right: 0%;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
/*深色模式*/
|
||||
:host([deep]) .popBox {
|
||||
background: var(--deep--color);
|
||||
color: #f0f0f0;
|
||||
}
|
||||
:host([deep]) .input {
|
||||
background: rgba(98, 93, 103, 0.4);
|
||||
box-shadow: 0 0 0px 1000px rgba(98, 93, 103, 0.4) inset;
|
||||
border: 2px solid #2e3038;
|
||||
border-radius: 4px;
|
||||
color: rgba(240, 240, 240, 0.45);
|
||||
}
|
||||
:host([deep]) .input:focus {
|
||||
border: 2px solid #1d98f0;
|
||||
}
|
||||
:host([deep]) .cancel {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
:host([deep]) .vertical {
|
||||
color: #585a66;
|
||||
}
|
||||
:host([deep]) .container {
|
||||
background-color: transparent;
|
||||
}
|
||||
:host([deep]) .eye {
|
||||
background-color: transparent;
|
||||
}
|
||||
:host([deep]) .drop {
|
||||
display: block;
|
||||
}
|
||||
:host([deep]) .info {
|
||||
color: #e0e0e0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
:host([deep]) .wifi {
|
||||
background: rgba(228, 228, 228, 0.1);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/*WIFI弹窗*/
|
||||
:host([wifi]) .popBox {
|
||||
width: 512px;
|
||||
height: 700px;
|
||||
}
|
||||
:host([wifi]) .title {
|
||||
width: 150px;
|
||||
height: 26px;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .input {
|
||||
width: 486px;
|
||||
height: 60.5px;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .info {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .sure {
|
||||
width: 200px;
|
||||
height: 64px;
|
||||
left: 272px;
|
||||
top: 596px;
|
||||
border-radius: 34px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
:host([wifi]) .cancel {
|
||||
width: 200px;
|
||||
height: 64px;
|
||||
left: 48px;
|
||||
top: 596px;
|
||||
border-radius: 34px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
:host([wifi]) .group {
|
||||
margin-top: 75%;
|
||||
}
|
||||
`
|
||||
|
|
@ -1,19 +1,132 @@
|
|||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
|
||||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './prompt-styles'
|
||||
import '../button/button'
|
||||
@customElement('star-prompt')
|
||||
export class StarPrompt extends LitElement {
|
||||
@property()
|
||||
foo = ''
|
||||
|
||||
@state()
|
||||
bar = ''
|
||||
|
||||
render() {
|
||||
return html``
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
static styles = css``
|
||||
@property({type: Boolean}) open = false
|
||||
|
||||
@queryAssignedElements({flatten: true}) _evenEl: any
|
||||
|
||||
@property({type: Boolean}) modal = false
|
||||
|
||||
@property({type: Boolean}) deep = false
|
||||
|
||||
@property({type: Boolean}) password = false
|
||||
|
||||
@property({type: Boolean}) visible = false
|
||||
|
||||
@property({type: String}) label = '内容'
|
||||
|
||||
@property({type: String}) text = ''
|
||||
|
||||
@property({type: Boolean}) wifi = false
|
||||
|
||||
@property({type: String}) bone = '取消'
|
||||
|
||||
@property({type: String}) btwo = '确定'
|
||||
|
||||
@property({ type: String }) placeholder = '密码';
|
||||
|
||||
_getElement() {
|
||||
if (this.open == true) {
|
||||
this._evenEl[0].style.display = 'block'
|
||||
this._evenEl[1].style.display = 'block'
|
||||
this.open = false
|
||||
} else {
|
||||
this._evenEl[0].style.display = 'none'
|
||||
this._evenEl[1].style.display = 'none'
|
||||
this.open = true
|
||||
}
|
||||
}
|
||||
|
||||
_showpassword() {
|
||||
var popBox = this._evenEl[1] as HTMLElement
|
||||
var passwd = popBox.querySelector('.input') as HTMLInputElement
|
||||
if (this.password == true) {
|
||||
if (passwd.type == 'password') {
|
||||
passwd.type = 'text'
|
||||
this.visible = true
|
||||
} else {
|
||||
passwd.type = 'password'
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected firstUpdated(): void {
|
||||
this._getElement()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<button @click=${this._getElement}>Enter</button>
|
||||
<slot>
|
||||
<div class="cover"></div>
|
||||
<div class="popBox">
|
||||
<h3 class="title">${this.label}</h3>
|
||||
<div class="container">
|
||||
${this.password == false
|
||||
? html`
|
||||
<input
|
||||
type="text"
|
||||
name="hasReason"
|
||||
value="${this.placeholder}"
|
||||
class="input"
|
||||
/>
|
||||
`
|
||||
: html`
|
||||
<input type="password" name="hasReason" class="input" />
|
||||
<div @click=${this._showpassword} class="show">
|
||||
${this.visible == true
|
||||
? html`
|
||||
<img src="src/assets/eye.svg" class="eye" />
|
||||
<div class="drop">
|
||||
<img src="src/assets/eye_deep.svg" class="eye" />
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<img src="src/assets/close_eye.svg" class="eye" />
|
||||
<div class="drop">
|
||||
<img
|
||||
src="src/assets/close_eye_deep.svg"
|
||||
class="eye"
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
<div class="location">
|
||||
<span class="info">${this.text}</span>
|
||||
</div>
|
||||
<div class="group">
|
||||
${this.wifi == false
|
||||
? html`
|
||||
<button class="cancel" @click="${this._getElement}">
|
||||
取消
|
||||
</button>
|
||||
<button class="sure" @click="${this._getElement}">
|
||||
确定
|
||||
</button>
|
||||
`
|
||||
: html`
|
||||
<button class="cancel wifi" @click="${this._getElement}">
|
||||
${this.bone}
|
||||
</button>
|
||||
<button class="sure blue" @click="${this._getElement}">
|
||||
${this.btwo}
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
@ -21,3 +134,4 @@ declare global {
|
|||
'star-prompt': StarPrompt
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import './components/toast/toast'
|
|||
import './components/picker/picker'
|
||||
import './components/overflowmenu/overflowmenu'
|
||||
import './components/slider/slider'
|
||||
import './components/prompt/prompt'
|
||||
|
||||
@customElement('settings-app')
|
||||
export class SettingsApp extends LitElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {sharedStyles} from '../shared-styles'
|
||||
|
||||
@customElement('panel-prompt')
|
||||
export class PanelPrompt extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<label>
|
||||
<span>标准模式</span>
|
||||
<star-prompt></star-prompt>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<span>深色模式</span>
|
||||
<star-prompt deep></star-prompt>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<span>密码模式</span>
|
||||
<star-prompt password></star-prompt>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<span>深色密码模式</span>
|
||||
<star-prompt deep password></star-prompt>
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-prompt': PanelPrompt
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ import './slider/slider'
|
|||
import './container/homescreen-container'
|
||||
import './toast/toast'
|
||||
import './picker/picker'
|
||||
|
||||
import './prompt/prompt'
|
||||
type SEID = string
|
||||
|
||||
@customElement('panel-root')
|
||||
|
|
@ -144,6 +144,22 @@ export class PanelRoot extends LitElement {
|
|||
href="#radio"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="picker"
|
||||
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="溢出菜单"
|
||||
|
|
|
|||
Loading…
Reference in New Issue