47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# Chip
|
|
|
|
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
|
|
|
|
To add an icon or contact image to a chip, include an `Avatar` element as the first child.
|
|
|
|
<!-- example -->
|
|
```jsx
|
|
import Avatar from 'react-toolbox/lib/avatar';
|
|
import Chip from 'react-toolbox/lib/chip';
|
|
|
|
const ChipTest = () => (
|
|
<div>
|
|
<Chip>Example chip</Chip>
|
|
<Chip>
|
|
<span style={{textDecoration: 'line-through'}}>Standard</span>
|
|
<strong>Custom</strong> chip <small>(custom markup)</small>
|
|
</Chip>
|
|
|
|
<Chip deletable>Deletable Chip</Chip>
|
|
|
|
<Chip avatar>
|
|
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
|
<span>Avatar Chip</span>
|
|
</Chip>
|
|
|
|
<Chip avatar>
|
|
<Avatar title="A" /><span>Initial chip</span>
|
|
</Chip>
|
|
|
|
<Chip avatar>
|
|
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
|
<span>Image contact chip</span>
|
|
</Chip>
|
|
</div>
|
|
);
|
|
```
|
|
|
|
## Properties
|
|
|
|
| Name | Type | Default | Description|
|
|
|:----------------|:------------|:----------------|:-----------|
|
|
| `avatar` | `Boolean` | `false` | If true, the chip will include styles to accommodate an `Avatar`. |
|
|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
|
| `deletable` | `Boolean` | `false` | If true, the chip will be rendered with a delete icon.|
|
|
| `onDeleteClick` | `Function` | | Callback to be invoked when the delete icon is clicked. |
|