Repository: incubator-weex-site Updated Branches: refs/heads/master 365f3f1f7 -> e8f38a296
* [doc] Update text. Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/c1ce9a48 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/c1ce9a48 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/c1ce9a48 Branch: refs/heads/master Commit: c1ce9a484b61d40f1deffe6fb419024f2a80cf78 Parents: 7136962 Author: york.sy <[email protected]> Authored: Thu Jan 18 22:34:39 2018 +0800 Committer: york.sy <[email protected]> Committed: Thu Jan 18 22:34:39 2018 +0800 ---------------------------------------------------------------------- source/cn/references/components/text.md | 132 ++++----------------------- source/references/components/text.md | 112 +++-------------------- 2 files changed, 30 insertions(+), 214 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/c1ce9a48/source/cn/references/components/text.md ---------------------------------------------------------------------- diff --git a/source/cn/references/components/text.md b/source/cn/references/components/text.md index 8e49780..f4762ca 100644 --- a/source/cn/references/components/text.md +++ b/source/cn/references/components/text.md @@ -6,132 +6,38 @@ order: 8.13 version: 2.1 --- -# <text> - `<text>` æ¯ Weex å ç½®çç»ä»¶ï¼ç¨æ¥å°ææ¬æç §æå®çæ ·å¼æ¸²æåºæ¥ã`<text>` åªè½å å«ææ¬å¼ï¼ä½ å¯ä»¥ä½¿ç¨Â `{% raw %}{{}}{% endraw %}` æ è®°æå ¥åéå¼ä½ä¸ºææ¬å 容ã -## åç»ä»¶ - -æ¤ç»ä»¶ä¸æ¯æåç»ä»¶ã +> **注æï¼** `<text>` éç´æ¥åææ¬å¤´å°¾ç©ºç½ä¼è¢«è¿æ»¤ï¼å¦æéè¦ä¿ç头尾空ç½ï¼ææ¶åªè½éè¿æ°æ®ç»å®åå¤´å°¾ç©ºæ ¼ã -## ç¹æ§ +> **注æï¼** `<text>`ä¸æ¯æåç»ä»¶ã -- `value {string}`: ç»ä»¶çå¼ï¼ä¸Â `<text>` æ ç¾ä¸çææ¬å 容ç¸åã +## å±æ§ +* `value {string}`: ç»ä»¶çå¼ï¼ä¸Â `<text>` æ ç¾ä¸çææ¬å 容ç¸åã ## æ ·å¼ - -- `lines {number}`: æå®ææ¬è¡æ°ãé»è®¤å¼æ¯ `0` 代表ä¸éå¶è¡æ°ã -- text styles: æ¥ç [ææ¬æ ·å¼](../text-style.html) - - - æ¯æ `color`Â æ ·å¼. - - æ¯æ `font-size`Â æ ·å¼. iOSé»è®¤å¼ï¼`32`ï¼Androidï¼ä¸å设å¤ä¸åï¼H5 é»è®¤å¼ï¼`32`. - - æ¯æ `font-style`Â æ ·å¼. - - æ¯æ `font-weight`Â æ ·å¼. - - æ¯æ `text-align`Â æ ·å¼. - - æ¯æ `text-decoration`Â æ ·å¼. - - æ¯æ `text-overflow`Â æ ·å¼. - - æ¯æ `line-height`æ ·å¼<sup class="wx-v">0.6.1+</sup> - - ä¸æ¯æ `flex-direction`, `justify-content`, `align-items` è¿äºä¸ºåèç¹è®¾ç½®çå±æ§ï¼å¹¶ä¸`<text>`没æåèç¹ã - -- éç¨æ ·å¼ï¼æ¯æææéç¨æ ·å¼ - - - ç模å - - `flexbox` å¸å± - - `position` - - `opacity` - - `background-color` - - æ¥ç [ç»ä»¶éç¨æ ·å¼](../common-style.html) +* æ¯æ **[éç¨æ ·å¼](../../wiki/common-styles.html)ã** +* `lines {number}`: æå®ææ¬è¡æ°ãé»è®¤å¼æ¯ `0`ï¼ ä»£è¡¨ä¸éå¶è¡æ°ã +* æ¯æ **[ææ¬æ ·å¼](../wiki/text-style.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/common-events.html)**. -- éç¨äºä»¶ - æ¯æææéç¨äºä»¶ï¼ - - - `click` - - `longpress` - - `appear` - - `disappear` - - æ¥ç [éç¨äºä»¶](../common-event.html) - -## 约æ - -1. `<text>` éç´æ¥åææ¬å¤´å°¾ç©ºç½ä¼è¢«è¿æ»¤ï¼å¦æéè¦ä¿ç头尾空ç½ï¼ææ¶åªè½éè¿æ°æ®ç»å®åå¤´å°¾ç©ºæ ¼ã - -## iconfont - +## èªå®ä¹åä½ `æ¯æçæ¬:v0.12.0` æ¯ættfåwoffåä½æ ¼å¼çèªå®ä¹åä½, å¯ä»¥éè¿è°ç¨ `dom` module éé¢ç [addRule](../modules/dom.html#addRule)æ¹æ³, æ建èªå®ä¹ç`font-family`使ç¨, addRule å»ºè®®å¨ `beforeCreate` æè æ´æ©æ¶è°ç¨ -```html -<template> - <div style='flex-direction:row;margin-top:50px'> - <text style='font-family:iconfont4;font-size:50;color:green'></text> - <text style='font-family:iconfont4;font-size:50;'></text> - <text style='font-family:iconfont4;font-size:60;color:blue'></text> - <text style='font-family:iconfont4;font-size:60;color:green'></text> - </div> -</template> -<script> - module.exports = { - beforeCreate: function() { - - var domModule = weex.requireModule('dom'); - //ç®åæ¯ættfãwoffæ件ï¼ä¸æ¯æsvgãeotç±»å,moreItem at http://www.iconfont.cn/ - - domModule.addRule('fontFace', { - 'fontFamily': "iconfont2", - 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" - }); - } -} -</script> -``` - -[try it](http://dotwe.org/vue/95b2c6716f37066d5f44c5c75c979394) - ## ç¤ºä¾ - -```html -<template> - <div class="wrapper"> - <div class="panel"> - <text class="text" lines="3">Weex æ¯ä¸å¥ç®åæç¨ç跨平å°å¼åæ¹æ¡ï¼è½ä»¥ Web çå¼åä½éªæ建é«æ§è½ãå¯æ©å±çåçåºç¨ãVue æ¯ä¸ä¸ªè½»é并ä¸åè½å¼ºå¤§çæ¸è¿å¼å端æ¡æ¶ã</text> - </div> - <div class="panel"> - <text class="text" lines="3">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. </text> - </div> - </div> -</template> - - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .panel { - width: 600px; - margin-left: 75px; - border-width: 2px; - border-style: solid; - border-color: #BBB; - padding-top: 15px; - padding-bottom: 15px; - padding-left: 15px; - padding-right: 15px; - margin-bottom: 30px; - } - .text { - lines: 3; - color: #666666; - font-size: 32px; - } -</style> -``` - -[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2) +* [`<text>`çåºæ¬ç¨æ³](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105) +* [èªå®ä¹åä½ç使ç¨æ¹æ³](http://dotwe.org/vue/1cac4b398df5bb65ed21e83deceead1c) http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/c1ce9a48/source/references/components/text.md ---------------------------------------------------------------------- diff --git a/source/references/components/text.md b/source/references/components/text.md index 468db44..ec41932 100644 --- a/source/references/components/text.md +++ b/source/references/components/text.md @@ -6,30 +6,20 @@ order: 8.12 version: 2.1 --- -# <text> - 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 %}`. -## Child Components - -This component supports no child components. +> **Note:** This component supports no child components. ## Attributes - * value(string): text value of this component. This is equal to the content of 'text'. -### example - -``` -var textComponent = this.$el("textid"); -this.text = textComponent.attr.value; -``` + var textComponent = this.$el("textid"); + this.text = textComponent.attr.value; ## Styles - +* Support [common styles for components](../wiki/common-style.html) * lines: specify the text lines. Default value is `0` for unlimited. -* text styles: check out [text styles](../text-style.html) - +* Support [text styles](../wiki/text-style.html) * support 'color' style. * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`. * support 'font-style' style. @@ -38,95 +28,15 @@ this.text = textComponent.attr.value; * support 'text-decoration' style. * support 'text-overflow' style. * support 'line-height'(available from v0.6.1) style. - * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes. - -### common styles -check out [common styles for components](../common-style.html) - -* support flexbox related styles. -* support box model related styles. -* support 'position' related styles. -* support 'opacity', 'background-color' etc. ## Events +Support [common events](../common-event.html) -### common events -check out [common events](../common-event.html) - -* support 'click' event. -* support 'appear' / 'disappear' event. - -## iconfont - +## Custom Typeface `support:v0.12.0` -support `ttf` and `woff` font format to custom your text, call [addRule](../modules/dom.html#addRule) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate` - -```html -<template> - <div style='flex-direction:row;margin-top:50px'> - <text style='font-family:iconfont4;font-size:50;color:green'></text> - <text style='font-family:iconfont4;font-size:50;'></text> - <text style='font-family:iconfont4;font-size:60;color:blue'></text> - <text style='font-family:iconfont4;font-size:60;color:green'></text> - </div> -</template> -<script> - module.exports = { - beforeCreate: function() { - - var domModule = weex.requireModule('dom'); - //support ttfãwoff fileï¼svgãeot can not be supported ,moreItem at http://www.iconfont.cn/ - - domModule.addRule('fontFace', { - 'fontFamily': "iconfont2", - 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" - }); - } -} -</script> -``` - -[try it](http://dotwe.org/vue/95b2c6716f37066d5f44c5c75c979394) - -## Example - -```html -<template> - <div class="wrapper"> - <div class="panel"> - <text class="text" lines="3">Weex æ¯ä¸å¥ç®åæç¨ç跨平å°å¼åæ¹æ¡ï¼è½ä»¥ Web çå¼åä½éªæ建é«æ§è½ãå¯æ©å±çåçåºç¨ãVue æ¯ä¸ä¸ªè½»é并ä¸åè½å¼ºå¤§çæ¸è¿å¼å端æ¡æ¶ã</text> - </div> - <div class="panel"> - <text class="text" lines="3">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. </text> - </div> - </div> -</template> - - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .panel { - width: 600px; - margin-left: 75px; - border-width: 2px; - border-style: solid; - border-color: #BBB; - padding-top: 15px; - padding-bottom: 15px; - padding-left: 15px; - padding-right: 15px; - margin-bottom: 30px; - } - .text { - lines: 3; - color: #666666; - font-size: 32px; - } -</style> -``` +support `ttf` and `woff` font format to custom your text, call [addRule](../modules/dom.html#addRule) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`. -[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2) +## Examples +* [Basic usage for `<text>`](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105). +* [Usage for custom typeface](http://dotwe.org/vue/1cac4b398df5bb65ed21e83deceead1c). \ No newline at end of file
