{
  "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": "MistIndicatorTemplateController",
  "layout": {
    "vars": {
      "themeColor": "#E24810"
    },
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "设置尺寸"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "indicator 根据布局得到的尺寸进行绘制"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "padding-top": 10,
              "padding-bottom": 10,
              "align-items": "center",
              "justify-content": "center",
              "spacing": 3,
              "background-color": "${themeColor}"
            },
            "children": [
              {
                "repeat": 8,
                "type": "indicator",
                "style": {
                  "width": "${10 + _index_ * 2}",
                  "height": "${10 + _index_ * 2}"
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "设置颜色"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "使用 <b>color</b> 属性设置 indicator 的颜色。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "vars": {
              "colors": ["red", "blue", "#CD661D", "black", "gray"]
            },
            "style": {
              "padding-top": 10,
              "padding-bottom": 10,
              "align-items": "center",
              "justify-content": "center",
              "spacing": 3
            },
            "children": [
              {
                "repeat": "${colors.count}",
                "type": "indicator",
                "style": {
                  "color": "${colors[_index_]}"
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "示例"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": ""
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "user-interaction-enabled": "${!state.loading}",
              "margin": 10,
              "padding": 10,
              "background-color": "${state.loading ? themeColor.toColor.colorWithAlphaComponent(0.7) : themeColor}",
              "clip": true,
              "corner-radius": 3,
              "align-items": "center",
              "justify-content": "center",
              "spacing": 3
            },
            "on-tap": {
              "load": ""
            },
            "children": [
              {
                "type": "text",
                "style": {
                  "text": "${state.loading ? '加载中' : '点我点我'}",
                  "color": "white",
                  "font-size": 18
                }
              },
              {
                "gone": "${!state.loading}",
                "type": "indicator",
                "style": {
                  "width": 18,
                  "height": 18
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "#888"
        }
      }
    ]
  }
}