Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
a7d123ae
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
a7d123ae
编写于
2月 24, 2022
作者:
O
openharmony_ci
提交者:
Gitee
2月 24, 2022
浏览文件
操作
浏览文件
下载
差异文件
!1560 fixbug:richText开发者文档
Merge pull request !1560 from Yao.inhome/yangbo_richText-0218
上级
361662f9
4e18fcc0
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
81 addition
and
0 deletion
+81
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
...on-dev/reference/arkui-ts/ts-basic-components-richtext.md
+81
-0
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
0 → 100644
浏览文件 @
a7d123ae
# RichText
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
富文本组件,解析并显示HTML格式文本。
## 权限列表
无
## 子组件
不包含子组件。
## 接口
RichText
\(
content:string
\)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 是 | - | 表示HTML格式的字符串。 |
## 事件
| 名称 | 描述 |
| -------- | -------- |
| onStart() => void | 加载网页时触发。 |
| onComplete() => void | 网页加载结束时触发。 |
## 支持标签
| 名称 | 描述 | 示例 |
| -------- | -------- | -------- |
|
\<
h1>--
\<
h6> | 被用来定义HTML,
\<
h1>定义重要等级最高的标题,
\<
h6>定义重要等级最低的标题。 |
\<
h1>这是一个标题
\<
/h1>
\<
h2>这是h2标题
\<
/h2> |
|
\<
p>
\<
/p> | 定义段落。 |
\<
p>这是一个段落
\<
/p> |
|
\<
br/> | 插入一个简单的换行符。 |
\<
p>这是一个段落
\<
br/>这是换行段落
\<
/p> |
|
\<
hr/> | 定义HTML页面中的主题变化(比如话题的转移),并显示为一条水平线。 |
\<
p>这个一个段落
\<
/p>
\<
hr/>
\<
p>这是一个段落
\<
/p> |
|
\<
div>
\<
/div> | 常用于组合块级元素,以便通过CSS来对这些元素进行格式化。 |
\<
div style='color:#0000FF'>
\<
h3>这是一个在div元素中的标题。
\<
/h3>
\<
/div> |
|
\<
i>
\<
/i> | 定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。 |
\<
p>
\<
i>这是一个斜体
\<
/i>
\<
/p> |
|
\<
u>
\<
/u> | 定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词,应尽量避免使用
\<
u>为文本加下划线,用户会把它混淆为一个超链接。 |
\<
p>这是带有下划线的段落
\<
/p> |
|
\<
style>
\<
/style> | 定义HTML文档的样式信息。 |
\<
style>h1{color:red;}p{color:blue;}
\<
/style> |
| style | 属性规定元素的行内样式,写在标签内部,在使用的时候需用引号来进行区分,并以; 间隔样式,style='width: 500px;height: 500px;border: 1px soild;margin: 0 auto;'。 |
\<
h1 style='color:blue;text-align:center'>这是一个标题
\<
/h1>
\<
p style='color:green'>这是一个段落。
\<
/p> |
|
\<
script>
\<
/script> | 用于定义客户端文本,比如JavaScript。 |
\<
script>document.write("Hello World!")
\<
/script> |
## 示例
```
@Entry
@Component
struct RichTextExample {
@State data: string = '<h1 style='text-align: center;'>h1标题</h1>
<h1 style='text-align: center;'><i>h1斜体</i></h1>
<h1 style='text-align: center;'><u>h1下划线</u></h1>
<h2 style='text-align: center;'>h2标题</h2>
<h3 style='text-align: center;'>h3标题</h3>
<p style='text-align: center;'>p常规</p><hr/>
<div style='width: 500px;height: 500px;border: 1px solid;margin: 0auto;'>
<p style='font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)'>字体大小35px,行高45px</p>
<p style='background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;'>
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
这是一段文字</p></div>'
build() {
Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }){
RichText(this.data)
.onStart(()=>{
console.info("RichText onStart")
})
.onComplete(()=>{
console.info("RichText onComplete")
})
}
}
}
```
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录