Web: Storybook: Added DropDownItem story
This commit is contained in:
parent
81a9cbb72c
commit
0918325540
@ -0,0 +1,25 @@
|
||||
# DropDownItem
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { DropDownItem } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
Is a item of DropDown component
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<DropDownItem isSeparator={false} label='Button 1' onClick={() => console.log('Button 1 clicked')} />
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
|
||||
| `isSeparator` | `bool` | - | - | `false` | Tells when the dropdown item should display like separator |
|
||||
| `label` | `string` | - | - | `Dropdown item`| Dropdown item text |
|
||||
| `onClick` | `func` | - | - | - | What the dropdown item will trigger when clicked |
|
@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import Readme from './README.md'
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import { DropDown, DropDownItem } from 'asc-web-components'
|
||||
|
||||
storiesOf('Components| DropDownItem', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('DropDownItem', () => (
|
||||
<Container>
|
||||
<Row>
|
||||
<Col xs="2">Only dropdown</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs="2">
|
||||
<DropDown opened={true}>
|
||||
<DropDownItem label='Button 1' onClick={() => console.log('Button 1 clicked')} />
|
||||
<DropDownItem label='Button 2' onClick={() => console.log('Button 2 clicked')} />
|
||||
<DropDownItem label='Button 3' onClick={() => console.log('Button 3 clicked')} />
|
||||
<DropDownItem label='Button 4' onClick={() => console.log('Button 4 clicked')} />
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem label='Button 5' onClick={() => console.log('Button 5 clicked')} />
|
||||
<DropDownItem label='Button 6' onClick={() => console.log('Button 6 clicked')} />
|
||||
</DropDown>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
);
|
Loading…
Reference in New Issue
Block a user