packages/eui/packages/components/eui-list/eui-list.component.ts
Component that provides a navigable list implementation with keyboard interaction support. Works with Angular CDK's FocusKeyManager to enable keyboard navigation between list items.
The component automatically manages focus between nested lists and supports rich content navigation. It can contain multiple EuiListItemComponents as children.
AfterContentInit
changeDetection | ChangeDetectionStrategy.OnPush |
selector | [euiList], eui-list |
template |
|
styleUrl | ./eui-list.scss |
Properties |
Methods |
HostBindings |
HostListeners |
Accessors |
attr.role |
Type : string
|
Default value : 'list'
|
Binds the 'list' ARIA role to the host element for accessibility. This informs screen readers that this component functions as a list. |
attr.tabindex |
Type : string
|
Binds the tabIndex attribute to the host element. Controls whether the list can receive keyboard focus. Set to '0' for top-level lists and '-1' for nested lists. |
class |
Type : string
|
CSS class binding that applies the 'eui-list' class to the host element. This class applies the basic styling for the list component. |
checkRichContentFocusState |
checkRichContentFocusState()
|
Manages focus state of rich content navigation within list items. Handles the focus transition between list item elements and their navigable content. Called when right/left arrow keys are pressed on items with navigable content.
Returns :
void
|
onKeydown | ||||||||
onKeydown(event: KeyboardEvent)
|
||||||||
Decorators :
@HostListener('keydown', ['$event'])
|
||||||||
Handles keyboard events for navigating the list. Supports Enter key for selection and arrow keys for navigation.
Parameters :
Returns :
void
|
items |
Type : QueryList<EuiListItemComponent>
|
Decorators :
@ContentChildren(undefined, {descendants: true})
|
Collection of all list item components that are children of this list. Includes items from nested lists due to the 'descendants: true' option. |
role |
Type : string
|
Default value : 'list'
|
Decorators :
@HostBinding('attr.role')
|
Binds the 'list' ARIA role to the host element for accessibility. This informs screen readers that this component functions as a list. |
tabIndex |
Type : string
|
Decorators :
@HostBinding('attr.tabindex')
|
Binds the tabIndex attribute to the host element. Controls whether the list can receive keyboard focus. Set to '0' for top-level lists and '-1' for nested lists. |
cssClasses |
getcssClasses()
|
CSS class binding that applies the 'eui-list' class to the host element. This class applies the basic styling for the list component.
Returns :
string
|