Segmented

Display a segmented control.

Control Example

{
  "title": "Button Style",
  "id": "buttonStyle",
  "segmented": {
    "default": "solid",
    "items": [{
      "value": "solid",
      "icon": "rectangle.fill"
    }, {
      "value": "outline",
      "icon": "rectangle"
    }, {
      "value": "ghost",
      "icon": "square.dashed"
    }]
  }
}

Group Example

You can also use the following title key to display text instead of icons.

{
  "groups": [{
    "title": "Layout",
    "properties": [{
      "title": "Content Alignment",
      "id": "contentAlignment",
      "segmented": {
        "items": [{
          "value": "text-left",
          "title": "Left"
        }, {
          "value": "text-center",
          "title": "Center",
          "default": true
        }, {
          "value": "text-right",
          "title": "Right"
        }]
      }
    }]
  }]
}