Commit 5f77d606 authored by akiraohgaki's avatar akiraohgaki

Add ButtonComponent

parent a0411f02
import BaseComponent from './BaseComponent.js';
export default class ButtonComponent extends BaseComponent {
static get componentObservedAttributes() {
return ['data-title', 'data-state', 'data-checked'];
}
render() {
const title = this.getAttribute('data-title') || '';
const state = this.getAttribute('data-state') || 'active';
const disabled = (state === 'inactive') ? 'disabled' : '';
const checked = this.hasAttribute('data-checked') ? 'data-checked' : '';
return this.html`
<style>
${this.sharedStyle}
</style>
<style>
:host {
display: inline-block;
line-height: 1;
}
button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
width: inherit;
height: inherit;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
outline: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button:enabled {
cursor: pointer;
}
button:enabled:hover {
border-color: rgba(0,0,0,0.3);
}
button:disabled {
color: var(--color-text-secondary);
}
button[data-checked],
button[data-checked]:hover {
border-color: var(--color-information);
}
</style>
<button title="${title}" ?disabled=${disabled} ?data-checked=${checked}><slot></slot></button>
`;
}
}
......@@ -4,6 +4,9 @@ SwitchviewComponent.define('app-switchview');
import PageComponent from './common/PageComponent.js';
PageComponent.define('app-page');
import ButtonComponent from './common/ButtonComponent.js';
ButtonComponent.define('app-button');
import IconbuttonComponent from './common/IconbuttonComponent.js';
IconbuttonComponent.define('app-iconbutton');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment