{
  "state": {
    "itemsCount": 12,
    "selected": {
      "wrap": 1,
      "height": 2,
      "clip": 1,
      "flex-shrink": 1
    },
    "selectedTab": 0
  },
  "styles": {
    "button": {
      "width": 20,
      "height": 20,
      "font-style": "bold",
      "title-color": {
        "normal": "#E24810",
        "highlighted": "white",
        "disabled": "#aaa"
      },
      "background-image": {
        "normal": "white",
        "highlighted": "#E24810"
      },
      "clip": true,
      "border-width": 1,
      "border-color": "#E24810",
      "corner-radius": 3
    }
  },
  "cell-height-animation": true,
  "layout": {
    "vars": {
      "themeColor": "#E24810",
      "items": [[100, 18], [50, 20], [80, 14], [130, 23], [70, 17], [60, 26], [80, 19], [50, 21], [80, 23], [70, 18], [80, 20]],
      "map": {
        "direction": ["horizontal", "vertical", "horizontal-reverse", "vertical-reverse"],
        "wrap": ["nowrap", "wrap", "wrap-reverse"],
        "align-items": ["stretch", "start", "center", "end", "baseline"],
        "justify-content": ["start", "center", "end", "space-between", "space-around"],
        "align-content": ["stretch", "start", "center", "end"],
        "lines": ["0", "1", "2", "3"],
        "items-per-line": ["0", "1", "2", "3", "4", "5"],
        "height": ["auto", "60", "120", "180", "240"],
        "clip": ["true", "false"],
        "flex-basis": ["auto", "content", "0", "20", "40", "80"],
        "flex-grow": ["0", "1"],
        "flex-shrink": ["0", "1"]
      },
      "tabs": [
        {
          "text": "容器属性",
          "attrs": ["direction", "wrap", "align-items", "justify-content", "align-content", "lines", "items-per-line", "height"]
        },
        {
          "text": "子元素属性",
          "attrs": ["clip", "flex-grow", "flex-shrink", "flex-basis"]
        }
      ]
    },
    "style": {
      "auto-animation": {
        "enabled": true,
        "duration": 0.3
      },
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "spacing": 2,
          "line-spacing": 2,
          "height": "${map['height'][state.selected['height']]}",
          "direction": "${map['direction'][state.selected['direction']]}",
          "justify-content": "${map['justify-content'][state.selected['justify-content']]}",
          "align-content": "${map['align-content'][state.selected['align-content']]}",
          "align-items": "${map['align-items'][state.selected['align-items']]}",
          "wrap": "${map['wrap'][state.selected['wrap']]}",
          "lines": "${map['lines'][state.selected['lines']]}",
          "items-per-line": "${map['items-per-line'][state.selected['items-per-line']]}"
        },
        "children": [
          {
            "repeat": "${state.itemsCount}",
            "vars": {
              "item": "${items[_index_%items.count]}"
            },
            "type": "text",
            "on-update-appear": {
              "type": "animation",
              "params": {
                "duration": 0.2,
                "key-path": "opacity",
                "from": 0
              }
            },
            "on-update-disappear": {
              "type": "animation",
              "params": {
                "duration": 0.2,
                "animations": [
                  {
                    "key-path": "hidden",
                    "from": false,
                    "duration": 0.5
                  },
                  {
                    "key-path": "opacity",
                    "to": 0
                  }
                ]
              }
            },
            "style": {
              "text": "${_index_ + 1}",
              "width": "${item[0]}",
              "font-size": "${item[1]}",
              "clip": "${map['clip'][state.selected['clip']].boolValue}",
              "flex-grow": "${map['flex-grow'][state.selected['flex-grow']]}",
              "flex-shrink": "${map['flex-shrink'][state.selected['flex-shrink']]}",
              "flex-basis": "${map['flex-basis'][state.selected['flex-basis']]}",
              "background-color": "blue",
              "color": "white",
              "alignment": "center"
            }
          }
        ]
      },
      {
        "style": {
          "background-color": "#ddd",
          "padding-left": 10,
          "padding-top": 4
        },
        "children": [
          {
            "type": "text",
            "style": {
              "text": "元素个数",
              "font-size": 12,
              "color": "#666",
              "margin-right": 8
            }
          },
          {
            "type": "button",
            "class": "button",
            "style": {
              "title": "−",
              "properties": {
                "enabled": "${state.itemsCount > 0}"
              }
            },
            "on-tap": {
              "updateState:": {
                "itemsCount": "${state.itemsCount - 1}"
              }
            }
          },
          {
            "type": "text",
            "style": {
              "text": "${state.itemsCount}",
              "width": 30,
              "alignment": "center"
            }
          },
          {
            "type": "button",
            "class": "button",
            "style": {
              "title": "+"
            },
            "on-tap": {
              "updateState:": {
                "itemsCount": "${state.itemsCount + 1}"
              }
            }
          }
        ]
      },
      {
        "style": {
          "background-color": "#ddd",
          "padding-top": 12,
          "padding-bottom": 8,
          "justify-content": "center"
        },
        "children": [
          {
            "style": {
              "corner-radius": 5,
              "border-color": "${themeColor}",
              "border-width": 1,
              "spacing": 1,
              "background-color": "${themeColor}",
              "clip": true
            },
            "children": [
              {
                "vars": {
                  "selected": "${_index_ == state.selectedTab}"
                },
                "repeat": "${tabs.count}",
                "type": "button",
                "style": {
                  "height": 30,
                  "title": "${tabs[_index_].text}",
                  "title-color": "${selected ? 'white' : themeColor}",
                  "font-style": "${selected ? 'bold' : 'normal'}",
                  "padding": 10,
                  "background-color": "${selected ? themeColor : 'white'}"
                },
                "on-tap": {
                  "updateState:": {
                    "selectedTab": "${_index_}"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "${themeColor}"
        }
      },
      {
        "vars": {
          "attrs": "${tabs[state.selectedTab].attrs}"
        },
        "style": {
          "direction": "vertical",
          "spacing": 6,
          "background-color": "#eee",
          "clip": true
        },
        "children": [
          {
            "repeat": "${attrs.count}",
            "vars": {
              "attr": "${attrs[_index_]}",
              "values": "${map[attrs[_index_]]}"
            },
            "style": {
              "auto-animation": false,
              "align-items": "start"
            },
            "children": [
              {
                "type": "text",
                "style": {
                  "width": 100,
                  "adjusts-font-size": true,
                  "height": 30,
                  "flex-shrink": 0,
                  "text": "${attr}",
                  "padding": 6,
                  "font-style": "bold",
                  "alignment": "right"
                }
              },
              {
                "style": {
                  "wrap": "wrap",
                  "spacing": 1
                },
                "children": [
                  {
                    "repeat": "${values.count}",
                    "vars": {
                      "selected": "${_index_ == state.selected[attr]}"
                    },
                    "type": "button",
                    "style": {
                      "height": 30,
                      "title": "${values[_index_]}",
                      "title-color": "${selected ? 'white' : themeColor}",
                      "padding": 6,
                      "background-color": "${selected ? themeColor : nil}"
                    },
                    "on-tap": {
                      "updateState:": {
                        "selected": "${state.selected.set_value(attr, _index_)}"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "${themeColor}"
        }
      }
    ]
  }
}