HarmonyOS API：基础组件

joytrian

发布于 2023-3-30 19:26

浏览

0收藏

版本：v3.1 Beta

textarea

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

多行文本输入的文本框。

权限列表

无

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
placeholder	string	-	否	多行文本框的提示文本内容。
maxlength	number	-	否	多行文本框可输入的最多字符数量。
headericon	string	-	否	在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。
extend	boolean	false	否	文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。
value⁵⁺	string	-	否	多行文本框的内容。
showcounter⁵⁺	boolean	false	否	文本框是否需要开启计数下标功能，需要配合maxlength一起使用。
menuoptions⁵⁺	Array<MenuOption>	-	否	设置文本选择弹框点击更多按钮之后显示的菜单项。
autofocus⁶⁺	boolean	false	否	是否自动获焦。
selectedstart⁶⁺	number	-1	否	开始选择文本时初始选择位置。
selectedend⁶⁺	number	-1	否	开始选择文本时结尾选择位置。
softkeyboardenabled⁶⁺	boolean	true	否	编辑时是否弹出系统软键盘。

表1 MenuOption⁵⁺

名称	类型	描述
icon	string	菜单选项中的图标路径。
content	string	菜单选项中的文本内容。

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
color	<color>	#e6000000	否	多行文本框的文本颜色。
font-size	<length>	16px	否	多行文本框的文本尺寸。
allow-scale	boolean	true	否	多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
placeholder-color	<color>	#99000000	否	多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。
font-weight	number \| string	normal	否	多行文本框的字体粗细，见text组件font-weight的样式属性。
font-family	string	sans-serif	否	多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。
caret-color⁶⁺	<color>	-	否	设置输入光标的颜色。

事件

除支持通用事件外，还支持如下事件：

名称	参数	描述
change	{ text: newText, lines: textLines, height: textHeight }	输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。从API Version 5开始，改变value属性值不会触发该回调。
translate⁵⁺	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。
share⁵⁺	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。
search⁵⁺	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。
optionselect⁵⁺	{ index:optionIndex, value: selectedText }	文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。
selectchange⁶⁺	{ start: number，end: number }	文本选择变化时触发事件。

方法

支持通用方法。

示例

<!-- xxx.hml -->
<textarea id="textarea" class="textarea" extend="true" maxlength="20"
  headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text"
  onchange="change">
</textarea>

/* xxx.css */
.textarea {
  placeholder-color: gray;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
change(e){
  promptAction.showToast({
    message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
    duration: 3000,
  });
}
}

HarmonyOS API：基础组件-鸿蒙开发者社区

toolbar-item

更新时间: 2023-02-17 09:19

说明

从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

工具栏toolbar子组件。用于展示工具栏上的一个操作选项。

子组件

无

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
value	string	-	是	该操作项文本内容。
icon	string	-	是	该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。

样式

仅支持如下样式：

名称	类型	默认值	必填	描述
color	<color>	#e6000000	否	文本颜色。
font-size	<length>	16px	否	文本大小。
allow-scale	boolean	true	否	文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
font-style	string	normal	否	文本字体样式，可选值为： - normal: 标准的字体样式； - italic: 斜体的字体样式。
font-weight	number\|string	normal	否	文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。
text-decoration	string	none	否	文本修饰，可选值为： - underline: 文本下划线修饰； - line-through: 穿过文本的修饰线； - none: 标准文本。
font-family	string	sans-serif	否	字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。
background	<linear-gradient>	-	否	仅支持设置渐变样式，与background-color、background-image不兼容。
background-color	<color>	-	否	设置背景颜色。
background-image	string	-	否	设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。
background-size	- string - <length> <length> - <percentage> <percentage>	auto	否	设置背景图片的大小。 - string可选值： - contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。 - cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。 - auto：保持原图的比例不变。 - length参数方式：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 - 百分比参数方式：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
background-repeat	string	repeat	否	针对重复背景图篇的样式进行设置，背景图篇默认在水平和垂直方向上重复。 - repeat：在水平轴和竖直轴上同时重复绘制图片。 - repeat-x：只在水平轴上重复绘制图片。 - repeat-y：只在竖直轴上重复绘制图片。 - no-repeat：不会重复绘制图片。
background-position	- string string - <length> <length> - <percentage> <percentage>	0px 0px	否	设置背景图片位置。 - 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。 - left：水平方向上最左侧。 - right：水平方向上最右侧。 - top：竖直方向上最顶部。 - bottom：竖直方向上最底部。 - center：水平方向或竖直方向上中间位置。 - length值参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。 - 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。 - 可以混合使用<percentage>和<length>。
opacity	number	1	否	元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
display	string	flex	否	确定一个元素所产生的框的类型，可选值为： - flex：弹性布局。 - none：不渲染此元素。
visibility	string	visible	否	是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为： - visible：元素正常显示。 - hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。 visibility和display样式都设置时，仅display生效。

事件

支持通用事件。

方法

不支持。

示例

<!-- xxx.hml -->
<toolbar style="position : fixed; bottom : 0px;">
    <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
    <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
</toolbar>

HarmonyOS API：基础组件-鸿蒙开发者社区