Skip to content

Button Group Specification

Maria Tsvyatkova edited this page May 8, 2019 · 3 revisions

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

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>
Clone this wiki locally
You can’t perform that action at this time.