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

Provide <Buttons> element  #114

@blacksoulgem95

Description

@blacksoulgem95

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>)
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions