高仿富途牛牛-组件化-界面美化

、概述

今天是组件化的第三篇文章了，前两篇文章主要是以功能为主，分别讲解了高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具和高仿富途牛牛-组件化(二)-磁力吸附，其中也不乏有一些小的bug，不过这些都不是问题。

之前的效果展示只是为了表达意思，界面是真的丑，标准的程序员审美，哈哈哈。今天这篇文章主要是对之前的程序进行了美化，并且进行了一些bug的修改。

效果美化是参照富途牛牛做的，虽然不是一模一样，但是确实比之前的效果好了一些，喜欢的同学可以参考下。

文章最后会把描述显示效果的qss文件贴上，希望可以帮到大家

二、效果展示

下面gif图所示，录制的时间比较长，大家可以仔细看下，交互效果完全是参照富途牛牛做的，如有问题，欢迎提出。感谢！！！

欢迎大家提出问题，交互、配色都可以

三、工具箱

工具箱是一个很重要的功能。我们的每一个独立组件模板都拥有一个工具箱。

工具箱自身支持移动
组件模板移动时会联动工具箱移动（工具箱和组件模板的相对位置不变）

下面我们来分析下工具箱是怎么做的

1、布局

首先，从界面布局上我们先来说下，工具箱从整体颜色划分上，可以分为两个部分：标题栏和客户区窗口。

a、标题栏

标题栏我们是一个窗口的眼睛，通过标题栏的命名我们可以看到这个窗口是干什么的，例如展示图中所示，交易、迷你报价、自选股、今日统计等等。

除此之外，标题栏还提供了一个很灵活的操作：移动窗口，我们可以通过鼠标按下标题栏来进行窗口拖拽

这里我们为了实现这个功能，重写了QWidget的三个接口，实现内容都比较简单，这里就不做说明了，有兴趣的自行百度，网上一大堆。

virtual void mousePressEvent(QMouseEvent *) override;
virtual void mouseMoveEvent(QMouseEvent *) override;
virtual void mouseReleaseEvent(QMouseEvent *) override;

最后也是很重要的一点，那就是标题栏还支持关闭窗口，我们通过点击标题栏上的关闭按钮，可以关闭当前窗口。

对于工具箱来说，我们也可以通过点击组件模板工具栏上的按钮进行关闭

b、客户区

一个窗口除过标题栏以为剩下的就是客户区了，客户端使我们展示展示数据的主要地方，展示效果中的工具箱里边包含了很多工具按钮，包括通用页签下的迷你报价、自选股、短线精灵，和港股页签下的迷你报价、交易、账户等等。

工具箱的客户端我们这里是只有一个QTabWidget类，而通用和港股页签就是QTabWidget下的两个页签。

每个页签里边都是一个QListWidget，我给QListWidget设置了图表展示模式，让他有了一个钟按钮的显示风格。

2、功能详解

上边我们主要分析了工具箱的一个组成部分，接下来我将会从更为详细的代码层面说明工具箱的实现过程，其中可能会包含一些qss样式表，全部的样式表将会在文章最后贴出

上边已经提供到两个页签里边的工具按钮都是包含在QListWidget控件中的，下面我直接贴出页签初始化的关键代码

void ToolBoxDialog::InitializeTools(int start, int end, const QString & title)
{
	QListWidget * normalWidget = new QListWidget;

	normalWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
	normalWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

	connect(normalWidget, &QListWidget::itemClicked, this, &ToolBoxDialog::ItemClicked);

	normalWidget->setDragEnabled(false);
	normalWidget->setViewMode(QListView::IconMode);
	normalWidget->setResizeMode(QListView::Adjust);
	normalWidget->setSpacing(3);

	for (int i = start; i < end; ++i)
	{
		normalWidget->addItem(createItem(toolNames[i], toolTypes[i]));
	}

	m_pTabWidget->addTab(normalWidget, title);
}

从上边代码可以看出，我们的列表使用了图标(QListView::IconMode)显示模式，并且设置了图标项不可以拖拽。

最后我们使用一个循环构造了很多item，插入到了QListWidget控件中

样式美化代码如下，不了解Qss语法的可以参考qt qss这篇文章，我以前写的，比较详细。

QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected {      border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover {      border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover {      border-bottom: 1 solid #2B3236; }

QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}

最后也是最重要的一点，item我们是怎么构造的

static QListWidgetItem * createItem(const QString & text, SubWindowNormalType type)
{
	QListWidgetItem * item = new QListWidgetItem;

	item->setSizeHint(QSize(72, 72));//设置项大小
	item->setFlags(item->flags() & ~Qt::ItemIsSelectable);//设置项不可以被选中
	item->setText(text);
	item->setData(UserType, type);
	item->setIcon(QPixmap("./image/mainWindow/tquant-btn_normal.png"));//设置图标

	return item;
}

代码比较简单，但是需要特别注意，代码中调用的每一个接口，都是必不可少的。

四、组件模板工具栏

关于工具栏的实现，我们可以参考高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具这篇文章，今天这篇文章我们只讲解怎么美化，虽然美化效果没有很明显，我们还是凑合着看吧。

这里同样也是使用了Qt的动态属性功能，这真是Qt的一个很强大的能力，有了动态属性，我们可以很容易的做出一些交互上比较复杂的效果。

鼠标hover时的文字颜色就是使用了动态属性来实现。仔细看如下qss样式表，当QLabel的Hovered属性为true时（实际上QLabel并没有达到hover，这里我们是模拟了hover行为），我们启用了一种新的文字颜色。

TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}

再看实现代码，当我们的鼠标移入自定义的标签页按钮时，给子控件（文本控件）设置了动态属性，并刷新了界面。

void TabButton::enterEvent(QEvent * event)
{
	m_pTitle->setProperty("Hovered", "true");
	m_pTitle->style()->unpolish(m_pTitle);
	m_pTitle->style()->polish(m_pTitle);

	__super::enterEvent(event);
}

自定义的页签按钮，本身是一个QWidget，他内部包含了QLabel文本和QToolButton关闭按钮，为了让QLabel还没有hover的时候，我们给他制造一种hover假象，我们使用了动态属性。

这个组件化demo中使用动态属性的地方其实比较多，这里就不一一例举出来了，说明一个，大家知道有这么会事，自己也学会使用即可

五、其他界面美化

讲完工具箱和组件模板工具栏美化之后，其他界面的美化就比较简单了。

剩下的就是subPanel和小窗口的美化，这里我重点说下小窗口的美化，有一个边框颜色的改变这个地方。

当小窗口获取焦点时，边框是黄色的，失去焦点时边框是灰色的

实现方式如下，这里我重写了窗口获取焦点和失去焦点的接口，并且进行设置了Qt内置的动态属性，然后在qss中对属性进行了样式配置

代码如下

//获取焦点时
void SmallWidget::focusInEvent(QFocusEvent * event)
{
	setProperty("SelectedWidget", "true");

	style()->unpolish(this);
	style()->polish(this);

	__super::focusInEvent(event);
}
//失去焦点时
void SmallWidget::focusOutEvent(QFocusEvent * event)
{
	setProperty("SelectedWidget", "false");

	style()->unpolish(this);
	style()->polish(this);

	__super::focusOutEvent(event);
}

qss样式如下

QWidget#small_widget_title
{
	border-bottom:1 solid #2B5470;background:#292F33;
}
QWidget#SmallWidget
{
	border:1 solid #474F57;background:#1D2224;
}
QWidget#SmallWidget[SelectedWidget=true]
{
	border:2 solid #FFE100;
}

是不是很简单，哈哈哈哈。

最后我贴出完整的qss样式表，为了显示更多内容，这里我把多余的换行符都去掉了。

QDialog{	border:1px solid #7b8187}
QWidget{	background:#28323f;color:#DDDDDD;}

QWidget#small_widget_title{	border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#SmallWidget{	border:1 solid #474F57;background:#1D2224;}
QWidget#SmallWidget[SelectedWidget=true]{	border:2 solid #FFE100;}
QWidget#DragToolBar{	background:#1D2224;border-bottom:1 solid #2B3236;}
QWidget#ToolBoxTitle{	border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#ToolBoxDialog{	background:#28323F;border:1 solid #474F57;}

TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}

QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected {      border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover {      border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover {      border-bottom: 1 solid #2B3236; }

QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}

六、使用qss文件

设置外部qss文件的流程如下：

找到qss文件
加载qss文件
通过QApplication::setStyleSheet设置样式表

这样是一种比较冷通的设置方式，一旦qss文件比较大，会出现这句代码卡顿的情况。如果想要更好的性能，qss建议还是分开来写，至于怎么合理的拆分qss文件，可以根据自己的需求来拆分

点击领取Qt学习资料+视频教程~「链接」

这里提供我之前使用过的两种方式

控件级别，每个控件对应一个qss文件
功能级别，一个功能模块一个qss文件

拆分的好处我就不多说了，谁用谁知道！！！

话不多说，直接上代码了。

言

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。

之前发的CSS技巧大部分都是依照本文的套路来写的。

有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。

一言以蔽之：只有多欣赏动画，才能写出好的动画。

01、交错动画

有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。

那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。

这就是所谓的交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。

本demo地址：

https://codepen.io/alphardex/pen/XWWWBmQ

02、用JS分割文本

还有一种经常用到的玩法：用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽

本demo地址：

https://codepen.io/alphardex/full/KKwvKGY

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：delay + Math.abs(i - middle) * step，其中中间元素的下标middle = letters.filter(e => e !== "").length / 2

本demo地址：

https://codepen.io/alphardex/full/eYYMYXJ

所有有交错特性的动画都在这儿

https://codepen.io/alphardex/pens/tags/?selected_tag=staggered

03、随机粒子动画

说到随机性，我们可以实现一种更疯狂的效果：给几百个粒子添加交错动画，并且交错时间随机，位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。

又到了白色相簿的季节呢~为什么你写CSS这么熟练啊？

本demo地址：

https://codepen.io/alphardex/full/dyPorwJ

04、伪类

HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。

:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child，用于选中元素的某一个子元素。其他的类似:focus、:focus-within等也有一定的使用。

本demo地址：

https://codepen.io/alphardex/pen/pooYKVa

所有:hover的动画都在这儿

https://codepen.io/alphardex/pens/tags/?selected_tag=hover

05、绝对定位实现多重边框

谁规定按钮只能有一套边框的？利用绝对定位和padding，我们可以给按钮做出3套大小不一的边框来，这样效果更炫了有木有！

本demo地址：

https://codepen.io/alphardex/full/ZEYXomW

06、伪元素

简而言之，伪元素就是在原先的元素基础上插入一个额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。

什么情况下用伪元素呢？比如实现一根条子划过文本的动画，在这个动画中每个文本都有属于自己的一根条子，那么我们就可以用伪元素为每个文本生成一个条子，而无需特地在HTML标签中加入条子的div（当然，如果条子数量超过了2个，还是用div吧）

本demo地址：

https://codepen.io/alphardex/pen/jOEOEzZ

07、overflow障眼法

之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。

笔者就用渐变来模拟那道光，通过transform: translateX()将其平移至右边。

但这样明显不对啊，这光为啥能被看见呢？不应该把它给“挡”起来吗？

于是乎，给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了。

这就是障眼法的力量:)

本demo地址：

https://codepen.io/alphardex/pen/eYYzXBZ

更多障眼法可以看看这个作品，一次性看个够XD

https://codepen.io/alphardex/pen/VwwVLdM

08、兄弟选择符定制表单元素

提示：这里最好将input作为label的子元素，这样用户点击label时就能传到input上默认的input太丑怎么办？那就把它先抹掉，用appearance: none或opacity: 0都可以。

然后，利用兄弟选择符~来定制和input相邻的所有元素（+号也行，只不过只能选中最近的元素），例如可以用伪元素生成一个新的方框代替原先的input，利用伪类:checked和动画来表示它被勾选后的状态，本质上还是障眼法哦~

本demo地址：

https://codepen.io/alphardex/full/rNNPQwa

善用某些CSS特性，也可以为你的作品增色不少哦。

09、transform

PS里的自由变换，各种CSS动画都离不开它。它也可以进行3D变换。

例子就不举了，因为几乎我所有的动画都用到了它。

10、border-radius

为盒子添加圆角，经常用来美化按钮等组件。

如果设定为50%则是圆形，也很常用。

11、不规则的曲边形状

调整多个顶点的border-radius可以做出不规则的曲边形状

本demo地址：

https://codepen.io/alphardex/full/abbWOPR

12、box-shadow

为盒子添加阴影，增加盒子的立体感，如果多层叠加的话会使阴影更加丝滑。

本demo地址：

https://codepen.io/alphardex/full/QWwwwpp

13、遮罩

如果给box-shadow的扩张半径设定足够大的值，可以用它来遮住背景，而无需额外的div元素。

本demo地址：

https://codepen.io/alphardex/full/BaaKvVZ

14、内发光

注意到box-shadow还有个inset，用于盒子内部发光。

利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形。

再加点动画和滤镜效果，“猩红之月”闪亮登场！

本demo地址：

https://codepen.io/alphardex/full/eYmGEGp

15、text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果。

16、发光文本

本demo地址：

https://codepen.io/alphardex/full/Exxodoq

17、霓虹文本

本demo地址：

https://codepen.io/alphardex/full/rNNwmZz

18、伪3D文本

本demo地址：

https://codepen.io/alphardex/full/QWWavvx

19、background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

本demo地址：

https://codepen.io/alphardex/full/QWwveZG

20、gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

21、linear-gradient

线性渐变是笔者最常用的渐变：

这个作品用到了HTML的dialog标签，渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本demo地址：

https://codepen.io/alphardex/full/eYYxzBm

22、radial-gradient

径向渐变笔者没怎么用过，上面例子中Snow的背景就是一个径向渐变。

https://codepen.io/alphardex/full/dyPorwJ

23、conic-gradient

圆锥渐变可以用于制作扇形，因此配合CSS变量笔者制作了一个度量计，也用到了伪元素障眼法。

本demo地址：

https://codepen.io/alphardex/full/BaydVvQ

24、filter

PS里的滤镜，玩过的都懂，blur最常用

25、backdrop-filter

对背景应用滤镜，产生毛玻璃的效果。

本demo地址：

https://codepen.io/alphardex/full/pooQMVp

26、mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果。

以下利用滤色模式（screen）实现文本视频蒙版效果。

本demo地址：

https://codepen.io/alphardex/full/wvvLYpV

27、clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思。

本demo地址：

https://codepen.io/alphardex/full/ZEEBRrq

28、-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品。

本demo地址：

https://codepen.io/alphardex/full/ExaZgxp

29、web animations

虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情。

那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了。

30、跟踪鼠标的位置

目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行。

通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置。

既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听mouseenter和mouseleave事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听mousemove事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了。

本demo地址：

https://codepen.io/alphardex/full/OJPmQGz

31、彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：

https://codepen.io/alphardex/full/ExavZdV

为一名UI设计师，PC端设计也是我们的主要工作职责，尤其在中后台设计、官网设计、网站设计中，我们要熟知所有的web UI组件，今天给大家总结了关于web端UI组件，希望可以帮到你。

一、什么是UI组件

UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。

二、组件的优势

1、保证一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

2、反馈用户 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

3、提高效率，减少成本 Efficiency
简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

二、组件详解

1、布局 Layout

A. 顶部-侧边布局-通栏布局，多用于应用型的网站

B. 侧边栏布局，采用侧边栏的页面，多用于展示类网站

2、导航菜单 NavMenu

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航分为“侧边栏导航”和“顶部导航”2 种类型。

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和「顶部导航」的区别。

A. 侧边栏导航
可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

B. 顶部导航

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

3、面包屑 Breadcrumb

面包屑，显示当前页面在系统层级结构中的位置，并能向上返回，提供一个有层次的导航结构, 并标明当前位置。

用法指南：

A. 当系统拥有超过两级以上的层级结构时；B. 当需要告知用户『你在哪里』时；C. 当需要向上导航的功能时。

4、按钮 Button

按钮用于开始一个即时操作。

用法指南：
标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。

在设计中，基本有以下四种按钮类型：

主要按钮：用于主行动点，一个操作区域只能有一个主按钮。

默认按钮：用于没有主次之分的一组行动点。

线性按钮：常用于添加操作。

链接按钮：用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

危险：删除/移动/修改权限等危险操作，一般需要二次确认。

幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。

禁用：行动点不可用的时候，一般需要文案解释。

加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

5、下拉菜单 Dropdown

将动作或菜单折叠到下拉菜单中。

用法指南：

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

6、标签页 Tabs

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

基础样式

选项卡样式

卡片式

7、分页 Pagination

当数据量过多时，使用分页分解数据。

8、单选框 Radio

在一组备选项中进行单选

9、复选框 Checkbox

一组备选项中进行多选

10、输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

11、计数器/数字输入框 InputNumber

通过鼠标或键盘，输入范围内的数值。

12、选择器 Select
当选项过多时，使用下拉菜单展示并选择内容。

13、级联选择器 Cascader
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

用法指南：

A. 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。B. 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。C. 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

14、日期选择器 DatePicker

用于选择或输入日期

15、时间选择器 TimePicker

输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

16、日期时间选择器 DateTimePicker

在同一个选择器里选择日期和时间

17、颜色选择器 ColorPicker

用于颜色选择

18、开关 Switch

表示两种相互对立的状态间的切换，多用于触发「开/关」。

19、滑块 Slider

通过拖动滑块在一个固定区间内进行选择

20、上传 Upload

通过点击或者拖拽上传文件

用法指南：

A. 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

B. 当需要上传一个或一些文件时。

C. 当需要展现上传的进度时。

D. 当需要使用拖拽交互时。

21、评分 Rate

评分组件

22、穿梭框 Transfer

双栏穿梭选择框。

用法指南：

A. 需要在多个可选项中进行多选时。B. 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。

23、表单 Form

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

用法指南：

A. 用于创建一个实体或收集信息。B. 需要对输入的数据类型进行校验时。

24、表格 Table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

25、标签 Tag

进行标记和分类

26、进度条 Progress

用于展示操作进度，告知用户当前状态和预期。

用法指南：

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

27、树选择 TreeSelect

树型选择控件，用清晰的层级结构展示信息，可展开或折叠。

28、页头 PageHeader

页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用，包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

29、标记/徽标数 Badge

出现在按钮、图标旁的数字或状态标记

用法指南：

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

30、头像 Avatar

用图标、图片或者字符的形式展示用户或事物信息。

31、折叠面板 Collapse

可以折叠/展开的内容区域。

32、步骤条 Steps

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

33、警告提示 Alert

警告提示，展现需要关注的信息。

用法指南：

A. 当某个页面需要向用户显示警告的信息时。B. 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

34、加载 Loading

加载数据时显示动效

35、加载中 Spin

用于页面和区块的加载中状态。

用法指南：

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

36、骨架图 Spin

在需要等待加载内容的位置提供一个占位图形组合。

用法指南：

A. 网络较慢，需要长时间等待加载处理的情况下。B. 图文信息内容较多的列表/卡片中。C. 只在第一次加载数据的时候使用。D. 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

37、消息提示 Message

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

38、弹框 Messagebox

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

39、通知 Notification

悬浮出现在页面角落，显示全局的通知提醒消息。

40、对话框 Dialog

在保留当前页面状态的情况下，告知用户并承载相关操作。

41、文字提示 Tooltip

常用于展示鼠标 hover 时的提示信息。

42、气泡卡片/弹出框 Popver

点击/鼠标移入元素，弹出气泡式的卡片浮层。

43、气泡确认框 Popconfirm

点击元素，弹出气泡式的确认框。

44、卡片 Card

将信息聚合在卡片容器中展示。

45、走马灯 Carousel

在有限空间内，循环播放同一类型的图片、文字等内容

46、时间轴 Timeline

可视化地呈现时间流信息。

47、分割线 Divider

区隔内容的分割线

48、日历 Calendar

按照日历形式展示数据的容器。

49、陈述列表 Descriptions

成组展示多个只读字段。常见于详情页的信息展示。

50、回到顶部 Backtop

返回页面顶部的操作按钮

用法指南：

A. 当页面内容区域比较长时；

B. 当用户需要频繁返回顶部查看相关内容时。

51、结果 Result

用于反馈一系列操作任务的处理结果。

52、抽屉 Drawer

屏幕边缘滑出的浮层面板。

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

53、空状态 Empty

空状态时的展示占位图，当目前没有数据时，用于显式的用户提示。

54、列表 list

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面

写在最后

工欲善其事,必先利其器，充分了解每个组件所具备的功能和设计用法，能让你的设计效率提升，看完这篇文章，希望你可以在设计网站、中后后台界面时，不会再被各种各样错综繁杂的组件弄得晕头转向，可以帮助你更好的选择所需要的组件。

请私信我回复“666”，为严哥打Call~，还有更多惊喜哦~

.............................................................

UI严选—越努力，越幸运

在线咨询

上一篇：你不可不知的HTML优化技巧，还不抓紧时间收藏
下一篇：HTML表格行技巧大揭秘：如何高效使用标签提升网页布局

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

高仿富途牛牛-组件化-界面美化

、概述

二、效果展示

三、工具箱

1、布局

a、标题栏

b、客户区

2、功能详解

四、组件模板工具栏

五、其他界面美化

六、使用qss文件

言

01、交错动画

02、用JS分割文本

03、随机粒子动画

04、伪类

05、绝对定位实现多重边框

06、伪元素

07、overflow障眼法

08、兄弟选择符定制表单元素

09、transform

10、border-radius

11、不规则的曲边形状

12、box-shadow

13、遮罩

14、内发光

15、text-shadow

16、发光文本

17、霓虹文本

18、伪3D文本

19、background-clip:text

20、gradient

21、linear-gradient

22、radial-gradient

23、conic-gradient

24、filter

25、backdrop-filter

26、mix-blend-mode

27、clip-path

28、-webkit-box-reflect

29、web animations

30、跟踪鼠标的位置

31、彩蛋

B. 顶部导航

您的项目需求