File

packages/eui/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

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string
Default value : 'eUI Chip List'

Sets the aria-label attribute for the host element.

chips
Type : any[]

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

chipsLabelTruncateCount
Type : any
Default value : null

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

chipsSortOrder
Type : "ASC" | "DESC"
Default value : 'ASC'

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

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.

dragAndDropSourceName
Type : string

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

dropListOrientation
Type : "horizontal" | "vertical"
Default value : 'horizontal'

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

isChipsDragAndDrop
Type : boolean
Default value : false

Whether the chips can be drag and dropped.

isChipsRemovable
Type : boolean
Default value : false

Whether the chip can be removed from the list.

isChipsSorted
Type : boolean
Default value : false

Whether this chips are sorted on their label.

isGrid
Type : boolean
Default value : false

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

isMaxVisibleChipsOpened
Type : boolean
Default value : false

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

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.

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.

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.

Outputs

chipDragRelease
Type : EventEmitter

Event emitted when a chip drag is released.

chipDragStart
Type : EventEmitter

Event emitted when a chip drag starts.

chipDrop
Type : EventEmitter

Event emitted when a chip drag is released.

chiplistFocus
Type : EventEmitter

Event emitted when the list gets the focus.

chipRemove
Type : EventEmitter

Event emitted when a chip is removed from the list.

chipsInit
Type : EventEmitter

Event emitted with CdkDropList object when the chiplist is initiated.

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
toggleTags()

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

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

results matching ""

    No results matching ""