(todo)Add confirm & prompt target.
This commit is contained in:
parent
df05369af3
commit
ba4a7f8370
|
@ -0,0 +1,26 @@
|
|||
# 确认弹窗-Confirm
|
||||
|
||||
参考:UI设计
|
||||
|
||||
## 内容排布
|
||||
|
||||
- 括号中的内容为可选项
|
||||
|
||||
从上到下:
|
||||
|
||||
```
|
||||
(图标)
|
||||
标题
|
||||
子标题
|
||||
按钮1(按钮2)
|
||||
```
|
||||
|
||||
特点:
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
- 支持静态资源插槽(此处为图片)
|
||||
|
||||
## 关联组件
|
||||
|
||||
- button
|
||||
- 静态资源容器
|
|
@ -0,0 +1,27 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
|
||||
@customElement('star-confirm')
|
||||
export class StarConfirm extends LitElement {
|
||||
@property()
|
||||
foo = ''
|
||||
|
||||
@state()
|
||||
bar = ''
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-confirm': StarConfirm
|
||||
}
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
# 提示输入弹窗-Prompt
|
||||
|
||||
参考:UI设计
|
||||
|
||||
## 内容排布
|
||||
|
||||
- 括号中的内容为可选项
|
||||
|
||||
从上到下:
|
||||
|
||||
```
|
||||
标题
|
||||
(子标题)
|
||||
输入框
|
||||
输入状态提示 外部链接<slot>
|
||||
按钮1 按钮2
|
||||
```
|
||||
|
||||
特点:
|
||||
- 支持模态模式
|
||||
- 支持非模态模式
|
||||
|
||||
## 关联组件
|
||||
|
||||
- button
|
||||
- input
|
||||
- 外部链接slot
|
|
@ -0,0 +1,27 @@
|
|||
import { html, css, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
|
||||
@customElement('star-prompt')
|
||||
export class StarPrompt extends LitElement {
|
||||
@property()
|
||||
foo = ''
|
||||
|
||||
@state()
|
||||
bar = ''
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-prompt': StarPrompt
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue