Include Chip in docs
parent
cb80113d7a
commit
84130d4a4d
|
@ -5,6 +5,7 @@ import Avatar from 'react-toolbox/avatar/readme';
|
||||||
import Button from 'react-toolbox/button/readme';
|
import Button from 'react-toolbox/button/readme';
|
||||||
import Card from 'react-toolbox/card/readme';
|
import Card from 'react-toolbox/card/readme';
|
||||||
import Checkbox from 'react-toolbox/checkbox/readme';
|
import Checkbox from 'react-toolbox/checkbox/readme';
|
||||||
|
import Chip from 'react-toolbox/chip/readme';
|
||||||
import DatePicker from 'react-toolbox/date_picker/readme';
|
import DatePicker from 'react-toolbox/date_picker/readme';
|
||||||
import Dialog from 'react-toolbox/dialog/readme';
|
import Dialog from 'react-toolbox/dialog/readme';
|
||||||
import Drawer from 'react-toolbox/drawer/readme';
|
import Drawer from 'react-toolbox/drawer/readme';
|
||||||
|
@ -32,6 +33,7 @@ import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
|
||||||
import AvatarExample1 from './examples/avatar_example_1.txt';
|
import AvatarExample1 from './examples/avatar_example_1.txt';
|
||||||
import ButtonExample1 from './examples/button_example_1.txt';
|
import ButtonExample1 from './examples/button_example_1.txt';
|
||||||
import CardExample1 from './examples/card_example_1.txt';
|
import CardExample1 from './examples/card_example_1.txt';
|
||||||
|
import ChipExample1 from './examples/chip_example_1.txt';
|
||||||
import CheckboxExample1 from './examples/checkbox_example_1.txt';
|
import CheckboxExample1 from './examples/checkbox_example_1.txt';
|
||||||
import DatePickerExample1 from './examples/datepicker_example_1.txt';
|
import DatePickerExample1 from './examples/datepicker_example_1.txt';
|
||||||
import DialogExample1 from './examples/dialog_example_1.txt';
|
import DialogExample1 from './examples/dialog_example_1.txt';
|
||||||
|
@ -85,6 +87,12 @@ export default {
|
||||||
path: '/components/card',
|
path: '/components/card',
|
||||||
examples: [CardExample1]
|
examples: [CardExample1]
|
||||||
},
|
},
|
||||||
|
chip: {
|
||||||
|
name: 'Chip',
|
||||||
|
docs: Chip,
|
||||||
|
path: '/components/chip',
|
||||||
|
examples: [ChipExample1]
|
||||||
|
},
|
||||||
checkbox: {
|
checkbox: {
|
||||||
name: 'Checkbox',
|
name: 'Checkbox',
|
||||||
docs: Checkbox,
|
docs: Checkbox,
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
class ChipTest extends React.Component {
|
||||||
|
state = {
|
||||||
|
deleted: false
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDeleteClick = () => {
|
||||||
|
this.setState({
|
||||||
|
deleted: true
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<Chip>Example chip</Chip>
|
||||||
|
<Chip>
|
||||||
|
<span style={{textDecoration: 'line-through'}}>Standard</span>
|
||||||
|
<strong>Custom</strong> chip <small>(custom markup)</small>
|
||||||
|
</Chip>
|
||||||
|
|
||||||
|
{
|
||||||
|
this.state.deleted ? null : (
|
||||||
|
<Chip deletable onDeleteClick={this.handleDeleteClick}>
|
||||||
|
Deletable Chip
|
||||||
|
</Chip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<Chip>
|
||||||
|
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
||||||
|
<span>Avatar Chip</span>
|
||||||
|
</Chip>
|
||||||
|
|
||||||
|
<Chip>
|
||||||
|
<Avatar title="A" /><span>Initial chip</span>
|
||||||
|
</Chip>
|
||||||
|
|
||||||
|
<Chip>
|
||||||
|
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||||
|
<span>Image contact chip</span>
|
||||||
|
</Chip>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <ChipTest />
|
Loading…
Reference in New Issue