Chips represent complex entities in small blocks, such as a contact. They can be used as a way for a user to create arbitrary items, like categories or tags.
A chip can be used as standalone, without any connection with another chip. It can be used like a badge or a category of an entity in your application. You can specify if your chip can be deletable and clickable:
All the following options can be applied to the md-chip component:
| Name | Description | Default |
|---|---|---|
| md-clickable Boolean | Enables/Disables the click action in the chip. | false |
| md-deletable Boolean | Creates a chip that can hold a delete action. Useful when editing a chip series, like tags or categories. | false |
| md-disabled Boolean | Enables/Disables the chip to be clickable of deletable. | false |
Sometimes we need to edit the set of items on screen, for example, when editing tags, the user may need to remove/add tags. In this case you can use the editable chips, that is the default behaviour:
Let's think in an entity that have tags. Sometimes you might need to show all of them in a single row, but not allow the user to edit them. You can achieve that using the md-chips component, with a static option:
Sometimes we need to show more information about a chip, so we want to have a custom HTML structure for the chip itself. To create that scenario we can use the template scope. In this case all you have to do is to create a slot with your custom template and you're good to go. Take a look at this example:
Chips would reject insertion if a chip is duplicated. You can customize feedback style of the duplicated chip:
Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.
Automatic value entry when focus is lost:
You can always use the hue modifiers in single chips:
All the following options can be applied to the md-chips component:
| Name | Description | Default |
|---|---|---|
| v-model Array | The content to be displayed as chips. Need to be a array of strings, unless you specify a custom template. | [] |
| id String | The input id. If null, it will be created automatically. | null |
| md-input-type String | The input type. Cannot be 'file' | text |
| md-placeholder String | The input placeholder. It is useful to show to the user which type of data will be inserted. | null |
| md-static Boolean | Creates a non-editable chips. Useful to show inside a details page. | false |
| md-limit Number | Blocks the chips to create items above the limit. | false |
| md-check-duplicated Boolean | Always check if there is a duplicated chip while changing the input value, or check it only on insertion | false |
| md-format Function | Formatter before chip insertion. Effects to insertion and duplicated-checking. The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result. | null |