{
  "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"
    }
  },
  "layout": {
    "vars": {
      "short_text": "Some test text",
      "long_text": "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "very_long_text": "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda."
    },
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "alignment"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "文本水平对齐方式。默认为 <i>left</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "background-color": "#e5e5e5",
              "spacing": 2
            },
            "vars": {
              "items": [
                {
                  "text": "${short_text}",
                  "alignment": "left"
                },
                {
                  "text": "${short_text}",
                  "alignment": "center"
                },
                {
                  "text": "${short_text}",
                  "alignment": "right"
                },
                {
                  "text": "${very_long_text}",
                  "alignment": "justify"
                }
              ]
            },
            "children": [
              {
                "repeat": "${items.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${items[_index_].alignment}",
                      "width": 80,
                      "flex-shrink": 0,
                      "font-size": 15,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${items[_index_].text}",
                      "background-color": "white",
                      "lines": 0,
                      "padding": 8,
                      "alignment": "${items[_index_].alignment}"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "vertical-alignment"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "文本竖直对齐方式。默认为 <i>center</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": ["top", "center", "bottom"]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "style": {
                  "direction": "vertical",
                  "flex-grow": 1
                },
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "height": 30,
                      "flex-shrink": 0,
                      "font-size": 15,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "text": "${short_text}",
                      "background-color": "white",
                      "lines": 0,
                      "padding": 8,
                      "height": 100,
                      "alignment": "center",
                      "vertical-alignment": "${values[_index_]}"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "line-break-mode"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "换行方式。默认为 <i>word</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": ["word", "char"]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 80,
                      "flex-shrink": 0,
                      "font-size": 15,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "text": "${long_text}",
                      "background-color": "white",
                      "lines": 0,
                      "padding": 10,
                      "line-break-mode": "${values[_index_]}"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "truncation-mode"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "文本显示不下时的省略方式。默认为 <i>truncating-tail</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": ["truncating-head", "truncating-middle", "truncating-tail", "clip", "none"]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 140,
                      "flex-shrink": 0,
                      "font-size": 15,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "text": "${long_text}",
                      "background-color": "white",
                      "padding": 8,
                      "truncation-mode": "${values[_index_]}"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "font-style"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "字体样式，注意并不是所有字体都支持这些样式。默认为 <i>normal</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": ["ultra-light", "thin", "light", "normal", "medium", "bold", "heavy", "black", "italic", "bold-italic"]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 110,
                      "flex-shrink": 0,
                      "font-size": 15,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${short_text}",
                      "font-style": "${values[_index_]}",
                      "background-color": "white",
                      "padding": 6,
                      "alignment": "center"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "font-name"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "字体名称。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": ["American Typewriter", "Papyrus", "Marker Felt", "Zapfino"]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 160,
                      "flex-shrink": 0,
                      "font-size": 14,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${short_text}",
                      "font-name": "${values[_index_]}",
                      "background-color": "white",
                      "padding": 6,
                      "alignment": "center"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "lines"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "最大行数，超出后省略。默认为 <i>1</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": [0, 1, 2]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 80,
                      "flex-shrink": 0,
                      "font-size": 14,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${long_text}",
                      "lines": "${values[_index_]}",
                      "background-color": "white",
                      "padding": 6
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "line-spacing"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "行间距。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": [0, 5, 10, -5]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 80,
                      "flex-shrink": 0,
                      "font-size": 14,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${long_text}",
                      "lines": 0,
                      "line-spacing": "${values[_index_]}",
                      "background-color": "white",
                      "padding": 6
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "kern"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "字间距。需要注意文字的最右边也会有一个字距大小的空白，一般可以通过设置 <i>margin-right</i> 来修正。如：<p>\"kern\": 5,<br>\"margin-right\": -5</p>"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "values": [0, 1, 2, -1]
            },
            "children": [
              {
                "repeat": "${values.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${values[_index_]}",
                      "width": 80,
                      "flex-shrink": 0,
                      "font-size": 14,
                      "alignment": "center",
                      "background-color": "#f4f4f4"
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "text": "${short_text}",
                      "lines": 0,
                      "kern": "${values[_index_]}",
                      "background-color": "white",
                      "padding": 6
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "adjusts-font-size"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "文字显示不下时自动缩小字体。可以用 <b>mini-scale-factor</b> 设置最小缩小倍数，<b>baseline-adjustment</b> 设置缩小时的对齐方式。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "texts": ["1234", "1234567", "1234567890123"]
            },
            "children": [
              {
                "repeat": "${texts.count}",
                "type": "text",
                "style": {
                  "width": "33%",
                  "flex-grow": 1,
                  "text": "${texts[_index_]}",
                  "font-size": 40,
                  "adjusts-font-size": true,
                  "mini-scale-factor": 0.4,
                  "alignment": "center",
                  "background-color": "white",
                  "padding": 6
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "html-text"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "使用 html 表示的富文本。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "spacing": 2,
              "background-color": "#e5e5e5"
            },
            "vars": {
              "htmls": [
                "this is <font color='red'>red</font>",
                "<b>bold</b> <i>italic</i> <s>strikethrough</s> <u>underline</u>",
                "normal <big>big</big> <small>small</small>",
                "<h2>Lorem ipsum</h2>\n<br><font size='10'><i>${long_text}</i></font>",
                "&gt;_&lt;",
                "<img src='mist.bundle/icon'></img><br><font size='20' color='#E24810'><b>Mist</b></font>"
              ]
            },
            "children": [
              {
                "repeat": "${htmls.count}",
                "children": [
                  {
                    "type": "text",
                    "style": {
                      "text": "${htmls[_index_]}",
                      "width": "50%",
                      "lines": 0,
                      "flex-shrink": 0,
                      "font-size": 11,
                      "background-color": "#f4f4f4",
                      "padding": 6
                    }
                  },
                  {
                    "type": "text",
                    "style": {
                      "flex-grow": 1,
                      "html-text": "${htmls[_index_]}",
                      "lines": 0,
                      "background-color": "white",
                      "padding": 6
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "#888"
        }
      }
    ]
  }
}