packages/eui/packages/components/eui-chip/eui-chip.component.ts
Chips are compact elements that allow users to enter information, select a choice, filter content or trigger an action. The eui-chip component can also be displayed dynamically as a group of multiple interactive elements, see eui-chip-list.
AfterContentInit
changeDetection | ChangeDetectionStrategy.OnPush |
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeS euiOutline euiDisabled
|
selector | eui-chip, span[euiChip], li[euiChip] |
imports |
EUI_ICON
EUI_ICON_BUTTON
|
templateUrl | ./eui-chip.component.html |
styleUrl | ./eui-chip.scss |
Properties |
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
ariaLabel |
Type : string
|
Default value : 'Chip content'
|
Sets the |
data |
Type : any
|
Default value : {
id: crypto.randomUUID(),
tooltip: {
color: 'euiTooltipPrimary',
contentAlignment: null,
position: 'above',
},
}
|
Sets the data of the chip like tooltip configuration. |
e2eAttr |
Type : string
|
Default value : 'eui-chip'
|
Sets the |
euiInternalId |
Type : string
|
Default value : null
|
Sets the euiInternalId of the chip. |
id |
Type : string | number
|
Sets the id of the chip. |
isChipRemovable |
Type : boolean
|
Default value : false
|
Wether the chip can be removed. |
isFilled |
Type : boolean
|
Default value : false
|
Wether the chip is filled with color. |
isSquared |
Type : boolean
|
Default value : false
|
tooltipMessage |
Type : string
|
Sets the label of the tooltip to diaply on hover. |
remove |
Type : EventEmitter
|
Event emitted when the chip is removed. |
attr.role |
Type : string
|
Default value : 'status'
|
Sets the |
class |
Type : string
|
Public onRemove | ||||||||
onRemove(event?: Event)
|
||||||||
Remove chip handler
Parameters :
Returns :
void
|
baseStatesDirective |
Default value : inject(BaseStatesDirective)
|
chipLabel |
Type : ElementRef<HTMLInputElement>
|
Decorators :
@ViewChild('chipLabel')
|
euiIcons |
Type : QueryList<EuiIconSvgComponent>
|
Decorators :
@ContentChildren(undefined)
|
Icon declares by user in the chip |
role |
Type : string
|
Default value : 'status'
|
Decorators :
@HostBinding('attr.role')
|
Sets the |
cssClasses |
getcssClasses()
|
Computes and returns the CSS classes for the component based on its current state.
Returns :
string
|