1.5.1 • Published 2 years ago
fc-chip
An element for catagorizing
Usage
<script>
import '@forter/chip';
</script>
<fc-chip>
Chip
</fc-chip>
Examples
<!-- iconOnly -->
<fc-chip><fc-icon icon="edit"></fc-icon></fc-chip>
<!-- Icon - Intent - Success -->
<fc-chip intent="success">Approved</fc-chip>
Properties
Property | Attribute | Type | Default | Description |
---|
closeable | closeable | boolean | false | whether the chip can be closed |
closed | closed | string | | wether the chip closed |
disabled | disabled | boolean | | If the element is disabled |
intent | intent | "primary" \| "cancel" \| "success" \| "danger" \| "warn" | | The button's intent. See Intents in README. |
required | required | boolean | false | If the chip is required |
selected | selected | boolean | false | whether the chip is select able |
value | value | string | | value stored for delete event |
Events
Event | Description |
---|
close | fired when a chip remove clicked |
CSS Custom Properties
Property | Description |
---|
--fc-chip-background | background color. example: gray , |
--fc-chip-border-radius | border radius. example: 25px , |
--fc-chip-close-icon-color | close icon. example: light-gray , |
--fc-chip-cursor | cursor. example: pointer , |
--fc-chip-font-size | font size. example: 12px , |
--fc-chip-height | height. example: 30px , |
--fc-chip-hover-background | hover background color. example: light-gray , |
--fc-chip-hover-color | hover text color. example: black . |
--fc-chip-padding-left | padding left. example: 10px , |
--fc-chip-padding-right | padding right. example: 10px , |
--fc-chip-width | width. example: 25px , |