1 changed files with 50 additions and 0 deletions
@ -0,0 +1,50 @@ |
|||||
|
export class ButtonGroup extends HTMLElement { |
||||
|
constructor() { |
||||
|
super() |
||||
|
this.attachShadow({mode: 'open'}) |
||||
|
} |
||||
|
|
||||
|
connectedCallback() { |
||||
|
const style = document.createElement('style') |
||||
|
style.textContent = ` |
||||
|
:host { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
gap: 5px; |
||||
|
} |
||||
|
button { |
||||
|
font-size: 16px; |
||||
|
font-family: sans-serif; |
||||
|
font-weight: normal; |
||||
|
background: #111; |
||||
|
color: #eee; |
||||
|
margin: 0; |
||||
|
border: none; |
||||
|
padding: 5px 10px; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
` |
||||
|
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 |
||||
|
) |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue