Skip to content
This repository has been archived by the owner on Feb 13, 2023. It is now read-only.

Provide <Buttons> element #114

Open
blacksoulgem95 opened this issue Sep 12, 2018 · 0 comments
Open

Provide <Buttons> element #114

blacksoulgem95 opened this issue Sep 12, 2018 · 0 comments

Comments

@blacksoulgem95
Copy link

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>)
    }
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant