Chip
- Shows Chips with actions.
Example Link
Features/Functionality
- Shows chips.
- Actions can be performed on chips.
- Component is responsive.
- It is cross browser compatible. (Edge, Firefox, chrome).
Basic Usage
Dependencies
- jquery
- font-awesome
- shared styles
Definition
<cst-s-chip schema.bind="${schema}"></cst-s-chip>
Schema Description
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| label | string type | Label to be shown. |
| object type | Icon to be shown. | |
| object type | Options for component. | |
| isDisabled | boolean type | Is dropdown disabled. |
| title | string type | Tooltip to be shown. |
| onClick | string type | Method to be called on click. |
| elmInstance | any type | Icon element instance. |
| customParentContext | any type | Parent Context to call callback methods. |
data
| Property | Value | Description | Value |
|---|---|---|---|
| iconSchema | object type | Icon Schema class | |
| position | left/right | Position of icon to be shown |
options
| Property | Value | Description | Value |
|---|---|---|---|
| type | rounded/boxed | Type of chip | |
| size | small/medium/large | size of chip | |
| isShadow | boolean type | Is Shadow required | |
| color | neutral/dark/light | Color of chip |
Schema Example
let schema = {
id: '',
label:'',
title: '',
icon: {
iconSchema: {},
position: left/right
}
isDisabled: true/false,
options: {
isShadow: true/false,
color: '',
type: '',
size: '',
},
onClick: ''
}