44 lines
1.7 KiB
JavaScript
44 lines
1.7 KiB
JavaScript
/* global React */
|
|
|
|
import Card from '../../components/card';
|
|
|
|
export default React.createClass({
|
|
displayName: 'CardTest',
|
|
|
|
onClick () {
|
|
console.log('onClick', arguments);
|
|
},
|
|
|
|
onActionClick () {
|
|
console.log('onClick', arguments);
|
|
},
|
|
|
|
render () {
|
|
const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
|
|
const legend = 'Lorem Ipsum is simply dummy text';
|
|
const actions = [
|
|
{ label: 'Save', icon: 'add', onClick: this.onActionClick },
|
|
{ label: 'Close', onClick: this.onActionClick }];
|
|
|
|
return (
|
|
<section>
|
|
<h2>Cards</h2>
|
|
<h3>Basic properties</h3>
|
|
|
|
<Card title='Default Card' />
|
|
<Card title='Default Card loading' loading />
|
|
<Card title='Default Card with text' text={text} />
|
|
<Card title='Default Card with legend' legend={legend} />
|
|
<Card title='Default Card with actions' actions={actions} />
|
|
<Card title='Default Card with text and image' text={text} image='http://cdn.tapquo.com/photos/soyjavi.jpg' />
|
|
<Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
|
|
<Card title='Default Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
|
|
<h3>Sizes using type property</h3>
|
|
<Card type='small' title='Small Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
|
|
<Card type='square' title='Square Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
|
|
<Card type='wide' title='Wide card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
|
|
</section>
|
|
);
|
|
}
|
|
});
|