diff --git a/button-group.js b/button-group.js new file mode 100644 index 0000000..a3e9617 --- /dev/null +++ b/button-group.js @@ -0,0 +1,45 @@ +export class ButtonGroup extends HTMLElement { + constructor() { + super() + this.attachShadow({open: true}) + } + + connectedCallback() { + const style = document.createElement('style') + style.value = ` + :host { + display: flex; + direction: row-reverse; + gap: 5px; + } + button { + font-family: sans-serif; + font-weight: normal; + background: #111; + color: #eee; + } + ` + this.shadowRoot.appendChild(style) + } + + addButton(text, cls, handler) { + const el = document.createElement('button') + el.innerText = text + el.classList.add(cls) + el.addEventListener('click', () => handler) + this.shadowRoot.appendChild(el) + return el + } + + addPrimary(text, handler) { + this.primary = this.addButton( + text, 'primary', handler + ) + } + + addCancel(text, handler) { + this.cancel = this.addButton( + text, 'cancel', handler + ) + } +} \ No newline at end of file