Button Group

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the buttonGroup
var el = document.querySelector("#buttonGroup");
var buttonGroup = Components.ButtonGroup({
    el: el,
    buttonType: $REST.Components.ButtonTypes.Primary,
    buttons: [
        { text: "Left" },
        { text: "Middle" },
        { text: "Right" }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the buttonGroup
let el = document.querySelector("#buttonGroup");
let buttonGroup = Components.ButtonGroup({
    el: el,
    buttonType: $REST.Components.ButtonTypes.Primary,
    buttons: [
        { text: "Left" },
        { text: "Middle" },
        { text: "Right" }
    ]
});

Web Component

// Return the button group properties return { buttonType: $REST.Components.ButtonTypes.Primary, buttons: [ { "text": "Left" }, { "text": "Middle" }, { "text": "Right" } ] }
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-button-group>
    // Return the button group properties
    return {
        buttonType: $REST.Components.ButtonTypes.Primary,
        buttons: [
            { "text": "Left" },
            { "text": "Middle" },
            { "text": "Right" }
        ]
    }
</bs-button-group>

References

ButtonGroup(props:IButtonGroupProps):IButtonGroup

IButtonGroup

Name Returns Description
el Element The jquery element.

IButtonGroupProps

Name Type Description
buttons string The buttons.
buttonType string The button type.
className string The class name to apply to button group.
el HTMLElement The element to render the button group to.
id string The id to apply to the button.
isLarge boolean Adds the ‘btn-group-lg’ class name.
isSmall boolean Adds the ‘btn-group-sm’ class name.
isVertical boolean Adds the ‘btn-group-vertical’ class name.
label string The aria-label property value.