|
6 | 6 | ## Contents |
7 | 7 |
|
8 | 8 | - [Button & Icon Button](#button--icon-button) |
| 9 | +- [Button Group](#button-group) |
9 | 10 | - [Ripple Effect](#ripple-effect) |
10 | 11 | - [Tooltip](#tooltip) |
11 | 12 | - [Drag and Drop](#drag-and-drop) |
@@ -40,6 +41,121 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; |
40 | 41 | Button variants for `igxButton`: `'flat'`, `'raised'`, `'outlined'`, `'fab'`. |
41 | 42 | Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`. |
42 | 43 |
|
| 44 | +## Button Group |
| 45 | + |
| 46 | +> **Docs:** [Button Group Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup) |
| 47 | +
|
| 48 | +```typescript |
| 49 | +// Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective) |
| 50 | +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; |
| 51 | + |
| 52 | +// Option B — individual imports |
| 53 | +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; |
| 54 | +import { IgxButtonDirective } from 'igniteui-angular/directives'; |
| 55 | + |
| 56 | +import { IgxIconComponent } from 'igniteui-angular/icon'; |
| 57 | +``` |
| 58 | + |
| 59 | +```html |
| 60 | +<!-- Text buttons — single selection (default) --> |
| 61 | +<igx-buttongroup> |
| 62 | + <button igxButton>Left</button> |
| 63 | + <button igxButton [selected]="true">Center</button> |
| 64 | + <button igxButton>Right</button> |
| 65 | +</igx-buttongroup> |
| 66 | + |
| 67 | +<!-- Multi-selection --> |
| 68 | +<igx-buttongroup selectionMode="multi"> |
| 69 | + <button igxButton><igx-icon>format_bold</igx-icon></button> |
| 70 | + <button igxButton><igx-icon>format_italic</igx-icon></button> |
| 71 | + <button igxButton><igx-icon>format_underlined</igx-icon></button> |
| 72 | +</igx-buttongroup> |
| 73 | + |
| 74 | +<!-- singleRequired — always keeps one button selected, cannot deselect --> |
| 75 | +<igx-buttongroup selectionMode="singleRequired"> |
| 76 | + <button igxButton [selected]="true">Day</button> |
| 77 | + <button igxButton>Week</button> |
| 78 | + <button igxButton>Month</button> |
| 79 | +</igx-buttongroup> |
| 80 | + |
| 81 | +<!-- Vertical alignment --> |
| 82 | +<igx-buttongroup alignment="vertical"> |
| 83 | + <button igxButton>Top</button> |
| 84 | + <button igxButton>Middle</button> |
| 85 | + <button igxButton>Bottom</button> |
| 86 | +</igx-buttongroup> |
| 87 | + |
| 88 | +<!-- Disabled group --> |
| 89 | +<igx-buttongroup [disabled]="true"> |
| 90 | + <button igxButton>A</button> |
| 91 | + <button igxButton>B</button> |
| 92 | +</igx-buttongroup> |
| 93 | + |
| 94 | +<!-- React to selection / deselection events --> |
| 95 | +<igx-buttongroup (selected)="onSelected($event)" (deselected)="onDeselected($event)"> |
| 96 | + <button igxButton>One</button> |
| 97 | + <button igxButton>Two</button> |
| 98 | + <button igxButton>Three</button> |
| 99 | +</igx-buttongroup> |
| 100 | +``` |
| 101 | + |
| 102 | +```typescript |
| 103 | +import { IButtonGroupEventArgs } from 'igniteui-angular/button-group'; |
| 104 | + |
| 105 | +onSelected(event: IButtonGroupEventArgs) { |
| 106 | + console.log('Selected index:', event.index, 'button:', event.button); |
| 107 | +} |
| 108 | + |
| 109 | +onDeselected(event: IButtonGroupEventArgs) { |
| 110 | + console.log('Deselected index:', event.index); |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +**Key inputs on `igx-buttongroup`:** |
| 115 | + |
| 116 | +| Input | Type | Default | Description | |
| 117 | +|---|---|---|---| |
| 118 | +| `selectionMode` | `'single' \| 'singleRequired' \| 'multi'` | `'single'` | Selection behaviour. `singleRequired` prevents full deselection. | |
| 119 | +| `alignment` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the buttons. | |
| 120 | +| `disabled` | `boolean` | `false` | Disables every button in the group. | |
| 121 | + |
| 122 | +**Key outputs on `igx-buttongroup`:** |
| 123 | + |
| 124 | +| Output | Payload | Emits when | |
| 125 | +|---|---|---| |
| 126 | +| `(selected)` | `IButtonGroupEventArgs` | A button is selected. | |
| 127 | +| `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. | |
| 128 | + |
| 129 | +`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above). |
| 130 | + |
| 131 | +**Key inputs on each `<button igxButton>` child:** |
| 132 | + |
| 133 | +| Input | Type | Description | |
| 134 | +|---|---|---| |
| 135 | +| `[selected]` | `boolean` | Sets the initial selected state of the button. | |
| 136 | +| `[disabled]` | `boolean` | Disables a specific button within the group. | |
| 137 | + |
| 138 | +**Programmatic control:** |
| 139 | + |
| 140 | +```typescript |
| 141 | +import { viewChild } from '@angular/core'; |
| 142 | +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; |
| 143 | + |
| 144 | +buttonGroup = viewChild.required<IgxButtonGroupComponent>('myGroup'); |
| 145 | + |
| 146 | +selectSecond() { this.buttonGroup().selectButton(1); } |
| 147 | +deselectSecond() { this.buttonGroup().deselectButton(1); } |
| 148 | +getSelected() { return this.buttonGroup().selectedButtons; } |
| 149 | +``` |
| 150 | + |
| 151 | +```html |
| 152 | +<igx-buttongroup #myGroup selectionMode="multi"> |
| 153 | + <button igxButton>A</button> |
| 154 | + <button igxButton>B</button> |
| 155 | + <button igxButton>C</button> |
| 156 | +</igx-buttongroup> |
| 157 | +``` |
| 158 | + |
43 | 159 | ## Ripple Effect |
44 | 160 |
|
45 | 161 | > **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple) |
|
0 commit comments