QelElementUI 是一个基于 Qt 的自定义控件库，模仿了 Element UI 的部分组件，实现了类似的功能。此项目的主要目标是提供一个在 Qt 环境中使用的现代化 UI 组件集合。
git clone [email protected]:CPythoner/QtElementUI.git由于本组件库使用了 FontAwesome 图标字体，需要进行安装，字体文件目录为：./QelIcon/fonts/fontawesome-4.7.0.ttf。
可以按需引入需要使用的组件，每个组件下面有一个 .pri 后缀的文件，将对应组件的 .pri 文件引入到 Qt 项目中的 .pro 文件即可，例如需要引入 QelButton 组件，则在你的 Qt 项目中添加源文件：
# 在你的 .pro 文件中
include($$PWD/../QelButton/QelButton.pri)QelShow 项目是一个专门用于展示 QelElementUI 中所有组件的示例项目。它提供了一个直观的用户界面，方便用户查看和测试各个组件的功能和样式。
-
展示所有
QelElementUI组件的使用示例，包括QelIcon、QelButton、QelNumberInput、QelInput、QelSelect、QelCheckbox、QelRadio、QelSwitch等。 -
通过左侧分类树（如“基础组件”“表单组件”）选择不同组件，右侧展示对应测试界面。
在 Qt 环境中打开 QelShow.pro 项目文件并运行，即可启动展示应用程序。应用程序界面包括左侧的组件树状列表和右侧的展示区域，用户可以通过点击不同组件名称，查看各组件的示例和配置效果。
#include "QelIcon.h"
QelIcon *icon = new QelIcon(QelIcon::Search, 16, this);#include "QelButton.h"
QelButton *button = new QelButton(QelButton::Primary, QelButton::Medium, false, false, false, false, QelButton::Button, QIcon(), "Primary Button", this);#include "QelNumberInput.h"
QelNumberInput *numberInput = new QelNumberInput(this);
numberInput->setMinValue(0);
numberInput->setMaxValue(100);
numberInput->setStep(1.0);
numberInput->setSize(QelNumberInput::Default);#include "QelInput.h"
QelInput *input = new QelInput(this, QelInput::Type::Text, "请输入内容");
input->setClearable(true);#include "QelSelect.h"
QelSelect *select = new QelSelect(this);
select->addOption("北京", "beijing");
select->addOption("上海", "shanghai");QelElementUI 组件可以通过修改提供的样式表或重写绘制事件进行定制，以满足特定的设计需求。
#include "QelCheckbox.h"
qel::QelCheckbox *checkbox = new qel::QelCheckbox(
"接收通知", // text
true, // checked
false, // disabled
false, // indeterminate
true, // border
qel::QelCheckbox::Size::Default,
this
);#include "QelRadio.h"
qel::QelRadio *radio = new qel::QelRadio(
"选项 A", // text
true, // checked
false, // disabled
true, // border
qel::QelRadio::Size::Default,
qel::QelRadio::StyleType::Default,
this
);#include "QelSwitch.h"
qel::QelSwitch *sw = new qel::QelSwitch(this);
sw->setChecked(true);