@jimka/typescript-ui

Appearance

@jimka/typescript-ui / core / ButtonGroup

Class: ButtonGroup ​

Defined in: src/typescript/lib/core/ButtonGroup.ts:28

Manages mutual exclusivity among a set of RadioButton or ToggleButton instances.

When a button in the group becomes selected, all other buttons in the group are automatically deselected. For RadioButton groups, a shared name attribute is applied so the browser handles keyboard navigation natively. For ToggleButton groups, call setContainer to enable roving tabindex keyboard nav.

Constructors ​

new ButtonGroup() ​

ts
new ButtonGroup(options?: ButtonGroupOptions): ButtonGroup

Defined in: src/typescript/lib/core/ButtonGroup.ts:42

Creates a ButtonGroup, optionally populated with an initial set of buttons.

Parameters ​

options? ​

ButtonGroupOptions

Optional. Construction-time options. options.buttons registers the given buttons via addButtons.

Returns ​

ButtonGroup

Properties ​

buttons ​

ts
buttons: (
  | ToggleButton
  | RadioButton)[];

Defined in: src/typescript/lib/core/ButtonGroup.ts:30

Methods ​

addButton() ​

ts
addButton(button: 
  | ToggleButton
  | RadioButton): this

Defined in: src/typescript/lib/core/ButtonGroup.ts:114

Adds a button to the group and wires its selection to enforce mutual exclusivity.

Parameters ​

button ​

The button to add to the group.

ToggleButton | RadioButton

Returns ​

this

Remarks ​

For RadioButton instances, a shared name attribute is applied for native browser grouping. For ToggleButton instances, the button is added to the roving tabindex group if a container has been set.

addButtons() ​

ts
addButtons(...buttons: (
  | ToggleButton
  | RadioButton
  | (
  | ToggleButton
  | RadioButton)[])[]): this

Defined in: src/typescript/lib/core/ButtonGroup.ts:95

Adds multiple buttons to the group in a single call.

Each argument is either a button or an array of buttons; all forms can be freely mixed in the same call. Each button is registered via addButton, so mutual-exclusivity wiring and (for ToggleButton) roving tabindex registration are applied to every entry.

Parameters ​

buttons ​

...( | ToggleButton | RadioButton | ( | ToggleButton | RadioButton)[])[]

The buttons to add. Each entry is a bare button or an array of buttons.

Returns ​

this

This group, for method chaining.

addSelectionListener() ​

ts
addSelectionListener(listener: (button: 
  | ToggleButton
  | RadioButton) => void): void

Defined in: src/typescript/lib/core/ButtonGroup.ts:70

Registers a listener that is called whenever the selected button in the group changes.

Parameters ​

listener ​

(button: | ToggleButton | RadioButton) => void

Callback receiving the newly selected button.

Returns ​

void

getButtons() ​

ts
getButtons(): Component[]

Defined in: src/typescript/lib/core/ButtonGroup.ts:80

Returns the group's buttons as a Component array, suitable for passing directly to Component.addComponents.

Returns ​

Component[]

A new array of the buttons, widened to Component.

removeButton() ​

ts
removeButton(button: 
  | ToggleButton
  | RadioButton): this

Defined in: src/typescript/lib/core/ButtonGroup.ts:135

Removes a button from the group.

Parameters ​

button ​

The button to remove.

ToggleButton | RadioButton

Returns ​

this

setContainer() ​

ts
setContainer(container: Component): this

Defined in: src/typescript/lib/core/ButtonGroup.ts:158

Sets the container component for keyboard navigation of ToggleButton groups.

Parameters ​

container ​

Component

The component that wraps the toggle buttons and should receive key events.

Returns ​

this

Remarks ​

Registers Left/Right/Up/Down arrow key handlers on the container via subtree listener. Also initialises the RovingTabIndex and adds any already-registered ToggleButton members to it.