@forter/chip

1.5.1 • Public • Published

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,

Package Sidebar

Install

npm i @forter/chip

Weekly Downloads

0

Version

1.5.1

License

Apache-2.0

Unpacked Size

62.1 kB

Total Files

51

Last publish

Collaborators

  • forter-npm
  • lirown
  • oweingart