This is an automated email from the ASF dual-hosted git repository. kyork pushed a commit to branch draft in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push: new e033d6c * Update text-style.md (#275) e033d6c is described below commit e033d6c2c934088d9a9bfe03dee6cc663513cd1d Author: YorkShen <shenyua...@gmail.com> AuthorDate: Wed Dec 26 21:59:02 2018 +0800 * Update text-style.md (#275) --- docs/docs/styles/text-styles.md | 193 +++++++++++-------------------------- docs/zh/docs/styles/text-styles.md | 184 +++++++++-------------------------- 2 files changed, 104 insertions(+), 273 deletions(-) diff --git a/docs/docs/styles/text-styles.md b/docs/docs/styles/text-styles.md index 11b47b6..ec2322d 100644 --- a/docs/docs/styles/text-styles.md +++ b/docs/docs/styles/text-styles.md @@ -1,137 +1,56 @@ -# 文本样式 - -文本类组件支持一些特殊的 CSS 属性设置文本的样式,如字体、字号、文本颜色等, 这类组件目前包括 `<text>`、 `<input>` 和 `<textarea>`。 - -## `color` - -设置文字颜色,值为色值或颜色关键字,支持 RGB(`rgb(255, 0, 0)`),RGBA(`rgba(255, 0, 0, 0.5)`),十六进制(`#ff0000`),精简写法的十六进制(`#f00`),色值关键字(`red`)。具体可参考 [CSS 颜色单位](./css-units.html#css-颜色单位)。 - -```html -<style scope> -.title { - color: rgba(0, 0, 0, 0.8); -} -.content { - color: #666; -} -</style> -``` - -## `lines` - -指定文本行数,值为整数。**仅在 `<text>` 组件中支持**。默认值是 `0` 代表不限制行数。 - -通常与 `text-overflow` 配合限制文本行数,超过则文本末尾显示省略号。 - -```html -<style scope> -.content { - lines: 3; - text-overflow: ellipsis; - color: #666; -} -</style> -``` - -## `text-overflow` - -设置内容超长时的省略样式。**仅在 `<text>` 组件中支持**。通常与 `lines` 配合限制文本行数,超过则文本末尾显示省略号。可选值为: - -- `clip`:截断,不做任何处理。 -- `ellipsis`:内容超长时在文本末尾显示省略号。 - -```html -<style scope> -.content { - lines: 3; - text-overflow: ellipsis; - color: #666; -} -</style> -``` - -## `font-size` - -设置文字大小,**仅支持 `px` 单位。**文字默认大小为 36px。 - -```html -<style scope> -.title { - font-size: 40px; -} -</style> -``` - -## `font-style` - -设置字体类别,可选值 `normal` | `italic`,默认为 `normal`。 - -```html -<style scope> -.title { - font-style: italic; -} -</style> -``` - -## `font-weight` - -设置字体粗细程度,可选值为 `normal` | `bold` | `100` | `200` | `300` | `400` | `500` | `600` | `700` | `800` | `900`,默认为 `normal`。 - -- `normal` 等同于 400, `bold` 等同于 700; -- iOS 支持以上可选值;Android 仅支持 400 和 700,其他值会设为 400 或 700; -- 暂不支持 `lighter`, `bolder` 等其他值。 - -```html -<style scope> -.title { - font-weight: bold; -} -</style> -``` - -## `text-decoration` - -设置文本装饰,可选值为: - -- `none`:无任何装饰,默认为 `none`。 -- `underline`:文本下划线。 -- `line-through`:文本删除线。 - -```html -<style scope> -.title { - text-decoration: underline; -} -</style> -``` - -## `text-align` - -设置文本对齐方式,可选值为: - -- `left`:左对齐,默认为 `none`。 -- `center`:水平居中对齐。 -- `right`:右对齐。 - -```html -<style scope> -.title { - text-align: center; -} -</style> -``` - -## `font-family` - -设置文本设置字体,该属性**不保证**在不同平台、不同设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。 - -```html -<style scope> -.title { - font-family: Arial; -} -</style> -``` - -该属性可配合 `dom.addRule()` 方法为 `<text>` 设置自定义字体,详情可查看 [`<text>` 组件](/docs/text.html#自定义字体)。 +# Text Style + +Text alike components share some common style rules. The text alike components currently includes [`text`](../components/text.html)、[`input`](../components/input.html) and [`richtext`](../components/richtext.html) + +## Reference +### color +`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 +`font-size`: <length> this property specifies the size of the font. + +### font-style +`font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`. + +### font-weight +This property indicate the weight of the text. + * values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` + * normal is equal to 400, bold equel to 700 + * default value: `normal` + * apply to: `<text>`, `<input>` + * ios support showing 9 kind of font-weight. + * android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700 + * 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 +`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`. + +::: warning +Only support for `<text>` and `<ricthext>` +::: + +### text-align +`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 +`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 [dom.addRule](../modules/dom.html) instead. + +### text-overflow +`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. + +::: warning +Only support for `<text>` and `<ricthext>` +::: + +### lines +`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. + +### line-height +`line-height`: <length> The line height of every line in the text. `line-height` is the space between top and bottom.![line-height](http://i.stack.imgur.com/LwZJF.png) There is no relationship between `line-height` and `font-size`, as `line-height` is restricted by top and bottom, `font-size` is interpreted by glyph. Usually but not always, `line-height` and `font-size` with the same value will cause the text clipped. diff --git a/docs/zh/docs/styles/text-styles.md b/docs/zh/docs/styles/text-styles.md index 11b47b6..25d1e1a 100644 --- a/docs/zh/docs/styles/text-styles.md +++ b/docs/zh/docs/styles/text-styles.md @@ -1,137 +1,49 @@ # 文本样式 - -文本类组件支持一些特殊的 CSS 属性设置文本的样式,如字体、字号、文本颜色等, 这类组件目前包括 `<text>`、 `<input>` 和 `<textarea>`。 - -## `color` - -设置文字颜色,值为色值或颜色关键字,支持 RGB(`rgb(255, 0, 0)`),RGBA(`rgba(255, 0, 0, 0.5)`),十六进制(`#ff0000`),精简写法的十六进制(`#f00`),色值关键字(`red`)。具体可参考 [CSS 颜色单位](./css-units.html#css-颜色单位)。 - -```html -<style scope> -.title { - color: rgba(0, 0, 0, 0.8); -} -.content { - color: #666; -} -</style> -``` - -## `lines` - -指定文本行数,值为整数。**仅在 `<text>` 组件中支持**。默认值是 `0` 代表不限制行数。 - -通常与 `text-overflow` 配合限制文本行数,超过则文本末尾显示省略号。 - -```html -<style scope> -.content { - lines: 3; - text-overflow: ellipsis; - color: #666; -} -</style> -``` - -## `text-overflow` - -设置内容超长时的省略样式。**仅在 `<text>` 组件中支持**。通常与 `lines` 配合限制文本行数,超过则文本末尾显示省略号。可选值为: - -- `clip`:截断,不做任何处理。 -- `ellipsis`:内容超长时在文本末尾显示省略号。 - -```html -<style scope> -.content { - lines: 3; - text-overflow: ellipsis; - color: #666; -} -</style> -``` - -## `font-size` - -设置文字大小,**仅支持 `px` 单位。**文字默认大小为 36px。 - -```html -<style scope> -.title { - font-size: 40px; -} -</style> -``` - -## `font-style` - -设置字体类别,可选值 `normal` | `italic`,默认为 `normal`。 - -```html -<style scope> -.title { - font-style: italic; -} -</style> -``` - -## `font-weight` - -设置字体粗细程度,可选值为 `normal` | `bold` | `100` | `200` | `300` | `400` | `500` | `600` | `700` | `800` | `900`,默认为 `normal`。 - -- `normal` 等同于 400, `bold` 等同于 700; -- iOS 支持以上可选值;Android 仅支持 400 和 700,其他值会设为 400 或 700; -- 暂不支持 `lighter`, `bolder` 等其他值。 - -```html -<style scope> -.title { - font-weight: bold; -} -</style> -``` - -## `text-decoration` - -设置文本装饰,可选值为: - -- `none`:无任何装饰,默认为 `none`。 -- `underline`:文本下划线。 -- `line-through`:文本删除线。 - -```html -<style scope> -.title { - text-decoration: underline; -} -</style> -``` - -## `text-align` - -设置文本对齐方式,可选值为: - -- `left`:左对齐,默认为 `none`。 -- `center`:水平居中对齐。 -- `right`:右对齐。 - -```html -<style scope> -.title { - text-align: center; -} -</style> -``` - -## `font-family` - -设置文本设置字体,该属性**不保证**在不同平台、不同设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。 - -```html -<style scope> -.title { - font-family: Arial; -} -</style> -``` - -该属性可配合 `dom.addRule()` 方法为 `<text>` 设置自定义字体,详情可查看 [`<text>` 组件](/docs/text.html#自定义字体)。 +文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](../components/text.html)、[`<input>`](../components/input.html)和[`<richtext>`](../components/richtext.html) + +## 属性 +### color +`color {color}`:文字颜色,支持如下字段: + * RGB( `rgb(255, 0, 0)` ) + * RGBA( `rgba(255, 0, 0, 0.5)` ) + * 十六进制( `#ff0000` );精简写法的十六进制( `#f00` ) + * 色值关键字(`red`) +### font-size +`font-size {number}`:文字大小。 + +### font-style +`font-style {string}`:字体类别。可选值 `normal` | `italic`,默认为 `normal`。 + +### font-weight +`font-weight {string}`:字体粗细程度 + * 可选值: `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 +`text-decoration {string}`:字体装饰,可选值 `none` | `underline` | `line-through`,默认值为 `none`。 + +::: warning +只支持 `<text>` 和 `<ricthext>` +::: + +### text-algin +`text-align {string}`:对齐方式。可选值 `left` | `center` | `right`,默认值为 `left`。 + +### font-family +`font-family {string}`:设置字体。这个设置 **不保证** 在不同平台,设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。如果需要加载自定义字体,请参考相关[dom.addRule](../modules/dom.html)。 + +### text-overflow +`text-overflow {string}`:设置内容超长时的省略样式。可选值 `clip` | `ellipsis` + +::: warning +只支持 `<text>` 和 `<ricthext>` +::: + +### lines +`lines {number}`: 正整数,指定最大文本行数,默认值为0,表示不限制最大行数。如果文本不够长,实际展示行数会小于指定行数。 + +### line-height +`line-height {length}`:正整数,每行文字高度。`line-height`是 top 至 bottom 的距离。![line-height](http://i.stack.imgur.com/LwZJF.png)`line-height`与`font-size`没有关系,因为`line-height`被 top 和 bottom 所限制,`font-size` 被 glyph 所解析。`line-height`和`font-size`相等一般会导致文字被截断。 \ No newline at end of file