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 21ffe00 * [Android] Update doc for text-style. (#228) 21ffe00 is described below commit 21ffe009ac76bcfa320fed84c2b176bdb3bd2df7 Author: YorkShen <shenyua...@gmail.com> AuthorDate: Tue Dec 11 17:24:00 2018 +0800 * [Android] Update doc for text-style. (#228) --- source/cn/wiki/text-styles.md | 40 ++++++++++++++++------------------------ source/wiki/text-styles.md | 38 ++++++++++++++++---------------------- 2 files changed, 32 insertions(+), 46 deletions(-) diff --git a/source/cn/wiki/text-styles.md b/source/cn/wiki/text-styles.md index be91530..89a5d84 100644 --- a/source/cn/wiki/text-styles.md +++ b/source/cn/wiki/text-styles.md @@ -10,38 +10,30 @@ version: 2.1 <span class="weex-version">v0.5+</span> -文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](/cn/references/components/text.html) 和 [`<input>`](/cn/references/components/input.html)。 +文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](../references/components/text.html)、[`<input>`](../references/components/input.html)和[`<richtext>`](../references/components/richtext.html) ## 属性 -- `color {color}`:文字颜色。 - - 可选值为色值,支持 RGB( `rgb(255, 0, 0)` );RGBA( `rgba(255, 0, 0, 0.5)` );十六进制( `#ff0000` );精简写法的十六进制( `#f00` );色值关键字(`red`)。 - -- `lines {number}`: 指定文本行数。仅在 `<text>` 组件中支持。默认值是 `0` 代表不限制行数。 - -- `font-size {number}`:文字大小。 - -- `font-style {string}`:字体类别。可选值 `normal` | `italic`,默认为 `normal`。 - -- `font-weight {string}`<span class="api-version">v0.9+</span>:字体粗细程度 - +- `color {color}`:文字颜色,支持如下字段: + * RGB( `rgb(255, 0, 0)` ) + * RGBA( `rgba(255, 0, 0, 0.5)` ) + * 十六进制( `#ff0000` );精简写法的十六进制( `#f00` ) + * 色值关键字(`red`) +* `font-size {number}`:文字大小。 +* `font-style {string}`:字体类别。可选值 `normal` | `italic`,默认为 `normal`。 +* `font-weight {string}`<span class="api-version">v0.9+</span>:字体粗细程度 * 可选值: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` * normal 等同于 400, bold 等同于 700; * 默认值: `normal`; * iOS 支持 9 种 font-weight值;Android 仅支持 400 和 700, 其他值会设为 400 或 700 * 类似 `lighter`, `bolder` 这样的值暂时不支持 - -- `text-decoration {string}`:字体装饰,可选值 `none` | `underline` | `line-through`,默认值为 `none`。 - -- `text-align {string}`:对齐方式。可选值 `left` | `center` | `right`,默认值为 `left`。目前暂不支持 `justify`, `justify-all`。 - -- `font-family {string}`:设置字体。 - - 这个设置 **不保证** 在不同平台,设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。 - -- `text-overflow {string}`:设置内容超长时的省略样式。可选值 `clip` | `ellipsis` +* `text-decoration {string}`:字体装饰,可选值 `none` | `underline` | `line-through`,默认值为 `none`。 + >> 只有 `<text>`和`<richtext>`组件支持。 +* `text-align {string}`:对齐方式。可选值 `left` | `center` | `right`,默认值为 `left`。目前暂不支持 `justify`, `justify-all`。 +* `font-family {string}`:设置字体。这个设置 **不保证** 在不同平台,设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。如果需要加载自定义字体,请参考相关[文档](../references/modules/custom_font.html)。 +* `text-overflow {string}`:设置内容超长时的省略样式。可选值 `clip` | `ellipsis` + >> 只有 `<text>`和`<richtext>`组件支持。 +* `lines {number}`: 正整数,指定最大文本行数,默认值为0,表示不限制最大行数。如果文本不够长,实际展示行数会小于指定行数。 ## 其它参考 - - [颜色关键字列表](./color-names.html)。 diff --git a/source/wiki/text-styles.md b/source/wiki/text-styles.md index f7f0cd9..1cb5c8d 100644 --- a/source/wiki/text-styles.md +++ b/source/wiki/text-styles.md @@ -8,11 +8,19 @@ version: 2.1 <!-- toc --> -Text alike components share some common style rules. The text alike components currently includes [`text`](/references/components/text.html) and [`input`](/references/components/input.html). +Text alike components share some common style rules. The text alike components currently includes [`text`](../references/components/text.html)、[`input`](../references/components/input.html) and [`richtext`](../references/components/richtext.html) ## Properties - `color`: <colors> this property set the foreground color of an component's text content. + * The property `color` support multiple formats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example: + ```css + .my-class { color: red; } + .my-class { color: #f00; } + .my-class { color: #ff0000; } + .my-class { color: rgb(255, 0, 0); } + .my-class { color: rgba(255, 0, 0, 0.5); } + ``` - `font-size`: <length> this property specifies the size of the font. - `font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`. - `font-weight`<span class="api-version">v0.9+</span>: @@ -25,27 +33,13 @@ Text alike components share some common style rules. The text alike components c * Some standard values like `lighter`, `bolder`, number unit are not supported. * The effect not apply to all elements, just `<text>` and `<input>`. In another way, it's not inherited. - `text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`. + >> Only support for `<text>` and `<ricthext>` - `text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`. -- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. -- `text-overflow`:<string> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis. +- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref [custom-font](../references/modules/custom_font.html) instead. +- `text-overflow`:<enum> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis. + >> Only support for `<text>` and `<ricthext>` +- `lines`: <number> positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value. -The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color. - -Example: - -```css -.my-class { color: red; } -.my-class { color: #f00; } -.my-class { color: #ff0000; } -.my-class { color: rgb(255, 0, 0); } -.my-class { color: rgba(255, 0, 0, 0.5); } -``` - -## Type of Style Value - -- length: number followed by length unit `px`, `px` can be omitted. -- colors: support multiple formats of values, including rgb (`rgb(255, 0, 0)`), rgba (`rgba(255, 0, 0, 0.5)`), hexadecimal (`#ff0000`), short hexadecimal (`#f00`), named color (`red`). -- enumerated values: a limited number of string values. - -**Note:** [The list of color keywords.](./color-names.html) +## Note +* [The list of color keywords.](./color-names.html)