generated:catalog.entry.toggle-group.title
generated:catalog.entry.toggle-group.description
@xngui/components/toggle-group@xngui/components/toggle-groupchrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { signal } from '@angular/core';
import { XToggleButton } from '@xngui/components/toggle-button';
import { XToggleGroup } from '@xngui/components/toggle-group';
import { XChangeEvent } from '@xngui/core';
import { XIcon } from '@xngui/icons';
@Component({
selector: 'app-example',
imports: [signal, XToggleButton, XToggleGroup, XChangeEvent, XIcon],
templateUrl: './toggle-group.component.html',
})
export class ExampleComponent {
protected readonly align = signal<string | string[]>('left');
protected onGroupChanged(event: XChangeEvent<string | string[]>): void {
// handle selection change
}
}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-toggle-group
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
orientationXOrientation'horizontal'Join axis for child toggles.
sizeXSize—Visual size tier — cascades to child toggles when unset locally.
densityXDensity—Spacing offsets — cascades to child toggles when unset locally.
variantXVariant—Color role — cascades to child toggles; falls back to XConfigService when unset.
appearanceXAppearance—Surface treatment — cascades to child toggles; falls back to XConfigService when unset.
disabledboolean—Blocks selection changes when true.
stretchbooleanfalseWhen true, segments share the group size evenly.
selectionModeExtract<XSelectionMode, 'single' | 'multiple'>'single'Single or multiple selection.
ariaLabelstring—Accessible name — required when the segment purpose is not visible.