Button Group Specification

Overview

The igxButtonGroup component aims at providing a button group functionality to developers that also allow horizontal/vertical alignment, single/multiple selection with toggling. The igxButtounGroup component makes use of the igxButton directive.

Objectives

Provide means for the citizen developers to implement a simple button group with minimal efforts.

User Stories

Developer

As a citizen developer, I want to add a button group to my application that supports:

• Any number of buttons grouped in a toolbar
• Horizontal/vertical alignment
• Toggling (achieved through multi selection)
• Single/Multiple selection
• WAI-ARIA compatibility
• Cosy/compact/comfortable display density options

End user

1. As an end user, I want to have buttons in the same context grouped together to minimize the used area and inform the users that the buttons actions refer to a single logical area.
2. As an end user, I want to have button groups that support:

• Dropdown
• Horizontal/vertical alignment
• Toggling
• Single/Multiple selection
• Cosy/compact/comfortable display density options

Acceptance criteria

The button group supports:

• Any number of buttons grouped in a toolbar
• Horizontal/vertical alignment
• Toggling
• WAI-ARIA role and attributes
• Cosy/compact/comfortable display density options

Functionality

The users must be able to click on buttons from the group, select multiple buttons, toggle on/off buttons. The component comes with Material design out of the box.

The igxbuttonGroup is a native ng2 component that could have any number of buttons and supports:

• igx-icon
• CSS styling (Material by default)
• text
• ripple directive

ARIA support

• Roles:
• role="button" http://www.w3.org/TR/wai-aria/roles#button

Usage

<igx-buttongroup [.. options]>
</igx-buttongroup>

API Summary

Name	Type	Description
multiSelection	boolean	Enables selecting multiple buttons. Value by default is false.
alignment	enum	Set the button group alignment. Available enum members are ButtonGroupAlignment.horizontal (default) or ButtonGroupAlignment.vertical.
disabled	boolean	Disables the igxButtounGroup component. False by default.
displayDensity	string	Set the display density from a predefined set of options: compact, cosy and comfortable. Value by default is comfortable.

API Methods

Name	Description
selectButton(index: number)	Selects a button by its index.
deselectButton(index: number)	Deselects a button by its index.
selectedButtons()	Gets the selected button/buttons.

Events

Name	Description
onSelect	Fired when a button is selected.
onUnselect	Fired when a button is unselected.
onClick	Fired when a button is clicked.

Examples

Using igxButtonGroup to organize buttons into an js blocks styled button group.

    <igx-buttongroup multiSelection="false" [values]="buttons" [alignment]="alignment" displayDensity="compact">
    </igx-buttongroup>