File

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

Description

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.

Implements

FocusableOption Highlightable

Metadata

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-list-item'
isActive
Type : boolean
Default value : false

HostBindings

attr.role
Type : string
Default value : 'listitem'
attr.tabindex
Type : string
Default value : '-1'
class
Type : string

Methods

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

Properties

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})

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""