{
  "styles": {
    "title": {
      "font-style": "bold",
      "font-size": 15,
      "padding-top": 15,
      "padding-left": 10,
      "color": "#666",
      "background-color": "#ddd"
    },
    "subtitle": {
      "lines": 0,
      "font-size": 13,
      "padding-bottom": 4,
      "padding-left": 10,
      "color": "#999",
      "background-color": "#ddd"
    }
  },
  "controller": "MistSegmentedControlDemoController",
  "layout": {
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "基本用法"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "一个基本的sgemented control, 通过 items 设置 segement 的值"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "segmentedcontrol",
            "style": {
              "margin": 10,
              "height": 30,
              "items": [
                "one",
                "two",
                "three"
              ]
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "selected-segmented-index"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "可通过 selected-segmented-index 选中 segment，默认为-1，不选中任何segment"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "segmentedcontrol",
            "style": {
              "margin": 10,
              "height": 30,
              "selected-segmented-index": 2,
              "items": [
                "one",
                "two",
                "three"
              ]
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "enabled"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "通过 enabled 控制 segmentedControl 的可用状态，默认为 true"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "segmentedcontrol",
            "style": {
              "margin": 10,
              "height": 30,
              "enabled": false,
              "items": [
                "one",
                "two",
                "three"
              ]
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "on-change"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "selectedSegementedIndex 变化通过 on-change 传递"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "segmentedcontrol",
            "on-change": {
              "onChanged:body:": "on-change"
            },
            "style": {
              "margin": 10,
              "height": 30,
              "items": "${state.items}",
              "selected-segmented-index": "${state.selectedSegmentedIndex}"
            }
          },
          {
            "type": "text",
            "style": {
              "align-self": "center",
              "color": "#fb6165",
              "font-size": 18,
              "text": "${state.items[state.selectedSegmentedIndex] ?: 'undefined'}"
            }
          }
        ]
      }
    ]
  }
}