/harmonyos/
鸿蒙OS JS API参考 组件tab-content
  1. 鸿蒙OS 入门
    1. 鸿蒙OS 概述
      1. 鸿蒙OS 系统定义
      2. 鸿蒙OS 技术特性
      3. 鸿蒙OS 技术架构
      4. 鸿蒙OS 系统安全
    2. 鸿蒙OS 开发基础知识
      1. 鸿蒙OS 应用基础知识
      2. 鸿蒙OS 应用配置文件
      3. 鸿蒙OS 资源文件
      4. 鸿蒙OS 应用数据管理
      5. 鸿蒙OS 应用权限管理
      6. 鸿蒙OS 应用隐私保护
    3. 鸿蒙OS 快速入门
      1. 鸿蒙OS 快速入门简介
      2. 鸿蒙OS 编写第一个页面
      3. 鸿蒙OS 创建另一个页面
      4. 鸿蒙OS 实现页面跳转
  2. 鸿蒙OS 开发
    1. 鸿蒙OS Ability
      1. 鸿蒙OS Ability
      2. 鸿蒙OS 分布式任务调度
      3. 鸿蒙OS 公共事件与通知
      4. 鸿蒙OS 剪贴板
    2. 鸿蒙OS 线程
      1. 鸿蒙OS 线程管理
      2. 鸿蒙OS 线程间通信
    3. 鸿蒙OS UI
      1. 鸿蒙OS Java UI框架
      2. 鸿蒙OS JS UI框架
      3. 鸿蒙OS 多模输入
    4. 鸿蒙OS 媒体
      1. 鸿蒙OS 视频
      2. 鸿蒙OS 图像
      3. 鸿蒙OS 相机
      4. 鸿蒙OS 音频
      5. 鸿蒙OS 媒体会话管理
      6. 鸿蒙OS 媒体数据管理
    5. 鸿蒙OS 安全
      1. 鸿蒙OS 权限
      2. 鸿蒙OS 生物特征识别
    6. 鸿蒙OS AI
      1. 鸿蒙OS 码生成
    7. 鸿蒙OS 网络与连接
      1. 鸿蒙OS NFC
      2. 鸿蒙OS 蓝牙
      3. 鸿蒙OS WLAN
      4. 鸿蒙OS 网络管理
      5. 鸿蒙OS 电话服务
    8. 鸿蒙OS 设备管理
      1. 鸿蒙OS 传感器
      2. 鸿蒙OS 控制类小器件
      3. 鸿蒙OS 位置
      4. 鸿蒙OS 设置
    9. 鸿蒙OS 数据管理
      1. 鸿蒙OS 关系型数据库
      2. 鸿蒙OS 对象关系映射数据库
      3. 鸿蒙OS 轻量级偏好数据库
      4. 鸿蒙OS 分布式数据服务
      5. 鸿蒙OS 分布式文件服务
      6. 鸿蒙OS 融合搜索
      7. 鸿蒙OS 数据存储管理
  3. 鸿蒙OS 设备
    1. 鸿蒙OS 车机
      1. 鸿蒙OS 车机概述
      2. 鸿蒙OS 驾驶安全管控
      3. 鸿蒙OS 车辆控制
      4. 鸿蒙OS 打造车载系统应用
    2. 鸿蒙OS 智能穿戴
      1. 鸿蒙OS 智能穿戴概述
      2. 鸿蒙OS 打造智能穿戴应用
      3. 鸿蒙OS 添加智能穿戴模块
      4. 鸿蒙OS 创建智能穿戴应用通知
      5. 鸿蒙OS 降低应用功耗
    3. 鸿蒙OS 智慧屏
      1. 鸿蒙OS 智慧屏概述
  4. 鸿蒙OS 工具
    1. 鸿蒙OS HUAWEI DevEco Studio使用指南
      1. 鸿蒙OS 工具简介
      2. 鸿蒙OS 快速开始
      3. 鸿蒙OS 工程管理
      4. 鸿蒙OS 代码编辑
      5. 鸿蒙OS 编译构建
      6. 鸿蒙OS 应用运行
      7. 鸿蒙OS 应用调试
      8. 鸿蒙OS 应用发布
  5. 鸿蒙OS 术语
    1. 鸿蒙OS 术语
  6. 鸿蒙OS 常见问题
    1. 鸿蒙OS 环境安装
    2. 鸿蒙OS 模拟器运行
    3. 鸿蒙OS 功能开发
    4. 鸿蒙OS 调测验证
  7. 鸿蒙OS Java API参考
    1. 鸿蒙OS 方舟注释
      1. 鸿蒙OS 方舟注释概述
      2. 鸿蒙OS 注解
    2. 鸿蒙OS 方舟系统
      1. 鸿蒙OS 方舟系统概述
      2. 鸿蒙OS 方舟系统 类
    3. 鸿蒙OS ohos.aafwk.ability
      1. 鸿蒙OS ohos.aafwk.ability概述
      2. 鸿蒙OS ohos.aafwk.ability interface
      3. 鸿蒙OS ohos.aafwk.ability class
      4. 鸿蒙OS ohos.aafwk.ability enum
      5. 鸿蒙OS ohos.aafwk.ability exception
    4. 鸿蒙OS ohos.aafwk.ability.delegation
      1. 鸿蒙OS delegation概述
      2. 鸿蒙OS delegation接口
      3. 鸿蒙OS delegation类
    5. 鸿蒙OS ohos.Utils.net
      1. 鸿蒙OS ohos.Utils.net 概述
      2. 鸿蒙OS ohos.Utils.net class
    6. 鸿蒙OS ohos.aafwk.abilityjet.activedata
      1. 鸿蒙OS ohos.aafwk.abilityjet.activedata概述
      2. 鸿蒙OS ohos.aafwk.abilityjet.activedata class
    7. 鸿蒙OS ohos.aafwk.content
      1. 鸿蒙OS ohos.aafwk.content概述
      2. 鸿蒙OS ohos.aafwk.content interface
      3. 鸿蒙OS ohos.aafwk.content class
    8. 鸿蒙OS ohos.app
      1. 鸿蒙OS ohos.app interface
      2. 鸿蒙OS ohos.app class
    9. 鸿蒙OS ohos.bundle
      1. 鸿蒙OS ohos.bundle interface
      2. 鸿蒙OS ohos.bundle class
      3. 鸿蒙OS ohos.bundle enum
    10. 鸿蒙OS ohos.rpc
      1. 鸿蒙OS ohos.rpc interface
      2. 鸿蒙OS ohos.rpc class
    11. 鸿蒙OS java.lang
      1. 鸿蒙OS java.lang interface
      2. 鸿蒙OS java.lang class
      3. 鸿蒙OS java.lang enum
      4. 鸿蒙OS java.lang exception
      5. 鸿蒙OS java.lang exception
      6. 鸿蒙OS java.lang error
      7. 鸿蒙OS java.lang error
      8. 鸿蒙OS java.lang annotation
    12. 鸿蒙OS java.net
      1. 鸿蒙OS java.net Interface
      2. 鸿蒙OS java.net Class
    13. 鸿蒙OS java.Util
      1. 鸿蒙OS java.Util interface
      2. 鸿蒙OS java.Util class
    14. 鸿蒙OS ohos.data.rdb
      1. 鸿蒙OS ohos.data.rdb interface
      2. 鸿蒙OS ohos.data.rdb class
    15. 鸿蒙OS ohos.utils
      1. 鸿蒙OS ohos.utils interface
      2. 鸿蒙OS ohos.utils class
    16. 鸿蒙OS ohos.data.dataability
      1. 鸿蒙OS ohos.data.dataability class
    17. 鸿蒙OS ohos.accessibility
      1. 鸿蒙OS ohos.accessibility interface
      2. 鸿蒙OS ohos.accessibility class
    18. 鸿蒙OS ohos.agp.components
      1. 鸿蒙OS ohos.agp.components interface
      2. 鸿蒙OS ohos.agp.components class
    19. 鸿蒙OS ohos.agp.transition
      1. 鸿蒙OS ohos.agp.transition interface
      2. 鸿蒙OS ohos.agp.transition class
    20. 鸿蒙OS ohos.agp.window.service
      1. 鸿蒙OS ohos.agp.window.service interface
      2. 鸿蒙OS ohos.agp.window.service class
    21. 鸿蒙OS ohos.event.notification
      1. 鸿蒙OS ohos.event.notification interface
      2. 鸿蒙OS ohos.event.notification class
    22. 鸿蒙OS ohos.global.configuration
      1. 鸿蒙OS ohos.global.configuration class
    23. 鸿蒙OS ohos.multimodalinput.event
      1. 鸿蒙OS ohos.multimodalinput.event class
    24. 鸿蒙OS java.io
      1. 鸿蒙OS java.io interface
      2. 鸿蒙OS java.io class
      3. 鸿蒙OS java.io exception
    25. 鸿蒙OS ohos.global.resource
      1. 鸿蒙OS ohos.global.resource class
    26. 鸿蒙OS ohos.data.resultset
      1. 鸿蒙OS ohos.data.resultset interface
    27. 鸿蒙OS ohos.agp.utils
      1. 鸿蒙OS ohos.agp.utils class
    28. 鸿蒙OS javax.sql
      1. 鸿蒙OS javax.sql interface
      2. 鸿蒙OS javax.sql class
  8. 附
    1. 鸿蒙OS 概要简介
    2. 鸿蒙OS JS API参考 组件text
    3. 鸿蒙OS JS API参考 组件span
    4. 鸿蒙OS JS API参考 组件tab-content
    5. 鸿蒙OS 组件通用事件
    6. 鸿蒙OS 自定义组件 基本概念
    7. 鸿蒙OS JS FA调用Java PA机制概述
    8. 鸿蒙OS 接口通用规则
    9. 鸿蒙OS 轻量级智能穿戴开发概述
    10. 鸿蒙OS《Native API参考》
    11. 鸿蒙OS 文件组织
    12. 鸿蒙OS overview
    13. 鸿蒙OS 接口描述语言简介
    14. 鸿蒙OS IDL接口开发步骤
阅读(1313) 赞(12)

鸿蒙OS JS API参考 组件tab-content

2020-09-17 14:52:32 更新

<tabs>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。

支持设备

智慧屏 智能穿戴
支持 不支持

权限列表

无

子组件

支持。

属性

名称 类型 默认值 必填 描述
scrollable boolean true 否 是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。
id string - 否 组件的唯一标识。
style string - 否 组件的样式声明。
class string - 否 组件的样式类，用于引用样式表。
ref string - 否 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled boolean false 否 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
focusable boolean true 否 当前组件是否可以获取焦点。 当focusable设置为true时，可否获焦依赖于是否拥有可获焦的子组件；设置为false时，本身及其子组件都不能获焦。
data string - 否 给当前组件设置data属性，进行相应的数据存储和读取。

事件

名称 参数 描述
touchstart TouchEvent 手指刚触摸屏幕时触发该事件。
touchmove TouchEvent 手指触摸屏幕后移动时触发该事件。
touchcancel TouchEvent 手指触摸屏幕中动作被打断时触发该事件。
touchend TouchEvent 手指触摸结束离开屏幕时触发该事件。
click - 点击动作触发该事件。
longpress - 长按动作触发该事件。
focus - 获得焦点时触发该事件，span组件无法获取焦点。
blur - 失去焦点时触发该事件，span组件无法失去焦点。
key KeyEvent 智慧屏特有的按键事件，当用户操作遥控器按键时触发。返回true表示页面自己处理按键事件。返回false表示使用默认的按键事件逻辑。不返回值作为false处理。

样式

名称 类型 默认值 必填 描述
width <length> | <percentage> - 否 设置组件自身的宽度。缺省时使用元素自身内容需要的宽度。
height <length> | <percentage> - 否 设置组件自身的高度。缺省时使用元素自身内容需要的高度。
padding <length> 0 否 该属性可以有1到4个值：指定一个值时，该值指定四个边的内边距。指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
padding-[left|top|right|bottom] <length> 0 否 设置左、上、右、下内边距属性。
padding-[start|end] <length> 0 否 设置起始和末端内边距属性。
margin <length> 0 否 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。只有一个值时，这个值会被指定给全部的四个边。两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left|top|right|bottom] <length> 0 否 设置左、上、右、下外边距属性。
margin-[start|end] <length> 0 否 设置起始和末端外边距属性。
border - 0 否 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。
border-style string solid 否 使用简写属性设置所有边框的样式，可选值为：dotted：显示为一系列圆点，圆点半径为border-width的一半。dashed：显示为一系列短的方形虚线。solid：显示为一条实线。
border-[left|top|right|bottom]-style string solid 否 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。
border-[left|top|right|bottom] - - 否 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。
border-width <length> 0 否 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。
border-[left|top|right|bottom]-width <length> 0 否 分别设置左、上、右、下四个边框的宽度。
border-color <color> black 否 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。
border-[left|top|right|bottom]-color <color> black 否 分别设置左、上、右、下四个边框的颜色。
border-radius <length> - 否 border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。
border-[top|bottom]-[left|right]-radius <length> - 否 分别设置左上，右上，右下和左下四个角的圆角半径。
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生效
flex number - 否 规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-grow number 0 否 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-shrink number 1 否 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-basis <length> - 否 设置组件在主轴方向上的初始大小。说明仅父容器为<div>、<list-item>、<tabs>时生效。
position string relative 否 设置元素的定位类型，不支持动态变更。fixed：相对与整个界面进行定位。absolute：相对于父元素进行定位。relative：相对于其正常位置进行定位。说明absolute属性仅在父容器为<div>、<stack>时生效。
[left|top|right|bottom] <length> - 否 left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
← 鸿蒙OS JS API参考 组件span
鸿蒙OS 组件通用事件 →

推荐文章

推荐教程

最新教程