YorkShen closed pull request #237: * [Doc] Update doc for text.
URL: https://github.com/apache/incubator-weex-site/pull/237
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/source/cn/references/components/text.md
b/source/cn/references/components/text.md
index 491a251ce..abe3b9c3c 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 3d251f425..549dfa8a9 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).
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
