回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-29 20:11
浏览
0收藏
版本：v3.1 Beta
toggle
更新时间: 2023-02-17 09:19
说明
从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。
权限列表
无
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
名称 | 类型 | 默认值 | 必填 | 描述 |
value | string | - | 是 | 状态按钮的文本值。 |
checked | boolean | false | 否 | 状态按钮是否被选中。 |
样式
除支持通用样式外，还支持如下样式：
名称 | 类型 | 默认值 | 必填 | 描述 |
text-color | <color> | #E5000000 | 否 | 状态按钮的文本颜色。 |
font-size | <length> | 16px | 否 | 状态按钮的文本尺寸。 |
allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
font-style | string | normal | 否 | 状态按钮的字体样式。 |
font-weight | number | string | normal | 否 | 状态按钮的字体粗细。见text组件font-weight的样式属性。 |
font-family | <string> | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。 |
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
change | { checked：isChecked } | 组件选中状态发生变化时触发。 |
方法
支持通用方法。
示例
<!-- xxx.hml -->
<div style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin" for="{{toggles}}">{{$item}}</toggle>
</div>
<text class="margin">2. Single choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
</div>
</div>
/* xxx.css */
.margin {
margin: 7px;
}
// xxx.js
export default {
data: {
toggle_list: [
{
"id": "1001", "name": "Living room", "checked": true
},
{
"id": "1002", "name": "Bedroom", "checked": false
},
{
"id": "1003", "name": "Second bedroom", "checked": false
},
{
"id": "1004", "name": "Kitchen", "checked": false
},
{
"id": "1005", "name": "Study", "checked": false
},
{
"id": "1006", "name": "Garden", "checked": false
},
{
"id": "1007", "name": "Bathroom", "checked": false
},
{
"id": "1008", "name": "Balcony", "checked": false
},
],
toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
idx: ""
},
allclick(arg) {
this.idx = arg;
},
allchange(e) {
if (e.checked != true) {
return;
}
for (var i = 0; i < this.toggle_list.length; i++) {
if (this.toggle_list[i].id === this.idx) {
this.toggle_list[i].checked = true;
} else {
this.toggle_list[i].checked = false;
}
}
}
}
web
更新时间: 2023-02-17 09:19
展示网页内容的组件。
说明
该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
权限列表
访问在线网页时需添加网络权限：ohos.permission.INTERNET
约束
web组件不跟随转场动画。一个页面仅支持一个web组件。
子组件
不支持。
属性
名称 | 参数类型 | 默认值 | 必填 | 描述 |
src | string | - | 否 | 设置需要显示网页的地址，网址的域名必须为https协议且经过ICP备案。 |
id | string | - | 否 | 组件的唯一标识。 |
样式
不支持通用样式设置。
事件
仅支持如下事件：
名称 | 参数 | 描述 |
pagestart | {url: string} | 加载网页时触发。 |
pagefinish | {url: string} | 网页加载结束时触发。 |
error | {url: string, errorCode: number, description: string} | 加载网页出现错误时触发或打开网页出错时触发。 |
方法
仅支持如下方法：
名称 | 参数 | 描述 |
reload | - | 重新加载页面。 |
示例
<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column;">
<button onclick="reloadWeb">click to reload</button>
<web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
</div>
// xxx.js
export default {
reloadWeb() {
this.$element('web').reload()
},
pageStart: function(e) {
console.info('web pageStart: ' + e.url)
},
pageFinish: function(e) {
console.info('web pageFinish: ' + e.url)
},
pageError: function(e) {
console.info('web pageError url: ' + e.url)
console.info('web pageError errorCode: ' + e.errorCode)
console.info('web pageError description: ' + e.description)
}
}
xcomponent
更新时间: 2023-02-17 09:19
说明
该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于显示写入了EGL/OpenGLES或媒体数据的组件。
权限列表
无
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
名称 | 参数类型 | 必填 | 描述 |
id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
type | string | 是 | 用于指定xcomponent组件类型，可选值为： - surface：组件内容单独送显，直接合成到屏幕。 - component：组件内容与其他组件合成后统一送显。 |
libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
样式
支持通用样式。
事件
除支持通用事件外，还支持如下事件：
名称 | 功能描述 |
onLoad(context?: object) => void | 插件加载完成时回调事件。 context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 |
onDestroy() => void | 插件卸载完成时回调事件。 |
方法
仅支持通用方法
赞
收藏
回复
相关推荐
