@forter/chips
v1.3.9
Published
chips from Forter Components
Downloads
19
Readme
fc-chips
An element for wrapping collections of chips
Usage
<script>
import '@forter/chips';
</script>
<fc-chips>
<fc-chip closeable chip-id="approve" intent="success" filter="true">Approved</fc-chip>
<fc-chip closeable chip-id="pending" intent="primary" filter="true">Pending</fc-chip>
<fc-chip closeable chip-id="nr" intent="cancel" filter="true">Not Reviewed</fc-chip>
<fc-chip closeable chip-id="selected" selected="true"><fc-icon icon="edit"></fc-icon>Selected</fc-chip>
</fc-chips>
Properties
| Property | Attribute | Type | Default | Description |
|--------------|--------------|-----------------------------------|---------|-----------------------------------------|
| menu
| menu
| boolean
| | whether or not to display the chip menu |
| searchtext
| searchtext
| string
| "" | filter chips in the menu |
| type
| type
| "normal" \| "stacked" \| "more"
| | what way to display the chips |
| values
| values
| any[]
| | what way to display the chips |
Events
| Event | Description |
|----------|----------------------------------|
| change
| when the chips are added/removed |
CSS Custom Properties
| Property | Description |
|------------------------|--------------------------------------------|
| --fc-chips-flex-wrap
| chips container flex-wrap. example: wrap
|
| --fc-chips-gap
| chips gap. example: 5px
|