
OpenHarmony应用开发-组件Stepper/StepperItem/Text/TextArea
版本:v3.2 Release
Stepper
步骤导航器组件,适用于引导用户按照步骤完成任务的导航场景。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
仅能包含子组件StepperItem。
接口
Stepper(value?: { index?: number })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
index | number | 否 | 设置步骤导航器当前显示StepperItem的索引值。 默认值:0 |
属性
无
事件
名称 | 描述 |
onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时,并且ItemState属性为Normal时,触发该回调 。 |
onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时,nextLabel被点击时触发该回调。 |
onChange(callback: (prevIndex?: number, index?: number) => void) | 点击当前StepperItem的prevLabel进行步骤切换时触发该回调;或点击当前StepperItem的nextLabel,当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时,触发该回调。 - prevIndex:切换前的步骤页索引值。 - index:切换后的步骤页(前一页或者下一页)索引值。 |
onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的nextLabel切换下一步骤时,当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时,触发该回调。 - index:当前步骤页索引值。 - pendingIndex:下一步骤页索引值。 |
onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。 - index:当前步骤页索引值。 - pendingIndex:上一步骤页索引值。 |
示例
StepperItem
用作Stepper组件的页面子组件。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
支持单个子组件。
接口
StepperItem()
属性
参数名 | 参数类型 | 参数描述 |
prevLabel | string | 设置左侧文本按钮内容,第一页没有左侧文本按钮,当步骤导航器大于一页时,除第一页外默认值都为“返回”。 |
nextLabel | string | 设置右侧文本按钮内容,最后一页默认值为“开始”,其余页默认值为“下一步”。 |
status | ItemState | 步骤导航器nextLabel的显示状态。 默认值:ItemState.Normal |
ItemState枚举说明
名称 | 值 | 描述 |
Normal | 0 | 正常状态,右侧文本按钮正常显示,可点击进入下一个StepperItem。 |
Disabled | 1 | 不可用状态,右侧文本按钮灰度显示,不可点击进入下一个StepperItem。 |
Waiting | 2 | 等待状态,右侧文本按钮不显示,显示等待进度条,不可点击进入下一个StepperItem。 |
Skip | 3 | 跳过状态,右侧文本按钮默认显示“跳过”,此时可在Stepper的onSkip回调中自定义相关逻辑。 |
示例
见Stepper。
Text
显示一段文本的组件。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含Span子组件。
接口
Text(content?: string | Resource)
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
content | string | Resource | 否 | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。 默认值:’ ’ |
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
textAlign | 设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start 说明: 文本段落宽度占满Text组件宽度;可通过align属性控制文本段落在垂直方向上的位置。 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
textOverflow | {overflow: TextOverflow} | 设置文本超长时的显示方式。 默认值:{overflow: TextOverflow.Clip} 说明: 文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。 需配合 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
maxLines | number | 设置文本的最大行数。 默认值:Infinity 说明: 默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
lineHeight | string | number | Resource | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
decoration | { type: TextDecorationType, color?: ResourceColor} | 设置文本装饰线样式及其颜色。 默认值:{ type: TextDecorationType.None, color:Color.Black } 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
baselineOffset | number | string | 设置文本基线的偏移量,默认值0。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置该值为百分比时,按默认值显示。 |
letterSpacing | number | string | 设置文本字符间距。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置该值为百分比时,按默认值显示。 |
minFontSize | number | string | Resource | 设置文本最小显示字号。 需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
maxFontSize | number | string | Resource | 设置文本最大显示字号。 需配合minFontSize以及maxline或布局大小限制使用,单独设置不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
textCase | 设置文本大小写。 默认值:TextCase.Normal 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
copyOption9+ | 组件支持设置文本是否可复制粘贴。 默认值:CopyOptions.None 该接口支持在ArkTS卡片中使用。 |
说明:
不支持Text内同时存在文本内容和Span子组件。如果同时存在,只显示Span内的内容。
事件
支持通用事件。
示例
示例1
textAlign,textOverflow,maxLines,lineHeight使用示例。
示例2
decoration,baselineOffset,letterSpacing,textCase使用示例:
TextArea
多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
placeholder | 否 | 设置无输入时的提示文本。输入内容后,提示文本不显示。 | |
text | 否 | 设置输入框当前的文本内容。 当组件设置stateStyles等刷新属性时,建议通过onChange事件将状态变量与文本实时绑定, 避免组件刷新时TextArea中的文本内容异常。 | |
controller8+ | 否 | 设置TextArea控制器。 |
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
placeholderColor | 设置placeholder文本颜色。 | |
placeholderFont | Font | 设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。 |
textAlign | 设置文本在输入框中的水平对齐式。 默认值:TextAlign.Start | |
caretColor | 设置输入框光标颜色。 | |
inputFilter8+ | { value: ResourceStr, error?: (value: string) => void } | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。 - value:设置正则表达式。 - error:正则匹配失败时,返回被过滤的内容。 |
copyOption9+ | 设置输入的文本是否可复制。 设置CopyOptions.None时,当前TextArea中的文字无法被复制或剪切,仅支持粘贴。 |
说明:
通用属性padding的默认值为:
事件
除支持通用事件外,还支持以下事件:
名称 | 功能描述 |
onChange(callback: (value: string) => void) | 输入内容发生变化时,触发该回调。 - value:当前输入的文本内容。 |
onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发该回调。 - value:复制的文本内容。 |
onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发该回调。 - value:剪切的文本内容。 |
onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发该回调。 - value:粘贴的文本内容。 |
TextAreaController8+
TextArea组件的控制器,目前可通过它设置TextArea组件的光标位置。
导入对象
caretPosition8+
caretPosition(value: number): void
设置输入光标的位置。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
示例
