Merge pull request #9 in YR/star-web-components from feature-component-toast to master
* commit 'c7973db1a97caa134a81042c24379ba12b2f4f9d': TASK: #105402 - StarWebComponents开发-toast终
This commit is contained in:
汪昌棋
commit
6cc847d8fe
|
|
@ -8,3 +8,4 @@
|
||||||
- add bubble
|
- add bubble
|
||||||
- add indicator-page-point
|
- add indicator-page-point
|
||||||
- add blur
|
- add blur
|
||||||
|
- add toast
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
## star-toast
|
||||||
|
|
||||||
|
星光 web 组件 --- Toast 组件介绍：（2022 年 8 月 30 日）
|
||||||
|
|
||||||
|
star-toast 的用途：
|
||||||
|
用于显示简短的临时通知，保证用户能够明显注意到，但同时又不会破坏用户此刻的操作体验，用户可以手动关闭掉。
|
||||||
|
|
||||||
|
star-toast 属性：
|
||||||
|
1、open
|
||||||
|
Booloean 类型，open=true 时会显示 toast，open=false 时隐藏 toast。
|
||||||
|
|
||||||
|
2、countDown
|
||||||
|
Number 类型，定义此属性主要是为了能够通过它的值来改变 toast 的 style 的 top 大小来让多个 toast 不重叠。
|
||||||
|
|
||||||
|
3、icon 属性
|
||||||
|
Booloean 类型，icon=true 时会显示图标，icon=false 时不会显示图标。
|
||||||
|
|
||||||
|
4、do verline close 属性
|
||||||
|
均为 Boolean 类型，其用途与 icon 类似，分别对应 Do something 按钮、verline 竖线、X 关闭按钮的有无。
|
||||||
|
|
||||||
|
5、buttonName
|
||||||
|
String 类型，主要用来对按钮进行命名。
|
||||||
|
|
||||||
|
6、variant
|
||||||
|
变体类型，通过判断它的值来显示不同类型变体的 toast。
|
||||||
|
|
||||||
|
7、private renderIcon() {}
|
||||||
|
该方法是用于判断不同的变体类型进行选择不同的 icon 图标。
|
||||||
|
|
||||||
|
8、toastChange() {}
|
||||||
|
按钮点击事件：显示 toast。
|
||||||
|
|
||||||
|
9、closeToast() {}
|
||||||
|
close 按钮的点击事件，用来关闭 toast。
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
import {css, CSSResult} from 'lit'
|
||||||
|
|
||||||
|
export const sharedStyles: CSSResult = css`
|
||||||
|
.toast {
|
||||||
|
background-color: rgb(0, 0, 0, 0.8);
|
||||||
|
border-radius: 20px;
|
||||||
|
position: fixed;
|
||||||
|
direction: ltr;
|
||||||
|
left: 50%;
|
||||||
|
height: stretch;
|
||||||
|
width: 95vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5vw;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
transition: opacity 0.3s, transform 0.4s, top 0.4s;
|
||||||
|
overflow: visible;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
order: 2;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.3vw;
|
||||||
|
font-weight: 400;
|
||||||
|
height: auto;
|
||||||
|
max-width: 80vw;
|
||||||
|
min-width: 70vw;
|
||||||
|
line-height: 3.5vw;
|
||||||
|
text-align: left;
|
||||||
|
padding: 5px 5px 5px 5px;
|
||||||
|
margin: 5px;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
[close='true'] {
|
||||||
|
order: 5;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
width: 5vw;
|
||||||
|
height: 5vw;
|
||||||
|
text-align: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.3vw;
|
||||||
|
line-height: 5vw;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
|
||||||
|
margin: 1px;
|
||||||
|
padding: 0px;
|
||||||
|
border-color: rgba(0, 0, 0, 0);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-style: solid;
|
||||||
|
border: 0px;
|
||||||
|
overflow: visible;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0.13s;
|
||||||
|
transition-property: border-color;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
[close='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[close='true']:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[open='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[open='true'] {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
[variant='error'] {
|
||||||
|
background-color: rgba(187, 2, 2, 0.9);
|
||||||
|
}
|
||||||
|
[variant='info'] {
|
||||||
|
background-color: rgba(4, 105, 227, 0.9);
|
||||||
|
}
|
||||||
|
[variant='negative'] {
|
||||||
|
background-color: rgba(187, 2, 2, 0.9);
|
||||||
|
}
|
||||||
|
[variant='positive'] {
|
||||||
|
background-color: rgba(0, 126, 80, 0.9);
|
||||||
|
}
|
||||||
|
[variant='warning'] {
|
||||||
|
background-color: rgb(180, 166, 60, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
[verline='true'] {
|
||||||
|
order: 4;
|
||||||
|
border-left-color: rgba(255, 255, 255, 0.2);
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 1px;
|
||||||
|
color: rgb(34, 34, 34);
|
||||||
|
align-self: stretch;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-height: 40px;
|
||||||
|
height: auto;
|
||||||
|
margin: 5px;
|
||||||
|
width: 10px;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
[verline='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[icon='true'] {
|
||||||
|
order: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(0, 126, 80);
|
||||||
|
direction: ltr;
|
||||||
|
display: inline-flex;
|
||||||
|
margin: 1vw;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
height: 4vw;
|
||||||
|
width: 4vw;
|
||||||
|
min-width: 18px;
|
||||||
|
min-height: 18px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
[icon='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[var-icon]::before {
|
||||||
|
font-family: 'gaia-icons';
|
||||||
|
content: attr(var-icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
[do='true'] {
|
||||||
|
order: 3;
|
||||||
|
appearance: none;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
border-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 20px;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
padding: 5px;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
|
||||||
|
font-size: 3.3vw;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 6vw;
|
||||||
|
width: 29vw;
|
||||||
|
line-height: 5vw;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0px 10px 0px 10px;
|
||||||
|
outline-color: rgb(34, 34, 34);
|
||||||
|
outline-style: none;
|
||||||
|
outline-width: 0px;
|
||||||
|
overflow: visible;
|
||||||
|
text-decoration-color: rgb(34, 34, 34);
|
||||||
|
text-decoration-line: none;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
text-decoration-thickness: auto;
|
||||||
|
text-transform: none;
|
||||||
|
text-align: center;
|
||||||
|
transition-delay: 0s, 0s, 0s, 0s;
|
||||||
|
transition-duration: 0.13s, 0.13s, 0.13s, 0.13s;
|
||||||
|
transition-property: background, border-color, color, box-shadow;
|
||||||
|
transition-timing-function: ease-out, ease-out, ease-out, ease-out;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
[do='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[do='true']:active,
|
||||||
|
[do='true'][click]:active {
|
||||||
|
border-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
[do='true']:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[do='true'][click]:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
[do='true'][click] {
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
border-color: rgba(0, 0, 0, 1);
|
||||||
|
direction: ltr;
|
||||||
|
height: auto;
|
||||||
|
width: 25vw;
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import {html, LitElement, CSSResultArray, TemplateResult} from 'lit'
|
||||||
|
import {customElement, property, query, state} from 'lit/decorators.js'
|
||||||
|
import {sharedStyles} from './toast-styles'
|
||||||
|
|
||||||
|
export const toastVariants: ToastVariants[] = [
|
||||||
|
'negative',
|
||||||
|
'positive',
|
||||||
|
'info',
|
||||||
|
'error',
|
||||||
|
'warning',
|
||||||
|
]
|
||||||
|
|
||||||
|
export type ToastVariants =
|
||||||
|
| 'negative'
|
||||||
|
| 'positive'
|
||||||
|
| 'info'
|
||||||
|
| 'error'
|
||||||
|
| 'warning'
|
||||||
|
| ''
|
||||||
|
|
||||||
|
@customElement('star-toast')
|
||||||
|
export class StarToast extends LitElement {
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [sharedStyles]
|
||||||
|
}
|
||||||
|
|
||||||
|
@state()
|
||||||
|
public open: Boolean = false
|
||||||
|
|
||||||
|
@property({type: Number})
|
||||||
|
private timeout = 5000
|
||||||
|
|
||||||
|
@property({type: String})
|
||||||
|
public variant: ToastVariants = ''
|
||||||
|
|
||||||
|
@property({type: String})
|
||||||
|
public information =
|
||||||
|
'This is important information that you should read, soon.'
|
||||||
|
|
||||||
|
@property({type: Boolean, reflect: true})
|
||||||
|
public icon = false
|
||||||
|
|
||||||
|
@property({type: Boolean, reflect: true})
|
||||||
|
public close = false
|
||||||
|
|
||||||
|
@property({type: Boolean, reflect: true})
|
||||||
|
public verline = false
|
||||||
|
|
||||||
|
@property({type: Boolean, reflect: true})
|
||||||
|
public do = false
|
||||||
|
|
||||||
|
@property({type: String})
|
||||||
|
public buttonName = ''
|
||||||
|
|
||||||
|
private renderIcon(): TemplateResult {
|
||||||
|
switch (this.variant) {
|
||||||
|
case 'positive':
|
||||||
|
return html`
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
role="img"
|
||||||
|
fill="white"
|
||||||
|
aria-hidden="false"
|
||||||
|
aria-label="Success"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
case 'warning':
|
||||||
|
case 'info':
|
||||||
|
return html`
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
role="img"
|
||||||
|
fill="white"
|
||||||
|
aria-hidden="false"
|
||||||
|
aria-label="Information"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
case 'error':
|
||||||
|
case 'negative':
|
||||||
|
default:
|
||||||
|
return html`
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
role="img"
|
||||||
|
fill="white"
|
||||||
|
aria-hidden="false"
|
||||||
|
aria-label="Error"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div open=${this.open} class="toast" id="toast" variant=${this.variant}>
|
||||||
|
<div>
|
||||||
|
<icon icon=${this.icon}>${this.renderIcon()}</icon>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text">${this.information}</span>
|
||||||
|
<do do=${this.do} wraping>Do Something</do>
|
||||||
|
</div>
|
||||||
|
<verline verline=${this.verline}></verline>
|
||||||
|
<close close=${this.close} @click=${this.closeToast}>X</close>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
@query('#toast')
|
||||||
|
toast!: HTMLElement
|
||||||
|
|
||||||
|
public static countDown: number = 0
|
||||||
|
|
||||||
|
toastChange() {
|
||||||
|
if (!this.open) {
|
||||||
|
this.toast.style.top = `${20 + Math.abs(StarToast.countDown) * 60}px`
|
||||||
|
StarToast.countDown++
|
||||||
|
this.open = true
|
||||||
|
setTimeout((): void => {
|
||||||
|
this.open = false
|
||||||
|
StarToast.countDown--
|
||||||
|
}, this.timeout)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
closeToast() {
|
||||||
|
if (StarToast.countDown >= 1) StarToast.countDown--
|
||||||
|
this.open = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElemrntTagNameMap {
|
||||||
|
'star-toast': StarToast
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,7 @@ import {StarAnimateSection} from './components/section/section'
|
||||||
import './components/section/section'
|
import './components/section/section'
|
||||||
import './test/panels/root'
|
import './test/panels/root'
|
||||||
import './components/button/button'
|
import './components/button/button'
|
||||||
|
import './components/toast/toast'
|
||||||
|
|
||||||
@customElement('settings-app')
|
@customElement('settings-app')
|
||||||
export class SettingsApp extends LitElement {
|
export class SettingsApp extends LitElement {
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import './indicators/indicators'
|
||||||
import './blur/use-blur'
|
import './blur/use-blur'
|
||||||
import './button/button'
|
import './button/button'
|
||||||
import './container/container'
|
import './container/container'
|
||||||
|
import './toast/toast'
|
||||||
|
|
||||||
type SEID = string
|
type SEID = string
|
||||||
|
|
||||||
|
|
@ -118,6 +119,14 @@ export class PanelRoot extends LitElement {
|
||||||
href="#button"
|
href="#button"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="吐司"
|
||||||
|
icon="privacy"
|
||||||
|
iconcolor="toast"
|
||||||
|
href="#toast"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
type=${LiType.ICON_LABEL}
|
||||||
label="关于"
|
label="关于"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import {html, LitElement, CSSResultArray} from 'lit'
|
||||||
|
import {customElement} from 'lit/decorators.js'
|
||||||
|
import {sharedStyles} from '../../../components/toast/toast-styles'
|
||||||
|
|
||||||
|
@customElement('panel-toast')
|
||||||
|
export class PanelToast extends LitElement {
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [sharedStyles]
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<div>
|
||||||
|
<h3>普通的</h3>
|
||||||
|
<star-toast buttonName="初始"></star-toast>
|
||||||
|
<star-toast close="true" buttonName="加close"></star-toast>
|
||||||
|
<star-toast icon="true" buttonName="加icon"></star-toast>
|
||||||
|
<star-toast do="true" buttonName="加do"></star-toast>
|
||||||
|
<star-toast verline="true" buttonName="加verline"></star-toast>
|
||||||
|
<star-toast
|
||||||
|
icon="true"
|
||||||
|
do="true"
|
||||||
|
verline="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="普通全"
|
||||||
|
></star-toast>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<h3>变体</h3>
|
||||||
|
<star-toast variant="error" buttonName="error初始"></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="error"
|
||||||
|
icon="true"
|
||||||
|
buttonName="errorIcon"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="error"
|
||||||
|
close="true"
|
||||||
|
buttonName="errorClose"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="error"
|
||||||
|
verline="true"
|
||||||
|
buttonName="errorVerline"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast variant="error" do="true" buttonName="errorDo"></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="error"
|
||||||
|
icon="true"
|
||||||
|
do="true"
|
||||||
|
verline="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="error全"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="info"
|
||||||
|
icon="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="infoIC"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="positive"
|
||||||
|
icon="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="positiveIC"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="negative"
|
||||||
|
icon="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="negativeIC"
|
||||||
|
></star-toast>
|
||||||
|
<star-toast
|
||||||
|
variant="warning"
|
||||||
|
icon="true"
|
||||||
|
close="true"
|
||||||
|
buttonName="warningIC"
|
||||||
|
></star-toast>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElemrntTagNameMap {
|
||||||
|
'panel-toast': PanelToast
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue