1.5.1 • Published 3 years ago
@forter/chip v1.5.1
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, |