The Chip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way.
Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too. They can also be closed or removed if configured so.
Some basic examples:
There are a number of properties available:
|Boolean||Allows the chip to float over other elements.|
|Boolean||Makes it a “tag” type.|
|Boolean||Highlights the area on the right (icon or avatar), should there be one.|
|String||Icon for left side.|
|String||Icon for right side.|
|String||URL pointing to statics folder for an image which gets placed on left side.|
|Boolean||Reduces the size of the chip. Makes it compact.|
|Boolean||Gives the chip right-angled corners. Rounded corners are default.|
|String||Adds a carat to the chip, pointing either |
|String||The color the chip should be.|
|Boolean||Adds a close button to the right of the chip, which when clicked, will emit |
|The close button has been clicked/tapped.|
|Chip has been clicked/tapped outside of close button.|
closable property a close button will be displayed on the right side. When clicking/tapping on the button the
@close event will be triggered. This does not removes the chip by itself. You will have to handle it yourself.
The two events fire independently but not both simultaneously, depending on where the user has clicked/tapped (on close button or anywhere else within the Chip).
You can add the ability to close the chip too.
You can also use a chip to label a button.
You can also use chips as pointing labels.
You can create advanced label chips, with an avatar/image and a closeable button to delete the chip.
You can also create chips that look like tags.
This chip highlights the icon by using the
One more example where we add a shadow to a chip: