forked from Qortal/qortal-ui
48 lines
912 B
JavaScript
48 lines
912 B
JavaScript
import {css, html, LitElement} from 'lit';
|
|
import '@vaadin/button';
|
|
import '@polymer/paper-spinner/paper-spinner-lite.js';
|
|
|
|
export class MyButton extends LitElement {
|
|
static properties = {
|
|
onClick: { type: Function },
|
|
isLoading: { type: Boolean },
|
|
label: { type: String },
|
|
};
|
|
|
|
static styles = css`
|
|
vaadin-button {
|
|
height: 100%;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
min-width: 80px;
|
|
background-color: #03a9f4;
|
|
color: white;
|
|
}
|
|
|
|
vaadin-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
`;
|
|
|
|
constructor() {
|
|
super();
|
|
this.onClick = () => {};
|
|
this.isLoading = false;
|
|
this.label = '';
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<vaadin-button
|
|
?disabled="${this.isLoading}"
|
|
@click="${this.onClick}"
|
|
>
|
|
${this.isLoading === false
|
|
? html`${this.label}`
|
|
: html`<paper-spinner-lite active></paper-spinner-lite>`}
|
|
</vaadin-button>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('my-button', MyButton);
|