ETabs 标签页

import EUI 1.0

示例与代码

页签切换与惰性内容

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Item {
    width: Math.min(640, parent.width)
    height: 480

Column {
        width: parent.width - 48
        spacing: 16
        anchors.centerIn: parent

ESwitch {
            id: webNavigationAllowLeave

checked: true
            text: qsTr("允许切换")
        }
        ETabs {
            lazy: true
            width: parent.width
            objectName: "webNavigationTabs"
            beforeLeave: function() { return webNavigationAllowLeave.checked }
            model: [{text: qsTr("概览"), name: "overview", contentComponent: webNavigationOverviewPane},
                {text: qsTr("活动"), name: "activity", contentComponent: webNavigationActivityPane}]
        }
        Component {
            id: webNavigationOverviewPane

EText {
                width: parent.width
                wrapMode: Text.WordWrap
                text: qsTr("概览在首次进入时创建，返回后保留状态。")
            }
        }
        Component {
            id: webNavigationActivityPane

EText {
                width: parent.width
                wrapMode: Text.WordWrap
                text: qsTr("活动页具有独立生命周期。")
            }
        }
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

标签页

QML 代码QML

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

属性

属性说明取值与默认值

addIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.PLUS

addablebool

显示标签页新增按钮。

默认值false

beforeLeavevar

切换标签页前的检查函数，接收新旧页标识，可返回布尔值或 Promise。

默认值null

closablebool

是否显示关闭或删除按钮。

默认值false

currentIndexint

当前选中或显示项的索引。

-1：未选择
0 起：条目索引

默认值0

editablebool

允许编辑输入或同时开启标签页新增和关闭操作。

默认值false

enabledbool

是否允许交互；false 时控件禁用。

默认值true

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

lazybool

按需创建内容或加载数据；数据控件使用 load / lazyLoad。

默认值false

modelvar

组件的数据源；数组项结构以当前示例及组件说明为准。

默认值[]

movablebool

允许拖动标签页重排。

默认值false

navigationWidthreal

侧边标签导航宽度，单位为像素。

默认值140

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

stretchbool

标签页均分导航栏宽度。

默认值false

tabPositionstring

标签栏相对于内容的位置。

"top" / "bottom"
"left" / "right"

默认值"top"

typestring

标签页的视觉样式。

"line" / "card"
"border-card"

默认值"line"

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

activePanealias只读

当前激活标签页对应的内容对象。

默认值别名：panes.currentItem

countint只读

骨架实例数量或当前项目数量，具体含义由组件决定。

默认值由运行时计算

currentNamevar只读

当前标签页的名称。

默认值由运行时计算

verticalbool只读

实际布局是否采用水平或垂直方向。

默认值由运行时计算

信号

签名作用

tabAddRequested()

点击新增标签按钮时触发，由应用添加标签数据。

tabChanged(var name)

当前标签页变化时触发，name 为标签页名称。

tabMoved(int from, int to)

标签排序改变时触发，from 和 to 为原索引和目标索引。

selectionRejected(int index)

标签切换被拒绝时触发，index 为请求切换的标签索引。

tabClosed(int index, var item)

关闭标签页时触发，index 和 item 标识被关闭的标签。

edited(var name, string action)

新增或关闭标签时触发，name 为标签名称，action 为操作类型。

tabClicked(int index, var item)

点击标签页时触发，index 为索引，item 为标签数据。

方法

签名作用

scrollToActiveTab()

将当前激活标签滚动到可见位置。

requestAdd()

请求新增标签页，触发 tabAddRequested。

selectName(name)

按 name 选择标签页。

closeTab(index)

关闭 index 对应的标签页。

moveTab(from, to)

将标签页从 from 移动到 to。

select(index)

选择给定索引或标识对应的项目。

ETabs 标签页 ​

示例与代码 ​

页签切换与惰性内容 ​

标签页 ​

属性 ​

信号 ​

方法 ​

ETabs 标签页

示例与代码

页签切换与惰性内容

标签页

属性

信号

方法