ChipView
Displays an inline series of chips (compact labeled elements) that can be navigated, selected, and closed using mouse or keyboard. Each chip represents a record in the underlying store. Configure closable to show a close icon, and provide a closeHandler to control what happens when a chip is dismissed — by default the corresponding record is removed from the store. Chips can also be removed by selecting them with arrow keys and pressing Delete or Backspace.
const chipView = new ChipView({
store : myStore,
closable : true,
appendTo : document.body
});
Useful configs and properties
| Config | Description |
|---|---|
| closable | Show a close icon on each chip |
| closeHandler | Callback invoked when a chip is closed |
| iconTpl | Template function returning chip icon markup |
| multiSelect | Allow selecting multiple chips via click or keyboard |
| store | The data store providing chip records |
| itemTpl | Template function for chip content |
See also
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
If closable is
true, this is the name of a callback function to handle what the "close" action means. If not provided, the record representing the chip is removed from the store.Returns
void -
Configure as
trueto allow multi select and allow clicking and key navigation to select multiple chips.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of ChipView class, or subclass thereof.
-
Identifies an object as an instance of ChipView class, or subclass thereof.
CSS variables
CSS variables that can be set to adjust appearance| Name | Description | |
|---|---|---|
| --b-chip-view-chip-background | Chip background | |
| --b-chip-view-chip-border-color | Chip border color | |
| --b-chip-view-chip-border-radius | Chip border radius | |
| --b-chip-view-chip-border-width | Chip border width | |
| --b-chip-view-chip-color | Chip text color | |
| --b-chip-view-chip-font-size | Chip font size | |
| --b-chip-view-chip-gap | Gap between chip content (chip's inner gap) | |
| --b-chip-view-chip-padding-block | Chip padding block | |
| --b-chip-view-chip-padding-inline | Chip padding inline | |
| --b-chip-view-gap | Gap between chips | |
| --b-chip-view-padding | Padding of the chip view | |
| Active | ||
| --b-chip-view-chip-active-background | Active chip background | |
| --b-chip-view-chip-active-selected-background | Active selected chip background | |
| Focused | ||
| --b-chip-view-chip-focus-border-color | Focused chip border color | |
| Hovered | ||
| --b-chip-view-chip-hover-background | Hovered chip background | |
| Selected | ||
| --b-chip-view-chip-selected-background | Selected chip background | |
| --b-chip-view-chip-selected-color | Selected (and active) chip text color | |