This is an automated email from the ASF dual-hosted git repository. kyork pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push: new 1de7c38 * [Doc] Update doc for text. (#237) 1de7c38 is described below commit 1de7c38c125371483a15a672605eae07a7c9b7cc Author: YorkShen <shenyua...@gmail.com> AuthorDate: Fri Dec 14 17:22:16 2018 +0800 * [Doc] Update doc for text. (#237) --- source/cn/references/components/text.md | 54 +++++++++++++++++++++----------- source/references/components/text.md | 55 +++++++++++++++++++++------------ 2 files changed, 72 insertions(+), 37 deletions(-) diff --git a/source/cn/references/components/text.md b/source/cn/references/components/text.md index 491a251..abe3b9c 100644 --- a/source/cn/references/components/text.md +++ b/source/cn/references/components/text.md @@ -6,36 +6,54 @@ order: 8.23 version: 2.1 --- -`<text>` 是 Weex 内置的组件,用来将文本按照指定的样式渲染出来。`<text>` 只能包含文本值,你可以使用 `{% raw %}{{}}{% endraw %}` 标记插入变量值作为文本内容。 +`<text>` 是 Weex 内置的组件,用来将文本按照指定的样式渲染出来. > **注意:** `<text>` 里直接写文本头尾空白会被过滤,如果需要保留头尾空白,暂时只能通过数据绑定写头尾空格。 > **注意:** `<text>`不支持子组件。 -## 属性 -* `value {string}`: 组件的值,与 `<text>` 标签中的文本内容相同。 - ## 样式 * 支持 **[通用样式](../../wiki/common-styles.html)。** -* `lines {number}`: 指定文本行数。默认值是 `0`, 代表不限制行数。 -* 支持 **[文本样式](/cn/wiki/text-styles.html)。** - * 支持 `color` 样式. - * 支持 `font-size` 样式,默认值为`32`. - * 支持 `font-style` 样式. - * 支持 `font-weight` 样式. - * 支持 `text-align` 样式. - * 支持 `text-decoration` 样式. - * 支持 `text-overflow` 样式. - * 支持 `line-height`样式<sup class="wx-v">0.6.1+</sup> +* 支持 **[文本样式](../../wiki/text-styles.html)。** + +## 属性 +除了动态文本,text组件不支持其他属性 +### dynamic text +下列代码片段可以实现文字内容和JS变量的绑定。 + + <template> + <div> + <text >{{content}}</text> + </div> + </template> + <script> + module.exports = { + data: function(){ + return { + content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. " + } + } + } + </script> ## 事件 -支持 **[通用事件](../../wiki/common-events.html)**. +支持 **[通用事件](../../wiki/common-events.html)**。 -## 自定义字体 +## 其他 +### 文字高度 +文字高度的计算规则比较复杂,但大致上遵循以下优先级进行计算,排在前面的优先级最高。 +1. 文字节点的`max-height`/`min-height`样式。 +2. 文字节点的`flex`属性且文字的父节点上有`flex-direction:column`样式。 +3. 文字节点的`height`样式。 +4. 文字节点的`align-items:stretch`如果文字父节点有 `flex-direction:row`样式。 +5. 文字内容和文字本身的[样式](/wiki/text-styles.html)。 +6. 其他相关CSS属性。 + + +### 自定义字体 `支持版本:v0.12.0` 支持ttf和woff字体格式的自定义字体, 可以通过调用 `dom` module 里面的 [addRule](../modules/custom_font.html)方法, 构建自定义的`font-family`使用, addRule 建议在 `beforeCreate` 或者更早时调用 ## 示例 -* [`<text>`的基本用法](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105) - +* [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0) \ No newline at end of file diff --git a/source/references/components/text.md b/source/references/components/text.md index 3d251f4..549dfa8 100644 --- a/source/references/components/text.md +++ b/source/references/components/text.md @@ -6,37 +6,54 @@ order: 8.23 version: 2.1 --- -The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`. +The weex builtin component 'text' is used to render text with specified style rule. > **Note:** This component supports no child components. -## Attributes -* value(string): text value of this component. This is equal to the content of 'text'. - - var textComponent = this.$el("textid"); - this.text = textComponent.attr.value; +> **Note:** The heading and trailing white space will be ignored. If this is not what you need, you can set text using the data-binding method above. ## Styles * Support [common styles for components](/wiki/common-styles.html) -* lines: specify the text lines. Default value is `0` for unlimited. -* Support [text styles](/wiki/text-styles.html) - * support 'color' style. - * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`. - * support 'font-style' style. - * support 'font-weight' style. - * support 'text-align' style. - * support 'text-decoration' style. - * support 'text-overflow' style. - * support 'line-height'(available from v0.6.1) style. +* Support [text style](/wiki/text-styles.html) + +## Attributes +Except for dynamic text, there is no other supported attributes for text. +### dynamic text +One can use the following code snippet to bind the content of text to a variable + + <template> + <div> + <text >{{content}}</text> + </div> + </template> + <script> + module.exports = { + data: function(){ + return { + content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. " + } + } + } + </script> ## Events Support [common events](/wiki/common-events.html) -## Custom Typeface +## Other +### The magic of text height +The rules for computed height of text component is complicated, basically but not always, text in weex obey the following rules in order: +1. The CSS style of `max-height`/`min-height` on your text +2. The CSS style of `flex` on your text if there is a `flex-direction:column` on the parent component of you text. +3. The CSS style of `height` on your text +4. The CSS style of `align-items:stretch` on your text if there is a `flex-direction:row` on the parent you text. +5. The content of your text and [text style](/wiki/text-styles.html) on your text. +6. Other related CSS style not mentioned here. + +### Custom Typeface `support:v0.12.0` -support `ttf` and `woff` font format to custom your text, call [addRule](../modules/custom_font.html) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`. +support loading custom font of `ttf` and `woff` format. Call [addRule](../modules/custom_font.html) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`. ## Examples -* [Basic usage for `<text>`](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105). +* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).