bloomer
bloomer copied to clipboard
Provide <Buttons> element
Button in a group should be contained in a 'button group'
https://bulma.io/documentation/elements/button/#list-of-buttons
<div class="buttons">
<span class="button">One</span>
<span class="button">Two</span>
<span class="button">Three</span>
<span class="button">Four</span>
<span class="button">Five</span>
<span class="button">Six</span>
<span class="button">Seven</span>
<span class="button">Eight</span>
<span class="button">Nine</span>
<span class="button">Ten</span>
<span class="button">Eleven</span>
<span class="button">Twelve</span>
<span class="button">Thirteen</span>
<span class="button">Fourteen</span>
<span class="button">Fifteen</span>
<span class="button">Sixteen</span>
<span class="button">Seventeen</span>
<span class="button">Eighteen</span>
<span class="button">Nineteen</span>
<span class="button">Twenty</span>
</div>
I've created one for my webapp, I'm sharing it as a concept in this issue
import React from 'react';
export default class Buttons extends React.Component {
constructor(props) {
super(props);
this.className = this.className.bind(this);
}
className() {
const classes = [];
classes.push("buttons");
if (this.props.hasAddons) classes.push("has-addons");
if (this.props.isCentered) classes.push("is-centered");
if (this.props.isRight) classes.push("is-right");
if (this.props.className) classes.push(this.props.className);
return classes.join(" ");
}
render() {
return (<div className={this.className()}>{this.props.children}</div>)
}
}