组件/表单组件引入于 1.3.0

EInputGroup 输入组合

import EUI 1.0

示例与代码

输入与操作

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { Layout.fillWidth: true placeholderText: qsTr("搜索") } EButton { text: qsTr("搜索") } }

效果

运行代码，体验组件交互

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

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

下拉与输入

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) ESelect { currentIndex: 0 Layout.minimumWidth: 120 Layout.preferredWidth: 120 model: ["https://", "http://"] } EInput { text: "example.com" Layout.fillWidth: true } }

效果

运行代码，体验组件交互

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

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

图标附加项

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EButton { enabled: false iconSource: EIcons.MAGNIFIER } EInput { Layout.fillWidth: true } }

效果

运行代码，体验组件交互

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

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

多输入组合

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { Layout.fillWidth: true placeholderText: "First" } EInput { Layout.fillWidth: true placeholderText: qsTr("最后一项") } }

效果

运行代码，体验组件交互

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

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

数值与单位

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { text: "100" Layout.fillWidth: true } EButton { text: "USD" enabled: false } }

效果

运行代码，体验组件交互

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

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

自定义间距

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: Math.min(480, parent.width) Row { spacing: 12 EText { text: qsTr("输入框间距") anchors.verticalCenter: parent.verticalCenter } ESpinBox { id: gap to: 48 from: 0 value: 16 stepSize: 4 editable: true objectName: "inputGroupSpacingControl" } EText { text: "px" anchors.verticalCenter: parent.verticalCenter } } EInputGroup { spacing: gap.value width: parent.width objectName: "customSpacingInputGroup" EInput { Layout.fillWidth: true placeholderText: "First" } EInput { Layout.fillWidth: true placeholderText: qsTr("最后一项") } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

contentalias

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

默认值layout.data

spacingreal

相邻输入组成员之间的间距，单位为像素。

默认值8