@vonage/vwc-button-toggle-group NPM

vwc-button-toggle-group

Usage

<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>

Template

<slot></slot>

API

Properties/Attributes

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.

Events

name	event.detail	description
selected		Fires when a button is toggled

Notes for consumers:

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)