2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-11-26 03:53:42 +03:00
|
|
|
import GithubIcon from './github_icon';
|
2016-10-08 01:16:51 +03:00
|
|
|
import { Button, IconButton, BrowseButton } from '../../components/button';
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
const ButtonTest = () => (
|
|
|
|
<section>
|
|
|
|
<h5>Buttons</h5>
|
|
|
|
<p>lorem ipsum...</p>
|
2015-11-17 23:49:27 +03:00
|
|
|
|
|
|
|
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
|
|
|
<GithubIcon /> Github
|
2015-11-16 23:55:21 +03:00
|
|
|
</Button>
|
2016-04-12 22:41:28 +03:00
|
|
|
<Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
|
2016-08-06 15:24:40 +03:00
|
|
|
<Button icon='bookmark' label='Bookmark' raised primary rippleMultiple={false} onRippleEnded={rippleEnded} />
|
2015-11-17 23:49:27 +03:00
|
|
|
<Button icon='inbox' label='Inbox' flat />
|
|
|
|
<Button icon='add' floating />
|
|
|
|
<Button icon='add' floating primary />
|
|
|
|
<Button icon='add' floating primary disabled />
|
|
|
|
<Button icon='add' floating accent mini />
|
2015-11-24 02:29:02 +03:00
|
|
|
<IconButton icon='favorite' accent />
|
2015-11-25 00:18:00 +03:00
|
|
|
<IconButton icon='favorite' inverse />
|
|
|
|
<IconButton icon='favorite' />
|
|
|
|
<IconButton icon='favorite' disabled />
|
2015-11-29 14:39:55 +03:00
|
|
|
<IconButton primary><GithubIcon/></IconButton>
|
2015-11-17 23:49:27 +03:00
|
|
|
<Button icon='add' label='Add this' flat primary />
|
|
|
|
<Button icon='add' label='Add this' flat disabled />
|
2016-08-10 12:31:07 +03:00
|
|
|
<h5>Icon Button Alignment</h5>
|
|
|
|
<p>
|
|
|
|
Icon Buttons should align in the vertical center, to see this we need to
|
|
|
|
put them next to text or highlight thier background color.
|
|
|
|
</p>
|
2016-09-03 13:23:22 +03:00
|
|
|
<IconButton icon='menu' style={{backgroundColor: 'red'}} inverse />
|
|
|
|
<span style={{verticalAlign: 'middle'}}>Menu</span>
|
2016-08-10 12:31:07 +03:00
|
|
|
<IconButton icon='menu' />
|
2016-09-03 13:23:22 +03:00
|
|
|
<span style={{verticalAlign: 'middle'}}>Menu</span>
|
2016-08-10 12:31:07 +03:00
|
|
|
<IconButton><GithubIcon /></IconButton>
|
2016-09-03 13:23:22 +03:00
|
|
|
<span style={{verticalAlign: 'middle'}}>Github</span>
|
2016-10-08 01:16:51 +03:00
|
|
|
<h5>Browse Button</h5>
|
|
|
|
<br/>
|
|
|
|
<BrowseButton icon='folder_open' label='BROWSE' raised primary />
|
|
|
|
|
|
|
|
<BrowseButton label='BROWSE' raised />
|
|
|
|
</section>
|
2015-10-20 08:40:51 +03:00
|
|
|
);
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2016-04-12 22:41:28 +03:00
|
|
|
function rippleEnded () {
|
|
|
|
console.log('Ripple animation ended!');
|
|
|
|
}
|
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
export default ButtonTest;
|