Chip
Chip is a simple rounded box that displays a single value and optionally an icon.
Selector
smart-chip
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
avatarstring | null
Sets a custom avatar that is positioned on the left side of the chip. The avatar can be an image(if the value is a url to an image), plain text or HTML.
closeButtonboolean
Determines whether a close button is displayed on the right side of the element.
Default valuefalse
disabledboolean
Enables or disables the element. Disabled elements can not be interacted with.
Default valuefalse
itemTemplateany
Sets a custom template for the chip. The template can be a string that represents the id of an HTMLTemplateElement inside the DOM or it's direct reference.
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
}
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valuestring
Sets the text content of the chip. The text inside the chip represents it's value. Value must be of type string. By default it's an empty string.
Default value"
onclose((this: Window, ev: Event) => any) | null
This event is triggered when the chip is closed.
Arguments
evEvent
ev.detailObject
ev.detail.value - A string representing the current value of the element.
Methods
close(): void
Closes the chip and removes it from the DOM.