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 |