
HarmonyOS Developer 常见组件开发指导
text开发指导
text是文本组件,用于呈现一段文本信息。具体用法请参考text API。
创建text组件
在pages/index目录下的hml文件中创建一个text组件。
设置text组件样式和属性
- 添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
- 添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考 text自有样式。
- 隐藏文本内容
当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。
说明
- text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
- max-lines属性设置文本最多可以展示的行数。
- 设置文本折行
设置word-break属性对文本内容做断行处理,word-break枚举值请参考text自有样式。
- text组件支持Span子组件
说明
- 当使用Span子组件组成文本段落时,如果Span属性样式异常(例如:font-weight设置为1000),将导致文本段落显示异常。
- 在使用Span子组件时,注意text组件内不能存在文本内容,如果存在文本内容也只会显示子组件Span里的内容。
场景示例
text组件通过数据绑定展示文本内容,Span组件通过设置show属性来实现文本内容的隐藏和显示。
input开发指导
input是交互式组件,用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考input API。
创建input组件
在pages/index目录下的hml文件中创建一个input组件。
设置input类型
通过设置type属性来定义input类型,如将input设置为button、date等。
说明
仅当input类型为checkbox和radio时,当前组件是否选中的属性checked才生效,默认值为false。
事件绑定
向input组件添加search和translate事件。
设置输入提示
通过对input组件添加showError方法来提示输入的错误原因。
说明
该方法在input类型为text、email、date、time、number和password时生效。
场景示例
根据场景选择不同类型的input输入框,完成信息录入。
