Chips represent complex entities in small blocks, such as a contact. They can be used as a way for a user create arbitrary items, like categories or tags.
A chip can be used standalone, without any connection with another chip. It can be used to be like a badge or a category of a 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:
|md-clickable Boolean||Enables/Disables the click action in the chip.|
|md-deletable Boolean||Creates a chip that can hold a delete action. Useful when editing a chip series, like tags or categories.|
|md-disabled Boolean||Enables/Disables the chip to be clickable of deletable.|
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 a entity that have tags. Sometimes you might need to show all of them in a single row, but not enable 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 loot at this example:
Chips would reject insertion while a chip was duplicated. You could 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.
You can always use the hue modifiers in single chips:
All the following options can be applied to the md-chips component:
|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.|
|md-input-type String||The input type. Cannot be 'file'|
|md-placeholder String||The input placeholder. It is useful to show to the user which type of data will be inserted.|
|md-static Boolean||Creates a non-editable chips. Useful to show inside a details page.|
|md-limit Number||Blocks the chips to create items above the limit.|
|md-check-duplicated Boolean||Always check if there is a duplicated chip while changing the input value, or check it only on insertion|
|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.