Logo FluentUI

TextIcon QML Type

一个自定义的文本和图标组合组件,支持图标和文本的不同排列方式。. More...

Import Statement: import FluentUI.Controls 1.0

Properties

Signals

Methods

Detailed Description

`TextIcon` 组件将图标和文本组合在一个可自定义的布局中,支持文本在图标旁边或图标下方的显示方式。用户可以通过属性来调整图标和文本的排列顺序、间距以及显示样式。

示例用法:

 TextIcon {
  text: "Settings"
  icon.source: "icons/settings.svg"
  spacing: 8
  display: Button.TextBesideIcon
  reverse: false
  font: Typography.body
 }

Property Documentation

color : color

图标和文本的颜色。根据组件的启用状态进行调整。

默认值为 `enabled ? Theme.res.textFillColorPrimary : Theme.res.textFillColorDisabled`。


display : int

图标和文本的显示模式。可以是以下值之一: - `Button.TextBesideIcon`:文本在图标旁边 - `Button.TextUnderIcon`:文本在图标下方 - `Button.TextOnly`:仅显示文本 - `Button.IconOnly`:仅显示图标

默认值为 `Button.TextBesideIcon`。


family : string

图标字体的名称,用于指定图标的字体族。

默认值为 `FluentIcons.fontLoader.name`。


iconDelegate : Component

图标的自定义组件。可以用于进一步定制图标的外观。

默认值为 `comp_icon`。


reverse : bool

是否反转图标和文本的显示顺序。为 `true` 时,文本显示在图标下方;为 `false` 时,文本显示在图标旁边。

默认值为 `false`。


spacing : int

图标和文本之间的间距。

默认值为 `0`。


text : string

要显示的文本内容。

默认值为空字符串。


Signal Documentation

void onClicked()

当图标和文本组合项被点击时发出的信号。

Note: The corresponding handler is onOnClicked.


Method Documentation

void setIconSource(string source)

设置图标的来源。

source 图标的来源 URL 或路径。


void setText(string text)

设置显示的文本内容。

text 要显示的文本。