Developers - UI Control

Button Group

All our UI-controls require an array of name/value-pairs, where name is the shown value, and value is the class to toggle. Some of the controls have an additional display-property used to present custom CSS or icons.

The ui-buttongroup-control is a radio-button-group, styled like buttons.

Recommended for simple toggle-scenarios with 2-5 options.

Example:

{
  "name": "Border-Radius",
  "ui": "ui-buttongroup",
  "values": [
    {
      "name": "xs",
      "value": "ub-bdrs-1"
    },
    {
      "name": "sm",
      "value": "ub-bdrs-2"
    },
    {
      "name": "md",
      "value": "ub-bdrs-3"
    },
    {
      "name": "lg",
      "value": "ub-bdrs-4"
    },
    {
      "name": "xl",
      "value": "ub-bdrs-5"
    }
  ]
}

tip

If you want an option to be "none" (as in: no selection), set value to pf-none. This tells our script to remove any of the other values from the array of values from the target DOM-node.