You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ky...@apache.org on 2018/12/14 09:22:20 UTC
[incubator-weex-site] branch master updated: * [Doc] Update doc for
text. (#237)
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 <sh...@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).