packages/eui/packages/components/eui-list/eui-list-item/eui-list-item.component.ts
Component that represents a single item within an EuiList. Implements FocusableOption and Highlightable for keyboard navigation and accessibility.
This component is designed to work with the EuiListComponent as part of a navigable list. It supports various display states through the BaseStatesDirective, and can contain nested list components, icons, labels, and custom templates.
FocusableOption
Highlightable
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant
|
selector | [euiListItem], eui-list-item |
templateUrl | ./eui-list-item.component.html |
styleUrl | ./eui-list-item.scss |
Properties |
Methods |
|
Inputs |
HostBindings |
Accessors |
e2eAttr |
Type : string
|
Default value : 'eui-list-item'
|
isActive |
Type : boolean
|
Default value : false
|
attr.role |
Type : string
|
Default value : 'listitem'
|
attr.tabindex |
Type : string
|
Default value : '-1'
|
class |
Type : string
|
Public click |
click()
|
Programmatically triggers a click event on the list item element. Typically, invoked when the user presses Enter while the item is focused.
Returns :
void
|
Public focus |
focus()
|
Sets focus on the list item element. Used by the FocusKeyManager to handle keyboard navigation within the list.
Returns :
void
|
Public setActiveStyles |
setActiveStyles()
|
Applies active styling to the list item. Called by the FocusKeyManager when this item becomes the active item in the list. Sets the isActive flag to true, which adds the 'eui-list-item--active' CSS class.
Returns :
void
|
Public setInactiveStyles |
setInactiveStyles()
|
Removes active styling from the list item. Called by the FocusKeyManager when another item becomes the active item. Sets the isActive flag to false, removing the 'eui-list-item--active' CSS class.
Returns :
void
|
baseStatesDirective |
Default value : inject(BaseStatesDirective)
|
euiArrowKeyNavigableDirective |
Type : EuiArrowKeyNavigableDirective
|
Decorators :
@ContentChild(undefined)
|
euiIconSvgComponent |
Type : QueryList<EuiIconSvgComponent>
|
Decorators :
@ContentChildren(undefined, {descendants: true})
|
euiLabelComponent |
Type : QueryList<EuiLabelComponent>
|
Decorators :
@ContentChildren(undefined, {descendants: true})
|
euiListComponent |
Type : QueryList<EuiListComponent>
|
Decorators :
@ContentChildren(undefined, {descendants: true})
|
role |
Type : string
|
Default value : 'listitem'
|
Decorators :
@HostBinding('attr.role')
|
tabindex |
Type : string
|
Default value : '-1'
|
Decorators :
@HostBinding('attr.tabindex')
|
templates |
Type : QueryList<EuiTemplateDirective>
|
Decorators :
@ContentChildren(undefined, {descendants: true})
|
cssClasses |
getcssClasses()
|