Button Groups

New in v3.6! The button groups from Blaze 2 CSS!

Use

As with all RiotGear2 tags you can use markdown in your button text!

Button Group Attributes

These are global settings for all the buttons in the group. The only exceptions are style, disabled & active which can be set individually in the opts settings.

ghost attribute: yes| no OR true | false | ghost

rounded: yes | no OR true | false | rounded regular

disbled attribute: yes| no OR true | false | disabled enabled

Button Attributes

These are global settings for all the buttons in the group. The only exception is style & active which can be set individually in the opts settings.

active attribute: yes | no OR true | false | active non-active

disbled attribute: yes | no OR true | false | disabled enabled

HTML

You can either pass the text content for the button within the rg-button tags, or via the text="" attribute. The text within the tag is always used, if present.


      <rg-button-group style="<empty>|brand|info|success|warning|error" [rounded=true] [ghost=true]></rg-button-group>

JavaScript


    var tags = riot.mount ("div#grp-demo-1", "rg-button-group", {
      group: {
        style: "brand",
        size: "small",
        buttons: [
             {text: "Button **1**", active: "yes"},
             {text: "Button **2**"},
             {text: "Button **3**"}
           ]
         }
       }) ;

    riot.mount ("div#grp-demo-2", "rg-button-group", {
          group: {
              style: "warning",
              rounded: true,
              ghost: true,
              size: "medium",
              buttons: [
                {text: "Group **1**"},
                {text: "Group **2**", active: "yes"},
                {text: "Group **3**"}
              ]
            }
          }) ;

    riot.mount ("div#grp-demo-3", "rg-button-group", {
           group: {
                style: "success",
                rounded: true,
                size: "large",
                buttons: [
                    {text: "Btn **1**"},
                    {text: "Btn **2**"},
                    {text: "Btn **3**", disabled: "yes"}
                  ]
                }
            }) ;

    tags[0].on ("button-clicked", function (e){console.log("button-clicked:", e);})