2019-07-18 08:00:54 +00:00
|
|
|
# ComboBox
|
|
|
|
|
|
|
|
#### Description
|
|
|
|
|
|
|
|
Custom combo box input
|
|
|
|
|
2019-08-08 11:14:25 +00:00
|
|
|
Options have options:
|
|
|
|
key - Item key, may be a string or a number,
|
|
|
|
label - Display text,
|
|
|
|
icon - Optional name of icon that will be displayed before label
|
|
|
|
|
2019-07-18 08:00:54 +00:00
|
|
|
#### Usage
|
|
|
|
|
|
|
|
```js
|
|
|
|
import { ComboBox } from 'asc-web-components';
|
|
|
|
|
2019-07-31 18:42:23 +00:00
|
|
|
const options = [
|
|
|
|
{
|
2019-08-08 11:14:25 +00:00
|
|
|
key: 1,
|
|
|
|
icon: 'CatalogEmployeeIcon',
|
|
|
|
label: 'Option 1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 2,
|
|
|
|
icon: 'CatalogGuestIcon',
|
|
|
|
label: 'Option 2',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 3,
|
|
|
|
label: 'Option 3'
|
2019-07-31 18:42:23 +00:00
|
|
|
},
|
|
|
|
{
|
2019-08-08 11:14:25 +00:00
|
|
|
key: 4,
|
|
|
|
label: 'Option 4'
|
2019-07-31 18:42:23 +00:00
|
|
|
},
|
|
|
|
{
|
2019-08-08 11:14:25 +00:00
|
|
|
key: 5,
|
|
|
|
icon: 'CopyIcon',
|
|
|
|
label: 'Option 5'
|
2019-08-14 12:53:05 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 6,
|
|
|
|
label: 'Option 6'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 7,
|
|
|
|
label: 'Option 7'
|
2019-07-31 18:42:23 +00:00
|
|
|
}
|
|
|
|
];
|
|
|
|
|
2019-08-12 08:19:52 +00:00
|
|
|
<ComboBox options={options}
|
|
|
|
isDisabled={false}
|
2019-08-14 12:53:05 +00:00
|
|
|
selectedOption={{
|
|
|
|
key: 0,
|
|
|
|
label: 'Select'
|
|
|
|
}}
|
2019-08-12 08:19:52 +00:00
|
|
|
dropDownMaxHeight='200px'
|
2019-08-14 12:53:05 +00:00
|
|
|
noBorder={false}
|
2019-08-12 08:19:52 +00:00
|
|
|
scale={true}
|
|
|
|
size='content'
|
|
|
|
onSelect={option => console.log('selected', option)}
|
|
|
|
/>
|
2019-07-18 08:00:54 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
#### Properties
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ---------------------- | ----------------- | :------: | ---------------------------- | ------- | -------------------------------------------- |
|
2019-07-26 09:02:08 +00:00
|
|
|
| `options` | `array` | ✅ | - | - | Combo box options |
|
|
|
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
2019-08-14 12:53:05 +00:00
|
|
|
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
|
|
|
|
| `selectedOption` | `object` | - | - | - | Selected option |
|
2019-08-12 08:19:52 +00:00
|
|
|
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
|
|
|
|
| `dropDownMaxHeight` | `string` | - | - | - | Height of Dropdown |
|
|
|
|
| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent |
|
2019-08-14 12:53:05 +00:00
|
|
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default |
|