组件/导航组件引入于 1.3.0

ESidebar 侧边导航

import EUI 1.0

示例与代码

完整侧边导航

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 responsive: false title: qsTr("工作区") model: [{ "index": "home", "text": qsTr("首页"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("文件"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("设置"), "iconSource": EIcons.GEAR }] }

效果

运行代码，体验组件交互

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

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

图标折叠

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 collapsed: true responsive: false title: qsTr("工作区") model: [{ "index": "home", "text": qsTr("首页"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("文件"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("设置"), "iconSource": EIcons.GEAR }] }

效果

运行代码，体验组件交互

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

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

悬停展开

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 collapsed: true openOnHover: true responsive: false title: qsTr("工作区") model: [{ "index": "home", "text": qsTr("首页"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("文件"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("设置"), "iconSource": EIcons.GEAR }] }

效果

运行代码，体验组件交互

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

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

浮动样式

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 responsive: false title: qsTr("工作区") variant: "floating" model: [{ "index": "home", "text": qsTr("首页"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("文件"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("设置"), "iconSource": EIcons.GEAR }] }

效果

运行代码，体验组件交互

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

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

抽屉导航

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 60 width: 420 EButton { text: "Open navigation" onClicked: navigation.open = true } ESidebar { id: navigation open: false mode: "offcanvas" responsive: false title: qsTr("工作区") model: [{index: "home", text: qsTr("首页"), iconSource: EIcons.HOUSE}, {index: "files", text: qsTr("文件"), iconSource: EIcons.FOLDER}, {index: "settings", text: qsTr("设置"), iconSource: EIcons.GEAR}] } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值extraContent.data

modelvar

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

默认值[]

openbool

是否显示侧边导航。

默认值true

titlestring

标题文字。

默认值""

modestring

折叠模式：icon 或 offcanvas。

open / save / folder

默认值"icon"

overlaybool

强制使用覆盖式抽屉。

默认值false

sidestring

导航所在侧：left 或 right。

默认值"left"

breakpointreal

响应式抽屉的窗口宽度阈值。

默认值768

collapsedbool

面板是否处于折叠状态。

默认值false

responsivebool

小于 breakpoint 时自动使用抽屉。

默认值true

collapsedWidthreal

折叠图标导航的宽度。

默认值64

currentIndexstring

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

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

默认值""

expandedWidthreal

展开导航的宽度。

默认值240

openOnHoverbool

悬停侧边导航时展开，离开后折叠。

默认值false

closeOnSelectbool

在覆盖模式选择条目后关闭导航。

默认值true

variantstring

侧边导航外观：sidebar、floating 或 inset。

"text" / "circle"
"button" / "image"
"caption" / "h1"
"h3"

默认值"sidebar"

footerComponentComponent

自定义底部内容的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

headerComponentComponent

替代默认标题与折叠按钮的导航头部内容。

默认值null

iconModebool只读

当前是否为只显示图标的折叠模式。

默认值!overlayMode && collapsed && mode === "icon"

overlayModebool只读

当前是否使用覆盖式抽屉导航。

默认值

展开默认值

overlay || mode === "offcanvas" || responsive && Window.window !== null && Window.window.width < breakpoint

信号

签名作用

selected(string index, var item)

选择侧边栏项目时触发，index 为项目标识，item 为项目数据。

方法

签名作用

toggle()

切换当前展开或选中状态；需要标识时传入目标项的标识。