Commit a5876fdc authored by akiraohgaki's avatar akiraohgaki

Add BadgeComponent

parent 1d744f1e
import BaseComponent from './BaseComponent.js';
export default class BadgeComponent extends BaseComponent {
static get componentObservedAttributes() {
return ['data-count', 'data-emphasis'];
}
render() {
const count = this.getAttribute('data-count') || '0';
const emphasis = this.getAttribute('data-emphasis') || 'low';
return this.html`
<style>
${this.sharedStyle}
</style>
<style>
:host {
display: inline-block;
}
span {
display: inline-block;
padding: 3px 6px;
border-radius: 10px;
font-size: 11px;
line-height: 1;
}
span[data-emphasis="low"] {
background-color: var(--color-active-secondary);
color: var(--color-text);
}
span[data-emphasis="medium"] {
background-color: var(--color-information);
color: var(--color-content);
}
span[data-emphasis="high"] {
background-color: var(--color-warning);
color: var(--color-content);
}
</style>
<span data-emphasis="${emphasis}">${count}</span>
`;
}
}
......@@ -10,6 +10,9 @@ ButtonComponent.define('app-button');
import IconbuttonComponent from './common/IconbuttonComponent.js';
IconbuttonComponent.define('app-iconbutton');
import BadgeComponent from './common/BadgeComponent.js';
BadgeComponent.define('app-badge');
import IndicatorComponent from './common/IndicatorComponent.js';
IndicatorComponent.define('app-indicator');
......
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