组件/数据展示引入于 1.3.0

EChip 胶囊标签

import EUI 1.0

示例与代码

基础标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" } }

效果

运行代码，体验组件交互

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

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

图标标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { 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 Row { spacing: 12 EChip { text: "EUI" avatarSource: "qrc:/example/images/gallery/avatar-01.jpg" } }

效果

运行代码，体验组件交互

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

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

可删除标签

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" closable: true onClosed: visible = false } }

效果

运行代码，体验组件交互

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

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

状态与尺寸

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" size: EStyle.Large styleType: EStyle.Success } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

hitbool

显示标签描边效果。

默认值false

textstring

显示的文字内容。

默认值""

iconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

roundbool

采用圆角胶囊按钮样式。

默认值true

checkedbool

控件是否选中或开启。

默认值false

avatarSourceurl

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

默认值""

closablebool

显示关闭编辑器或移除标签的按钮。

默认值false

checkablebool

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

默认值false

effectstring

组件的视觉主题。

light
dark

默认值"light"

styleTypeint

语义配色风格。

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

默认值EStyle.Primary

sizeint

应用内控件默认尺寸，传给 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值EControlConfig.sizeFor(control)

colorcolor

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

默认值EPaletteManager.BasePalette.transparent

darkEffectbool只读

当前视觉 effect 是否为 dark。

默认值effect === "dark" || checkable && checked

信号

签名作用

closed()

组件关闭后触发。

clicked()

点击内容时触发。

changed(bool checked)

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