Chip

Description

It is a component usually used for adding the enter value from the input text field.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-display --save

Standard Chip With Remove Button

Configuration

import { Chip } from 'empower-display';

..............
const configChip = {
  removeIcon: true,
  label: 'Chip Label',
  id: 'chipID',
  disabled: false,
} 

    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <Chip config={configChip} onChange={e => getActions(e, 'chip')} />
    </>
  )

Chip Without Remove Button

Configuration

import { Chip } from 'empower-display';

..............
const configChip = {
  removeIcon: false,
  label: 'Chip Label',
  id: 'chipID',
  disabled: false,
} 

    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <Chip config={configChip} onChange={e => getActions(e, 'chip')} />
    </>
  )

Disabled Chip With Remove Button

Configuration

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
removeIcon	Boolean	Required	Sets the visibility of remove icon
label	String	Required	Label inside the chip
id	String	Required	It is added as the chip id. It should be unique
disabled	Boolean	Optional	Disabling the chips almost looks like the remove icon is hidden.

References

Repository Link: https://bitbucket.org/empowerteams/empower-display

NPM Package: https://www.npmjs.com/package/empower-display

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git