组件/数据展示

ETag 标签

import EUI 1.0

示例与代码

图标标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { text: "EUI" iconSource: EIcons.HOUSE }

效果

运行代码，体验组件交互

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

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

头像标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { text: "EUI" avatarSource: "qrc:/example/images/gallery/avatar-02.jpg" }

效果

运行代码，体验组件交互

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

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

可勾选标签、自定义颜色与关闭

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 ETag { checkable: true text: qsTr("可切换") } ETag { hit: true color: "#FFF0DE" styleType: EStyle.Warning text: qsTr("重点") } ETag { closable: true text: qsTr("可关闭") onClosed: visible = false } }

效果

运行代码，体验组件交互

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

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

标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { closable: true text: qsTr("成功") styleType: EStyle.Success onClosed: visible = false }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

checkablebool

是否允许通过点击切换选中状态。

默认值false

checkedbool

控件是否选中或开启。

默认值false

closablebool

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

默认值false

colorcolor

自定义颜色；透明值通常表示使用当前主题或语义配色。

默认值动态绑定

effectstring

组件的视觉主题。

light
dark
plain

默认值"light"

enabledbool

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

默认值true

heightreal

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

默认值implicitHeight

hitbool

显示标签描边效果。

默认值false

roundbool

采用圆角胶囊按钮样式。

默认值false

sizeint

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

EStyle.Small
EStyle.Medium
EStyle.Large

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

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Primary

textstring

显示的文字内容。

默认值""

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

darkEffectbool只读

当前视觉 effect 是否为 dark。

默认值由运行时计算

iconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

avatarSourceurl

标签中显示的头像图片地址。

默认值""

信号

签名作用

closed()

组件关闭后触发。

clicked()

点击内容时触发。

changed(bool checked)

标签选中状态变化时触发，checked 为当前选中状态。