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
|