amis2/examples/components/EChartsEditor/option-parts/option.title.json

794 lines
42 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"id": {
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
},
"show": {
"desc": "\n\n<p>是否显示标题组件。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"text": {
"desc": "\n\n<p>主标题文本,支持使用 <code class=\"codespan\">\\n</code> 换行。</p>\n",
"uiControl": {
"type": "text"
}
},
"link": {
"desc": "<p>主标题文本超链接。</p>\n"
},
"target": {
"desc": "<p>指定窗口打开主标题超链接。</p>\n<p><strong>可选:</strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n"
},
"textStyle.color": {
"desc": "\n\n<p>主标题文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "'#333'"
}
},
"textStyle.fontStyle": {
"desc": "\n\n<p>主标题文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"textStyle.fontWeight": {
"desc": "\n\n<p>主标题文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"textStyle.fontFamily": {
"desc": "\n\n<p>主标题文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"textStyle.fontSize": {
"desc": "\n\n<p>主标题文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "18",
"min": "1",
"step": "1"
}
},
"textStyle.lineHeight": {
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"textStyle.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"textStyle.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"textStyle.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"textStyle.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"textStyle.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"textStyle.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"textStyle.rich": {
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"textStyle.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"textStyle.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"textStyle.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"textStyle.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"textStyle.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"textStyle.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"textStyle.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"textStyle.rich.<style_name>.lineHeight": {
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"textStyle.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"textStyle.rich.<style_name>.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"textStyle.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.width": {
"desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"textStyle.rich.<style_name>.height": {
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"textStyle.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"textStyle.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtext": {
"desc": "\n\n<p>副标题文本,支持使用 <code class=\"codespan\">\\n</code> 换行。</p>\n",
"uiControl": {
"type": "text"
}
},
"sublink": {
"desc": "<p>副标题文本超链接。</p>\n"
},
"subtarget": {
"desc": "<p>指定窗口打开副标题超链接,可选:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n"
},
"subtextStyle.color": {
"desc": "\n\n<p>副标题文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "'#aaa'"
}
},
"subtextStyle.fontStyle": {
"desc": "\n\n<p>副标题文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"subtextStyle.fontWeight": {
"desc": "\n\n<p>副标题文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"subtextStyle.fontFamily": {
"desc": "\n\n<p>副标题文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"subtextStyle.fontSize": {
"desc": "\n\n<p>副标题文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"subtextStyle.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"subtextStyle.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"subtextStyle.lineHeight": {
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"subtextStyle.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"subtextStyle.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"subtextStyle.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"subtextStyle.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"subtextStyle.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtextStyle.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtextStyle.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"subtextStyle.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"subtextStyle.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"subtextStyle.rich": {
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"subtextStyle.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"subtextStyle.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"subtextStyle.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"subtextStyle.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"subtextStyle.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"subtextStyle.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"subtextStyle.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"subtextStyle.rich.<style_name>.lineHeight": {
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"subtextStyle.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"subtextStyle.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"subtextStyle.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"subtextStyle.rich.<style_name>.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"subtextStyle.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"subtextStyle.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.width": {
"desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"subtextStyle.rich.<style_name>.height": {
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"subtextStyle.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"subtextStyle.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"subtextStyle.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"subtextStyle.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textAlign": {
"desc": "\n\n<p>整体(包括 text 和 subtext的水平对齐。</p>\n<p>可选值:<code class=\"codespan\">&#39;auto&#39;</code>、<code class=\"codespan\">&#39;left&#39;</code>、<code class=\"codespan\">&#39;right&#39;</code>、<code class=\"codespan\">&#39;center&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"options": "auto,left,center,right",
"default": "auto"
}
},
"textVerticalAlign": {
"desc": "\n\n<p>整体(包括 text 和 subtext的垂直对齐。</p>\n<p>可选值:<code class=\"codespan\">&#39;auto&#39;</code>、<code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;bottom&#39;</code>、<code class=\"codespan\">&#39;middle&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"options": "auto,top,middle,bottom",
"default": "auto"
}
},
"triggerEvent": {
"desc": "<p>是否触发事件。</p>\n"
},
"padding": {
"desc": "\n\n<p>标题内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。</p>\n<p>使用示例:</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"itemGap": {
"desc": "\n\n<p>主副标题之间的间距。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "10",
"step": "1"
}
},
"zlevel": {
"desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层,不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
},
"z": {
"desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n"
},
"left": {
"desc": "\n\n<p>title 组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"top": {
"desc": "\n\n<p>title 组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"right": {
"desc": "\n\n<p>title 组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"bottom": {
"desc": "\n\n<p>title 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"backgroundColor": {
"desc": "\n\n<p>标题背景色,默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code> ,如果想要加上 alpha 通道,可以使用 RGBA比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code></p>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"borderColor": {
"desc": "\n\n<p>标题的边框颜色。支持的颜色格式同 backgroundColor。</p>\n",
"uiControl": {
"type": "color",
"default": "#ccc"
}
},
"borderWidth": {
"desc": "\n\n<p>标题的边框线宽。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"min": "0",
"step": "0.5"
}
},
"borderRadius": {
"desc": "\n\n<p>圆角半径单位px支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)\n</code></pre>",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT,RB,LB"
}
},
"shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code> 以及值不为 <code class=\"codespan\">tranparent</code> 的背景色 <code class=\"codespan\">backgroundColor</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
}
}