File

packages/eui/packages/components/eui-list/eui-list.component.ts

Description

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.

Implements

AfterContentInit

Metadata

Index

Properties
Methods
HostBindings
HostListeners
Accessors

HostBindings

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.

HostListeners

keydown
Arguments : '$event'
keydown(event: KeyboardEvent)

Handles keyboard events for navigating the list. Supports Enter key for selection and arrow keys for navigation.

Parameters :
Name Optional Description
event No
  • The keyboard event to handle

Methods

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 :
Name Type Optional Description
event KeyboardEvent No
  • The keyboard event to handle
Returns : void

Properties

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.

Accessors

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

results matching ""

    No results matching ""