<vwc-button-toggle-group>
<vwc-button value="11">BUTTON</vwc-button>
<vwc-button value="12">BUTTON</vwc-button>
<vwc-icon-button icon="home" value="22">BUTTON</vwc-button>
<vwc-button value="13">BUTTON</vwc-button>
</vwc-button-toggle-group>
<slot></slot>
| name |
attr/prop/reflected |
type |
description |
| multi |
reflected |
boolean |
allows for multiple selections |
| selected (readonly) |
property |
[]HTMLElement |
list of selected items |
| values |
property |
[]string |
The values of the selected items. Setting this property sets the state according to the items with the values in the array |
| items |
property |
Element[] |
A list of valid toggle elements |
| shape |
reflected |
“pill”/”rounded” |
|
| dense |
reflected |
boolean |
Set the size of the buttons as dense |
| enlarged |
reflected |
boolean |
Set the size of the buttons as enlarged |
| required |
reflected |
boolean |
Prevents toggling off the last selection. Also does not send event of non toggled selection. |
| name |
event.detail |
description |
| selected |
|
Fires when a button is toggled |
- No errors are thrown for misuse
- Setting a button without a
value will return a null value if selected.
- Adding invalid button elements (supported list is in the code right now) will not be shown or handled as buttons
- Handling
selected events:
- When handling a
selected event one would probably like to query the element.values or element.selected to get the current state after the change
- One can add more buttons dynamically
- If you remove an item and not destroy it, remember that there’s a listener on this item
- Selected items have the
selected
- In order to enforce styles, the following attributes are automatically altered:
-
layout - will be set layout="filled" on load (note that changing this after initial load will change the way it looks)
