diff --git a/docs/component/text.md b/docs/component/text.md index cd832ec668914a34267920a0bcc15846d540fab4..0af933e1a6f86d0e37729b893d235a134cf20dc2 100644 --- a/docs/component/text.md +++ b/docs/component/text.md @@ -1,9 +1,12 @@ -#### text -文本组件。 +# text组件 -用于包裹文本内容。 +文本组件。用于包裹文本内容。 -**属性说明** +在app-uvue和app-nvue中,文本只能写在text中,而不能写在view的text区域。 + +虽然app-uvue中写在view的text区域的文字,也会被编译器自动包裹一层text组件,看起来也可以使用。但这样会造成无法修改该text文字的样式,详见uvue的[样式不继承](../uni-app-x/css/readme.md#stylenoextends)章节 + +## 属性说明 |属性名 |类型 |默认值 |说明 |平台差异说明 | |:-|:- |:- |:- |:- | @@ -20,17 +23,25 @@ |emsp|中文字符空格大小| |nbsp|根据字体设置的空格大小| -**Tips** +## 子组件 + +text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、app-vue)和uvue中,可以并只能嵌套text组件。 + +在nvue中,text组件不能嵌套。 -- `` 组件内只支持嵌套 ``(app-nvue 暂不支持),不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。 +## Tips + +- 支持 `\n` 方式换行。 - 在app-nvue下,只有``才能包裹文本内容。无法在``组件包裹文本。 - decode 可以解析的有 ` ` `<` `>` `&` `'` ` ` ` `。 - 各个操作系统的空格标准并不一致。 - 除了文本节点以外的其他节点都无法长按选中。 -- 支持 `\n` 方式换行。 - 如果使用 `` 组件编译时会被转换为 ``。 +- nvue 样式 `word-wrap` 在 Android 平台暂不支持 + +## 示例 -**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text) +[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text) 以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。 @@ -59,13 +70,13 @@ export default { data() { return { texts: [ - 'HBuilder,500万开发者选择的IDE', + 'HBuilder,900万开发者选择的IDE', 'MUI,轻巧、漂亮的前端开源框架', 'wap2app,M站快速转换原生体验的App', '5+Runtime,为HTML5插上原生的翅膀', 'HBuilderX,轻巧、极速,极客编辑器', 'uni-app,终极跨平台方案', - 'HBuilder,500万开发者选择的IDE', + 'HBuilder,900万开发者选择的IDE', 'MUI,轻巧、漂亮的前端开源框架', 'wap2app,M站快速转换原生体验的App', '5+Runtime,为HTML5插上原生的翅膀', @@ -99,8 +110,3 @@ export default { ``` ::: - - -**注意事项** - -- nvue 样式 `word-wrap` 在 Android 平台暂不支持 diff --git a/docs/uni-app-x/css/readme.md b/docs/uni-app-x/css/readme.md index 862889cb439e8f7859468daddee0fdffcc731e76..4a1841b7d7ccc9d905a587e1ab7bd5fff974fb1f 100644 --- a/docs/uni-app-x/css/readme.md +++ b/docs/uni-app-x/css/readme.md @@ -1,13 +1,20 @@ # uvue css使用 -uni-app x 在 app平台实现了 web css的子集。开发所需的界面均可排布编写出来。 +uni-app x 在 app平台实现了 web css的子集。 -uni-app x 推荐使用flex布局。这是一种清晰易用、全平台支持的布局。不管web、Android、iOS、微信skyline、快应用,均支持flex布局。 +这个子集并不影响开发者开发出所需的界面,仅是写法上没有那么丰富。 + +App端与web常见的区别是: +1. 仅支持flex布局 +2. 选择器只能用class,不能用tag、#id、[attr]等选择器 +3. 不支持样式继承,即父元素样式不影响子元素 -App端仅支持flex布局。 +但以上仅是常见的区别,并非所有,需开发者继续阅读全文。 ## 页面布局 +uni-app x 推荐使用flex布局。这是一种清晰易用、全平台支持的布局。不管web、Android、iOS、微信skyline、快应用,均支持flex布局。 + 页面布局有2个注意事项,flex方向和页面级滚动。 ### flex方向 @@ -23,7 +30,7 @@ App端仅支持flex布局。 ``` -一般在app.uvue的style里编写全局样式,在页面里使用class引用更为方便。 +一般在`app.uvue`的style里编写全局样式,在页面里使用class引用更为方便。 ```html