Merge pull request #21 in YR/star-web-components from feature-component-confirms to master
* commit 'caa6a2b1792a7b2e5bff5087b03c20891ace3b25': TASK:#108923 confirm组件对边界测试,增加滚动条,修改button按钮样式 TASK:#108923 StarWebComponents开发-confirm
This commit is contained in:
汪昌棋
commit
0cae053316
|
|
@ -17,3 +17,4 @@
|
|||
- optimize strategy of container
|
||||
- add delay exchange feature
|
||||
- fix bugs of container exchange stradegy
|
||||
- add confirm
|
||||
|
|
|
|||
|
|
@ -153,4 +153,7 @@ export const sharedStyles: CSSResult = css`
|
|||
min-width: 32.2px;
|
||||
padding: 0px;
|
||||
}
|
||||
.start-button-confirm{
|
||||
display: inline-block;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export enum ButtonType {
|
|||
BASE = 'base',
|
||||
ICONONLY = 'icononly',
|
||||
ICONLABEL = 'iconlabel',
|
||||
Confirm = 'confirm',
|
||||
}
|
||||
|
||||
export enum ButtonSize {
|
||||
|
|
@ -125,7 +126,11 @@ export class StarButton extends LitElement {
|
|||
`
|
||||
}
|
||||
}
|
||||
|
||||
getConfirmButton(): HTMLTemplateResult{
|
||||
return html`
|
||||
<span class="start-button-confirm"><slot></slot></span>
|
||||
`
|
||||
}
|
||||
render() {
|
||||
switch (this.type) {
|
||||
case ButtonType.BASE:
|
||||
|
|
@ -134,6 +139,8 @@ export class StarButton extends LitElement {
|
|||
return this.getIconOnlyButton()
|
||||
case ButtonType.ICONLABEL:
|
||||
return this.getIconLabelButton()
|
||||
case ButtonType.Confirm:
|
||||
return this.getConfirmButton()
|
||||
default:
|
||||
console.error('unhanled 【star-button】 type')
|
||||
return nothing
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
# 确认弹窗-Confirm
|
||||
## 星光 Web 组件——确认弹窗组件：confirm组件介绍（9月13日)
|
||||
## 介绍
|
||||
star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。
|
||||
## 1、操作确认框
|
||||
使用场景：一般用于删除、卸载、二次确认等。
|
||||
## 2、消息确认框
|
||||
使用场景：一般用于确认权限、安全提示、功能开启提示等。
|
||||
|
||||
参考：UI设计
|
||||
|
||||
|
|
@ -13,14 +19,36 @@
|
|||
标题
|
||||
子标题
|
||||
按钮1(按钮2)
|
||||
(复选框)(复选框文本)
|
||||
```
|
||||
|
||||
特点：
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
- 支持静态资源插槽(此处为图片)
|
||||
- 支持确认回调
|
||||
- 支持取消回调
|
||||
|
||||
## 关联组件
|
||||
|
||||
- button
|
||||
- 静态资源容器
|
||||
- 静态资源容器
|
||||
- checkbox
|
||||
|
||||
## 基本用法
|
||||
通过click事件调用Confirm函数，根据传入属性的不同显示不同的弹出框类型
|
||||
```
|
||||
Confirm({
|
||||
type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
|
||||
model：'', 支持深色模式和浅色模式,默认背景是深色模式
|
||||
image: '', 图标slot插槽
|
||||
headline: '', 标题
|
||||
subtitle: '', 子标题
|
||||
checkBoxText: '', 复选框文本(checkbox插槽)
|
||||
confirmButtonText: '', 操作按钮()
|
||||
cancelButtonText: '', 取消
|
||||
location: '', 弹出框位置，默认是在屏幕中心弹出
|
||||
onConfirm: () => {}, 确认回调函数
|
||||
onCancel: () => {}, 取消回调函数
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
.star-confirm-background {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #00000033;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.top-center-popup {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.bottom-center-popup {
|
||||
align-items: flex-end;
|
||||
}
|
||||
/*非模态模式*/
|
||||
.non-modal-mode {
|
||||
background-color: transparent !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.star-confirm-subject {
|
||||
width: 370px;
|
||||
background: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.star-confirm-main {
|
||||
padding: 30px 20px 10px 20px;
|
||||
color: #2c0404;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
::slotted(.star-confirm-image) {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.star-confirm-title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: #f0f0f0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.star-confirm-subtitle {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
color: #e0e0e0;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
line-height: 20px;
|
||||
max-height: 60px;
|
||||
overflow: auto;
|
||||
}
|
||||
::slotted(.star-confirm-checkbox) {
|
||||
align-self: start;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.star-confirm-button {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
.star-confirm-button1 {
|
||||
flex: 1;
|
||||
color: #f0f0f0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
}
|
||||
.star-split-line {
|
||||
height: 25px;
|
||||
border: 1px solid #585a66;
|
||||
}
|
||||
.star-confirm-button2 {
|
||||
flex: 1;
|
||||
color: #1d98f0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
}
|
||||
.red {
|
||||
color: #ec4949;
|
||||
}
|
||||
/*浅色模式*/
|
||||
.star-confirm-subject.light {
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.star-confirm-subject.light .star-confirm-title {
|
||||
color: #292929;
|
||||
}
|
||||
.star-confirm-subject.light .star-confirm-subtitle {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.star-confirm-subject.light .star-confirm-button1 {
|
||||
color: #292929;
|
||||
}
|
||||
.star-confirm-subject.light .star-split-line {
|
||||
height: 25px;
|
||||
border: 1px solid #cfd8e8;
|
||||
}
|
||||
.star-confirm-subject.light ::slotted(.star-confirm-checkbox) {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
`
|
||||
|
|
@ -1,27 +1,157 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
|
||||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './confirm-style'
|
||||
@customElement('star-confirm')
|
||||
export class StarConfirm extends LitElement {
|
||||
@property()
|
||||
foo = ''
|
||||
|
||||
@state()
|
||||
bar = ''
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property({type: String}) model = '' //支持深色模式和浅色模式,默认背景是深色模式
|
||||
@property({type: String}) headline = ''
|
||||
@property({type: String}) subtitle = ''
|
||||
@property({type: String}) confirmButtonText = ''
|
||||
@property({type: String}) cancelButtonText = ''
|
||||
@property({type: String}) buttonColor = ''
|
||||
@property({type: String}) type = '' //支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
|
||||
@property({type: String}) location = '' //弹出框位置，默认是在屏幕中心弹出
|
||||
render() {
|
||||
return html`
|
||||
|
||||
<div
|
||||
id="star-confirm"
|
||||
class="star-confirm-background ${this.type} ${this.location}"
|
||||
>
|
||||
<div class="star-confirm-subject ${this.model}">
|
||||
<div class="star-confirm-main">
|
||||
<slot name="image"></slot>
|
||||
<span class="star-confirm-title">${this.headline}</span>
|
||||
<span class="star-confirm-subtitle">${this.subtitle}</span>
|
||||
<slot name="checkBox"></slot>
|
||||
</div>
|
||||
<div class="star-confirm-button">
|
||||
${this.cancelButtonText
|
||||
? html`
|
||||
<star-button
|
||||
type="confirm"
|
||||
class="star-confirm-button1"
|
||||
@click="${this.cancelTo}"
|
||||
>
|
||||
${this.cancelButtonText}
|
||||
</star-button>
|
||||
<span class="star-split-line"></span>
|
||||
`
|
||||
: ''}
|
||||
${this.confirmButtonText
|
||||
? html`
|
||||
<star-button
|
||||
type="confirm"
|
||||
class="star-confirm-button2 ${this.buttonColor}"
|
||||
@click="${this.confirmTo}"
|
||||
>
|
||||
${this.confirmButtonText}
|
||||
</star-button>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
protected cancelTo() {
|
||||
this.dispatchEvent(
|
||||
new Event('cancel-to', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
protected confirmTo() {
|
||||
this.dispatchEvent(
|
||||
new Event('confirm-to', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
export const Confirm = ({
|
||||
type,
|
||||
model,
|
||||
image,
|
||||
headline,
|
||||
subtitle,
|
||||
checkBoxText,
|
||||
confirmButtonText,
|
||||
cancelButtonText,
|
||||
buttonColor,
|
||||
location,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
type?: string
|
||||
model?: string
|
||||
image?: string
|
||||
headline: string
|
||||
subtitle?: string
|
||||
checkBoxText?: string
|
||||
confirmButtonText?: string
|
||||
cancelButtonText?: string
|
||||
buttonColor?: string
|
||||
location?: string
|
||||
onConfirm: (obj: {checked?: undefined}) => void
|
||||
onCancel: () => void
|
||||
}) => {
|
||||
let bodyHtml = document.querySelector('body')
|
||||
let confirmHtml = document.createElement('div')
|
||||
confirmHtml.innerHTML = `<star-confirm
|
||||
type="${type}"
|
||||
model="${model}"
|
||||
headline="${headline}"
|
||||
subtitle="${subtitle}"
|
||||
location="${location}"
|
||||
buttonColor="${buttonColor}"
|
||||
confirmButtonText="${confirmButtonText}"
|
||||
cancelButtonText="${cancelButtonText}">
|
||||
${
|
||||
image
|
||||
? `<img slot="image" src="${image}" class="star-confirm-image" alt=""/>`
|
||||
: ''
|
||||
}
|
||||
${
|
||||
checkBoxText
|
||||
? `<div slot="checkBox" class="star-confirm-checkbox">
|
||||
<label>
|
||||
<input id="checkbox-start-checked" type="checkbox" class="star-confirm-label"/>
|
||||
${checkBoxText}
|
||||
</label>
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
</star-confirm>`
|
||||
bodyHtml && bodyHtml.appendChild(confirmHtml)
|
||||
|
||||
confirmHtml.addEventListener('cancel-to', () => {
|
||||
onCancel() // 取消回调函数
|
||||
bodyHtml && bodyHtml.removeChild(confirmHtml)
|
||||
})
|
||||
|
||||
confirmHtml.addEventListener('confirm-to', () => {
|
||||
let params = {
|
||||
checked: undefined,
|
||||
}
|
||||
if (checkBoxText) {
|
||||
let checkedInput = document.querySelector('#checkbox-start-checked')
|
||||
// @ts-ignore
|
||||
checkedInput = checkedInput && checkedInput.checked
|
||||
console.log(checkedInput) // 判断复选框是否被勾选， 后面要换成StarCheckBox
|
||||
// @ts-ignore
|
||||
params.checked = checkedInput
|
||||
}
|
||||
onConfirm(params) // 确认回调函数 并传参
|
||||
bodyHtml && bodyHtml.removeChild(confirmHtml)
|
||||
})
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-confirm': StarConfirm
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import './test/panels/root'
|
|||
import './components/button/button'
|
||||
import './components/radio/radio-group'
|
||||
import './components/radio/radio'
|
||||
import './components/confirm/confirm'
|
||||
import './components/toast/toast'
|
||||
import './components/picker/picker'
|
||||
import './components/overflowmenu/overflowmenu'
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,308 @@
|
|||
import {html, LitElement} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import {Confirm} from '../../../components/confirm/confirm'
|
||||
// import icon1 from '../../panels/confirm/asserts/icon.png'
|
||||
@customElement('panel-confirm')
|
||||
export class PanelConfirm extends LitElement {
|
||||
@property()
|
||||
@state()
|
||||
confirmDelLig() {
|
||||
Confirm({
|
||||
model: 'light',
|
||||
image: '/src/test/panels/confirm/asserts/icon1.png',
|
||||
headline: '是否卸载“影音”？',
|
||||
subtitle: '卸载应用将会同步清除其所有数据',
|
||||
confirmButtonText: '卸载',
|
||||
cancelButtonText: '取消',
|
||||
buttonColor: 'red',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmDel(event: Event) {
|
||||
console.log(event, 'event')
|
||||
Confirm({
|
||||
// image:icon1,
|
||||
image: '/src/test/panels/confirm/asserts/icon1.png',
|
||||
headline: '是否卸载“影音”？',
|
||||
subtitle: '卸载应用将会同步清除其所有数据',
|
||||
confirmButtonText: '卸载',
|
||||
cancelButtonText: '取消',
|
||||
buttonColor: 'red',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmDetLight(event: Event) {
|
||||
console.log(event, 'event')
|
||||
Confirm({
|
||||
type: 'non-modal-mode', // 非模态模式，默认代表支持模态模式,用户只能操作该对话框，背景不可以滑动点击
|
||||
model: 'light', //浅色模式
|
||||
image: '',
|
||||
headline: '是否移除“天气”组件?',
|
||||
subtitle: '长按屏幕空白处进入组件编辑界面，可重新添加该组件',
|
||||
confirmButtonText: '移除',
|
||||
cancelButtonText: '取消',
|
||||
onConfirm: () => {
|
||||
console.log('点击的移除======')
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log('点击的取消===')
|
||||
},
|
||||
})
|
||||
}
|
||||
confirmDetDark(event: Event) {
|
||||
console.log(event, 'event')
|
||||
Confirm({
|
||||
type: 'non-modal-mode',
|
||||
image: '',
|
||||
headline: '是否移除“天气”组件？',
|
||||
subtitle: '长按屏幕空白处进入组件编辑界面，可重新添加该组件',
|
||||
confirmButtonText: '移除',
|
||||
cancelButtonText: '取消',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmDetDarkLink() {
|
||||
Confirm({
|
||||
type: 'non-modal-mode', // 非模态模式，默认代表支持模态模式,用户只能操作该对话框，背景不可以滑动点击
|
||||
image: '',
|
||||
headline: '是否删除联系人?',
|
||||
subtitle: '',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProLig() {
|
||||
Confirm({
|
||||
model: 'light',
|
||||
headline: '标题',
|
||||
subtitle:
|
||||
'超过一句话的长文本内容,文字居左对齐超过一句话的长文本内容,文字居左对齐',
|
||||
confirmButtonText: '好的',
|
||||
cancelButtonText: '',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProLigCheckBox() {
|
||||
Confirm({
|
||||
headline: '标题',
|
||||
model: 'light',
|
||||
subtitle:
|
||||
'超过一句话的长文本内容,文字居左对齐超过一句话的长文本内容,文字居左对齐',
|
||||
confirmButtonText: '好的',
|
||||
cancelButtonText: '',
|
||||
checkBoxText: '不再提示',
|
||||
onConfirm: (params) => {
|
||||
console.log(params)
|
||||
},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProCheckBox() {
|
||||
Confirm({
|
||||
headline: '标题',
|
||||
subtitle:
|
||||
'超过一句话的长文本内容,文字居左对齐超过一句话的长文本内容,文字居左对齐',
|
||||
confirmButtonText: '好的',
|
||||
cancelButtonText: '',
|
||||
checkBoxText: '不再提示',
|
||||
onConfirm: (params) => {
|
||||
console.log(params)
|
||||
},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProCheckBoxTest() {
|
||||
Confirm({
|
||||
headline: '标题',
|
||||
subtitle:
|
||||
'超过一句话的长文本内容,文字居左对齐,超过一句话的长文本内容,文字居左对齐,超过一句话的长文本内容,文字居左对齐,超过一句话的长文本内容,文字居左对齐，超过一句话的长文本内容,文字居左对齐超过一句话的长文本内容,文字居左对齐',
|
||||
confirmButtonText: '好的',
|
||||
cancelButtonText: '',
|
||||
checkBoxText: '不再提示',
|
||||
onConfirm: (params) => {
|
||||
console.log(params)
|
||||
},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProLigNo() {
|
||||
Confirm({
|
||||
model: 'light',
|
||||
headline: '标题',
|
||||
subtitle: '长按屏幕空白处进入组件编辑页面，可重新添加该组件',
|
||||
cancelButtonText: '',
|
||||
confirmButtonText: '好的',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmProNo() {
|
||||
Confirm({
|
||||
model: 'light',
|
||||
headline: '此处是一句话文本内容',
|
||||
subtitle: '',
|
||||
cancelButtonText: '',
|
||||
confirmButtonText: '好的',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmTopCenter() {
|
||||
Confirm({
|
||||
image: '/src/test/panels/confirm/asserts/icon1.png',
|
||||
headline: '是否卸载“影音”？',
|
||||
subtitle: '卸载应用将会同步清除其所有数据',
|
||||
location: 'top-center-popup',
|
||||
confirmButtonText: '卸载',
|
||||
cancelButtonText: '取消',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
confirmBottomCenter() {
|
||||
Confirm({
|
||||
image: '/src/test/panels/confirm/asserts/icon1.png',
|
||||
headline: '是否卸载“影音”？',
|
||||
subtitle: '卸载应用将会同步清除其所有数据',
|
||||
location: 'bottom-center-popup',
|
||||
confirmButtonText: '卸载',
|
||||
cancelButtonText: '取消',
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>弹窗/操作确认/卸载桌面应用</h3>
|
||||
<div>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="浅色卸载"
|
||||
icon="delete"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmDelLig}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="深色卸载"
|
||||
icon="delete"
|
||||
iconcolor="black"
|
||||
variant="secondary"
|
||||
@click="${this.confirmDel}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="浅色移除"
|
||||
icon="delete"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmDetLight}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="深色移除"
|
||||
icon="delete"
|
||||
iconcolor="black"
|
||||
variant="secondary"
|
||||
@click="${this.confirmDetDark}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="深色删除联系人"
|
||||
icon="delete"
|
||||
iconcolor="black"
|
||||
variant="secondary"
|
||||
@click="${this.confirmDetDarkLink}"
|
||||
></star-button>
|
||||
</div>
|
||||
<h3>弹窗/操作确认/通用</h3>
|
||||
<div>
|
||||
<h4>消息确认框</h4>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="浅色提示"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmProLig}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="带复选框的浅色提示"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmProLigCheckBox}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="带复选框的深色提示"
|
||||
icon="help"
|
||||
iconcolor="green"
|
||||
variant="primary"
|
||||
@click="${this.confirmProCheckBox}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="边界值测试"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmProCheckBoxTest}"
|
||||
></star-button>
|
||||
</div>
|
||||
<div>
|
||||
<h4>消息确认框</h4>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="浅色有标题提示"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmProLigNo}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="浅色无标题提示"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmProNo}"
|
||||
></star-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>弹出框位置</h3>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="顶部居中弹窗"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmTopCenter}"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="iconlabel"
|
||||
label="顶部居中弹窗"
|
||||
icon="help"
|
||||
iconcolor="white"
|
||||
variant="secondary"
|
||||
@click="${this.confirmBottomCenter}"
|
||||
></star-button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-confirm': PanelConfirm
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@ import './blur/use-blur'
|
|||
import './button/button'
|
||||
import './container/container'
|
||||
import './radio/radio'
|
||||
import './confirm/confirm'
|
||||
import './overflowmenu/overflowmenu'
|
||||
import './switch/switch'
|
||||
import './slider/slider'
|
||||
|
|
@ -158,6 +159,14 @@ export class PanelRoot extends LitElement {
|
|||
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="页面圆点指示器"
|
||||
|
|
|
|||
Loading…
Reference in New Issue