Logo FluentUI

Contents

Breadcrumb QML Type

提供用于显示层级路径的面包屑导航控件。. More...

Import Statement: import FluentUI.Controls 1.0

Properties

Signals

Detailed Description

Breadcrumb 是一个用于显示当前层级路径的导航控件，通常用于表示用户在应用程序中的当前位置以及返回上一级或更高层级的位置。

示例用法：

 Breadcrumb {
     items: [
         {title: "Home"},
         {title: "Products"},
         {title: "Electronics"},
         {title: "Mobile Phones"}
     ]
     onClickItem: function(model) {
         console.log("Clicked item:", model.title);
     }
 }

Property Documentation

font : font

用于显示面包屑项目标题的字体。默认值为 `Typography`。

例如：

 font: controlFont

items : array

表示面包屑路径的项目数组。每个项目应包含一个表示标题的字段 `title`，或可以根据 `textRole` 指定其他字段。

例如：

 items: [
     {title: "Home"},
     {title: "Products"},
     {title: "Electronics"},
     {title: "Mobile Phones"}
 ]

moreSize : int

"更多" 图标的大小。默认值为 24。

例如：

 moreSize: 20

moreSpacing : int

当有更多项目被隐藏时，用于调整显示 "更多" 图标与其后的项目之间的间距。默认值为 0。

例如：

 moreSpacing: 5

spacing : int

面包屑项目之间的间距。默认值为 10。

例如：

 spacing: 15

textRole : string

用于显示文本的字段名称。默认值为 "title"。

例如：

 textRole: "name"

Signal Documentation

clickItem(var model)

当用户点击面包屑项目时触发。信号携带被点击的项的数据。

例如：

Note: The corresponding handler is onClickItem.