Info

File

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

Description

Multiple eui-chips displayed dynamically as a group of multiple interactive elements.

Implements

AfterViewInit AfterContentInit OnDestroy OnChanges OnInit

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
HostDirectives	`BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeS euiSizeVariant euiOutline euiDisabled
selector	`eui-chip-list, div[euiChipList], ul[euiChipList]`
imports	`NgTemplateOutlet` `DragDropModule` `TranslateModule` `EuiTruncatePipe` `EuiTooltipDirective` `EUI_CHIP` `EUI_BUTTON` `EUI_ICON`
templateUrl	`./eui-chip-list.component.html`
styleUrl	`./eui-chip-list.scss`

Index

Inputs

ariaLabel

Type : string

Default value : 'eUI Chip List'

Sets the aria-label attribute for the host element.

It must now be implemented at the application level. For more information, see: EUI Showcase

chips

Type : any[]

Array of chips to display in the list when used with the data approach.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipsLabelTruncateCount

Type : any

Default value : null

Whether the chips label length are limited by the value of this option.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipsSortOrder

Type : "ASC" | "DESC"

Default value : 'ASC'

In combination with isChipsSorted. Sets the sort criteria of the chips.

It must now be implemented at the application level. For more information, see: EUI Showcase

dragAndDropConnectedTo

Type : string[]

Default value : []

In combination with isChipsDragAndDrop, sets the name to the chips source with which a drag and drop will be done.

It must now be implemented at the application level. For more information, see: EUI Showcase

dragAndDropSourceName

Type : string

In combination with isChipsDragAndDrop, sets the name to the chips source.

It must now be implemented at the application level. For more information, see: EUI Showcase

dropListOrientation

Type : "horizontal" | "vertical"

Default value : 'horizontal'

In combination with isChipsDragAndDrop, sets the orientation of the list.

It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsDragAndDrop

Type : boolean

Default value : false

Whether the chips can be drag and dropped.

It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsRemovable

Type : boolean

Default value : false

Whether the chip can be removed from the list.

It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsSorted

Type : boolean

Default value : false

Whether this chips are sorted on their label.

It must now be implemented at the application level. For more information, see: EUI Showcase

isGrid

Type : boolean

Default value : false

In combination with isChipsDragAndDrop. Whether the chips are drag and droppable in a flex container.

It must now be implemented at the application level. For more information, see: EUI Showcase

isMaxVisibleChipsOpened

Type : boolean

Default value : false

In combination with maxVisibleChipsCount. Whether all chips are shown by default.

It must now be implemented at the application level. For more information, see: EUI Showcase

isSquared

Type : boolean

Default value : false

maxVisibleChipsCount

Type : any

Default value : null

Whether a limited amount, defined by this option, is used to display the chips.

It must now be implemented at the application level. For more information, see: EUI Showcase

toggleLinkLessLabel

Type : string

Default value : null

In combination with maxVisibleChipsCount, sets the label of the 'less chips' button, if not provided an arrow left icon will be displayed only.

It must now be implemented at the application level. For more information, see: EUI Showcase

toggleLinkMoreLabel

Type : string

Default value : null

In combination with maxVisibleChipsCount, sets the label of the 'more chips' button, if not provided an arrow right icon will be displayed only.

It must now be implemented at the application level. For more information, see: EUI Showcase

Outputs

chipDragRelease

Type : EventEmitter

Event emitted when a chip drag is released.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipDragStart

Type : EventEmitter

Event emitted when a chip drag starts.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipDrop

Type : EventEmitter

Event emitted when a chip drag is released.

It must now be implemented at the application level. For more information, see: EUI Showcase

chiplistFocus

Type : EventEmitter

Event emitted when the list gets the focus.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipRemove

Type : EventEmitter

Event emitted when a chip is removed from the list.

It must now be implemented at the application level. For more information, see: EUI Showcase

chipsInit

Type : EventEmitter

Event emitted with CdkDropList object when the chiplist is initiated.

It must now be implemented at the application level. For more information, see: EUI Showcase

HostBindings

class

Type : string

Methods

Public drop

drop(e: CdkDragDrop)

Drag and Drop chip handler used when a chip is moved inside a container.

Parameters :

Name	Type	Optional	Description
e	`CdkDragDrop<literal type>`	No	`CdkDragDrop` object used to move the chip in a list.

Returns : void

Public getChipContent

getChipContent(euiChip: any)

Parameters :

Name	Type	Optional
euiChip	`any`	No

Returns : string

Public getChipIconAfter

getChipIconAfter(euiChip: any)

Method that returns a boolean indicating of an icon has been declared after the label.

Parameters :

Name	Type	Optional	Description
euiChip	`any`	No	Chip to check.

Returns : boolean

true if an icon has been declared otherwise false.

Public getChipIconBefore

getChipIconBefore(euiChip: any)

Method that returns a boolean indicating if an icon has been declared before the label.

Parameters :

Name	Type	Optional	Description
euiChip	`any`	No	Chip to check.

Returns : boolean

true if an icon has been declared otherwise false.

Public getChipLabel

getChipLabel(euiChip: any)

Parameters :

Name	Type	Optional
euiChip	`any`	No

Returns : string

Public onDragEnter

onDragEnter(event: CdkDragEnter)

Drag and Drop chip handler used when a chip is moved to another container.

Parameters :

Name	Type	Optional	Description
event	`CdkDragEnter`	No	`CdkDragEnter` object used to move the chip in a list.

Returns : void

Public onDragReleased

onDragReleased(event: CdkDragRelease)

Method called when a chip is released after dragging.

Parameters :

Name	Type	Optional	Description
event	`CdkDragRelease`	No	`CdkDragRelease` object used to move the chip in a list.

Returns : void

Public onDragStarted

onDragStarted(event: CdkDragStart)

Method called when a chip starts to be dragged.

Parameters :

Name	Type	Optional	Description
event	`CdkDragStart`	No	`CdkDragStart` object used to move the chip in a list.

Returns : void

Public onDropGrid

onDropGrid(e: CdkDragDrop)

Method called when a chip is dropped.

Parameters :

Name	Type	Optional
e	`CdkDragDrop<literal type>`	No

Returns : void

onFocus

onFocus()

Method called when the list gets the focus.

Returns : void

Public onRemove

onRemove(removed: EuiChipComponent | EuiChip | literal type | any)

Remove chip from the list handler

Parameters :

Name	Type	Optional	Description
removed	`EuiChipComponent \| EuiChip \| literal type \| any`	No	Chip that is removed

Returns : void

Public toggleTags

This method has been removed in version 21. It must now be implemented at the application level. For more information, see: [EUI Showcase](https://eui.ecdevops.eu/eui-showcase-ux-components-21.x/style-guide/components/eui-chip-list)

toggleTags()

Method toggling the display of the chips in combination with maxVisibleChipsCount.

It must now be implemented at the application level. For more information, see: EUI Showcase

Returns : void

Properties

chipListDragAndDropItems

Type : CdkDropList

Decorators :


                            @ViewChild('chipListDragAndDropItems', {read: CdkDropList})

chipListDropList

Type : CdkDropList

Decorators :


                            @ViewChild('chipListDropList', {read: CdkDropList})

Public connectComponent

Type : CdkDropList[]

Default value : []

Public droppableArea

Type : (CdkDropList | string)[]

Public e2eAttr

Type : string

Default value : 'eui-chip-list'

euiChipItems

Type : QueryList<ElementRef>

Decorators :


                            @ViewChildren('euiChipItem', {read: ElementRef})

euiChipsContent

Type : QueryList<EuiChipComponent>

Decorators :


                            @ContentChildren(undefined)

Accessors

cssClasses

getcssClasses()

Computes and returns the CSS classes for the label title component based on its current state.

Returns : string

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""