UI框架组件(详细版)

常用UI框架：

与React功能性框架配合的UI框架：

• Ant-design：Ant Design of React - Ant Design

  Ant-design-Mobile：Ant Design Mobile | A Mobile Design Specification

• React-Bootstrap：React-Bootstrap

• Material-UI：MUI: The React component library you always wanted

与Vue功能性框架配合的UI框架：

• element UI：Element - The world's most popular Vue UI framework

• iView：iView / View Design 一套企业级 UI 组件库和前端解决方案

• BootstrapVue ：BootstrapVue-基于VueJS的Bootstrap框架 · 全球最流行的 HTML、CSS 和 JS 工具库。

UI框架中的组件：

Ant-design

通用Universal
Button按钮	Icon图标	Typography排版
布局layout
Divider分割线	Grid栅格	Layout布局	Space间距
导航navigation
Affix固钉	Breadcrumb面包屑	Dropdown下拉菜单	Menu导航菜单	PageHeader页头	Pagination分页	Steps步骤条
数据录入Data Entry
AutoComplete自动完成	Cascader级联选择	Checkbox多选框	DatePicker日期选择框	Form表单	Input输入框	InputNumber数字输入框	Mentions提及
Radio单选框	Rate评分	Select选择器	Slider滑动输入条	Switch开关	TimePicker时间选择框	Transfer穿梭框	TreeSelect树选择
Upload上传
数据展示Data Display
Avatar头像	Badge徽标数	Calendar日历	Card卡片	Carousel走马灯	Collapse折叠面板	Comment评论	Descriptions描述列表
Empty空状态	Image图片	List列表	Popover气泡卡片	Statistic统计数值	Table表格	Tabs标签页	Tag标签
Timeline时间轴	Tooltip文字提示	Tree树形控件
反馈feedback
Alert警告提示	Drawer抽屉	Message全局提示	Modal对话框	Notification通知提醒框	Popconfirm气泡确认框	Progress进度条	Result结果
Skeleton骨架屏	Spin加载中
其他other
Anchor锚点	BackTop回到顶部	ConfigProvider全局化配置

​

---

​

Ant-design-Mobile

Layout布局
Flex Flex布局	WingBlank 两翼留白	WhiteSpace 上下留白
Navigation导航
Drawer 抽屉	Menu 菜单	NavBar 导航栏	Popover 气泡	Pagination 分页器	SegmentedControl 分段器	Tabs 标签页	TabBar 标签栏
Data Entry数据录入
Button 按钮	Checkbox 复选框	Calendar 日历	DatePickerView 选择器	DatePicker 日期选择	InputItem 文本输入	ImagePicker 图片选择器	PickerView 选择器
Picker 选择器	Radio 单选框	Range 区域选择	Switch 滑动开关	Stepper 步进器	Slider 滑动输入条	SearchBar 搜索栏	TextareaItem 多行输入
Data Display数据展示
Accordion 手风琴	Badge 徽标数	Carousel 走马灯	Card 卡片	Grid 宫格	Icon 图标	List 列表	NoticeBar 通告栏
Steps 步骤条	Tag 标签
Feedback反馈
ActionSheet 动作面板	ActivityIndicator 活动指示器	Modal 对话框	Progress 进度条	Toast 轻提示
Gesture手势
PullToRefresh 拉动刷新	SwipeAction 滑动操作
Combination组合
ListView长列表	Result 结果页
Other其他
LocaleProvider 国际化

​

---

​

React-Bootstrap

按钮 Button
按钮群组 ButtonGroup, ButtonToolbar	下拉列表 DropdownButton, SplitButton, Dropdown	菜单项 MenuItem
弹出层Modal
弹出式对话框 Modal	提示工具 Tooltip	弹出框 Popover	定制化弹出层 Overlay
导航 Nav
导航 Nav, NavItem	导航条 Navbar	路径导航 Breadcrumb, Breadcrumb.Item	Tab 页 Tabs, Tab, TabContainer, TabContent, TabPane	分页Pagination	前后页导航 Pager, Pager.Item
页面布局layout
网络系统 Grid, Row, Col, Clearfix	欢迎页 Jumbotron	页面标题 PageHeader	列表 ListGroup, ListGroupItem	表格 Table	面板 Panel, PanelGroup, Accordion	背景墙 Well
表单 Form
表单 FormGroup, FormControl, ControlLabel	支持的控件 Checkbox, Radio, FormControl.Static, HelpBlock	表单布局 Form	输入组 InputGroup, InputGroup.Addon, InputGroup.Button	检验状态 FormControl.Feedback
媒体内容
图像 Image	缩略图 Thumbnail	响应式 iframe 嵌入 ResponsiveEmbed	走马灯 Carousel, Carousel.Item, Carousel.Caption	媒体对象 Media, Media.Left, Media.Right, Media.Heading, Media.List, Media.ListItem
其他other
字体图标 Glyphicon	标签 Label	角标 Badge	提醒、警告信息 Alert	进度条 ProgressBar
工具utils
转场动画 Collapse, Fade	定制样式	附加侧栏导航 Affix	滚动监听 Scrollspy

​

---

​

Material-UI

Inputs 输入框
Autocomplete 自动补全组件	Button 按钮	Button groups 按钮组	Checkbox 选择框	Floating Action Buttons 浮动操作按钮	Radio button 单选框	Rating 评分	Select 选择属性
Slider 滑块控件	Switch 开关组件	TextField 文本框	Transfer List 传递列表	Toggle Button 切换按钮
Data Display 数据展示
Avatar 头像组件	Badge 徽章	Chip 纸片组件	Divider 分隔线	Icons 图标	Material 图标	List 列表	Table 表格
Tooltip 工具提示	Typography 文字铸排
Feedback 用户反馈
Alert 警告提示	Backdrop 背景蒙版	Dialog 对话框	Progress 进度条组件	Skeleton 骨架屏	Snackbar消息条
Surfaces 表面展示
Accordion 扩展面板	App Bar 应用栏	Card 卡片	Paper 纸张组件
Navigation 导航栏
Bottom Navigation 底部导航栏	Breadcrumbs 面包屑导航	Drawer（抽屉）	Links 链接	Menu 菜单	Pagination 分页	Speed Dial 快速拨号	Stepper 步骤条组件
Tabs 选项卡
layout 布局
Box 分组	Container 容器	Grid 栅格	Stack 堆叠	Image list 图像列表	Hidden 隐藏组件
Utils 工具包
Click away listener 它处点击监听器	CSS Baseline 基线	Modal 模态框组件	非服务端渲染（SSR）	Popover 弹出框	Popper 弹出提示	Portal 传送门	Textarea Autosize 自适应文本框
过渡动画	useMediaQuery媒体查询 （Media queries）hook
Data Grid 数据表格
Layout 布局	Columns 列	Rows 行	Editing 表格编辑	Sorting 排序	Filtering 过滤	Pagination 分页	Selection 选择
Events 事件	State初始化	Export 导出	Components 组件	Style 样式	Localization 本地化	Scrolling编程式导航	Virtualization 虚拟化
Accessibility 无障碍设计	Group & Pivot使用分组、旋转等方法深入分析数据
Date/Time 日期/时间选择器
Date Range Picker 时间范围选择器 ⚡️	Date Time Picker 日期时间选择器	Time Picker 时间选择器	Masonry 瀑布流	Trap Focus 容器焦点	Tree View 树视图	Timeline 时间轴

​

---

​

element UI

Basic
Layout 布局	Container 布局容器	Color 色彩	Typography 字体	Border 边框	Icon 图标	Button 按钮	Link 文字链接
Form
Radio 单选框	Checkbox 多选框	Input 输入框	InputNumber 计数器	Select 选择器	Cascader 级联选择器	Switch 开关	Slider 滑块
TimePicker 时间选择器	DatePicker 日期选择器	Upload 上传	Rate 评分	ColorPicker 颜色选择器	Transfer 穿梭框	Form 表单
Data
Table 表格	Progress 进度条	Tree 树形控件	Pagination 分页	Badge 标记	Avatar 头像	Skeleton 骨架屏	Empty 空状态
Descriptions 描述列表	Result 结果
Notice
Alert 警告	Loading 加载	Message 消息提示	MessageBox 弹框	Notification 通知
Navigation
NavMenu 导航菜单	Tabs 标签页	Breadcrumb 面包屑	PageHeader 页头	Dropdown 下拉菜单
Others
Dialog 对话框	Tooltip 文字提示	Popover 弹出框	Popconfirm 气泡确认框	Card 卡片	Carousel 走马灯	Collapse 折叠面板	Timeline 时间线
Divider 分割线	Calendar 日历	Image 图片	Backtop 回到顶部	InfiniteScroll 无限滚动	Drawer 抽屉

​

---

​

iView（部分收费）

// 红色字体为收费的组件
基础
色彩（color）	字体（Font）	按钮（Button）	图标（Icon）
布局
栅格（Row/Col）	宫格（Grid）	布局（Layout）	列表（List）	卡片（Card）	折叠面板（Collapse）	面板分割（Split）
分割线（Divider）	单元格（Cell）	描述列表（DescriptionList）	页头（PageHeader）	全局页脚（GlobalFooter）	文本自动省略号（Ellipsis）	底部工具栏（FooterToolbar）
导航
导航菜单（Menu）	标签页（Tabs）	下拉菜单（Dropdown）	分页（Page）	面包屑（Breadcrumb）
徽标数（Badge）	锚点（Anchor）	步骤条（Steps）	加载进度条（LoadingBar）
表单
表单（Form）	登录（Login）	输入框（Input）	单选框（Radio）	多选框（Checkbox）	开关（Switch）	表格（Table）
导入导出插件（XLSX/CSV）	粘贴表格数据（TablePaste）	树选择（TreeSelect）	城市选择（City）	行政区域选择器（Region）	自动完成（AutoComplete）	滑块（Slider）
日期选择器（DatePicker）	时间选择器（DatePicker）	级联选择（Cascader）	图标选择器（IconSelect）	穿梭框（Transfer）	数字输入框（InputNumber）	评分（Rate）
上传（Upload）	标签选择器（TagSelect）	颜色选择器（ColorPicker）
视图
警告提示（Alert）	全局提示（Message）	通知提醒（Notice）	对话框（Modal）	抽屉（Drawer）	通知菜单（Notification）	日历（Calendar）
树形控件（Tree）	文字提示（Tooltip）	气泡提示（Poptip）	进度条（Progress）	处理结果（Result）	异常（Exception）	头像（Avatar）
头像列表（AvatarList）	标签（Tag）	走马灯（Carousel）	时间轴（Timeline）	相对时间（Time）	趋势标记（Trend）
图表
进度环（Circle）
方法
赋值到剪贴板（$Copy）	滚动（$ScrollTop）	视图滚动（$ScrolllntoView）	日期操作（$Date）
过滤
日期过滤（FilterDate）
其他
图钉（Affix）	返回顶部（BackTop）	加载中（Spin）	无限滚动（Scroll）	鉴权（Auth）	倒计时（CountDown）	数字动画（CountUp）
数字格式化（Numeral）	数据文本（NumberInfo）	字数统计（WordCount）

BootstrapVue

警告提示框(Alert)	徽章(Badge)	面包屑导航(Breadcrumb)	按钮(Button)	按钮组(Button Group)	按钮Toolbar(Button Toolbar)	日历组件(Calendar)	卡片(Card)
轮播效果(Carousel)	折叠面板(Collapse)	下拉菜单(Dropdown)	嵌入(Embed)	表单(Form)	表单复选框(Form Checkbox)	表格日期选择器(Form Datepicker)	文件选择(Form File)
表单组合(Form Group)	表单输入框(Form Input)	单选择表单Form Radio	下拉式表单(Form Select)	按钮式表单(Form Spinbutton)	Tags表单选择器(Form Tags)	文本框(Form Textarea)	图片(Image)
输入组(Input Group)	Hero广告大块屏幕(Jumbotron)	布局和网格系统(Layout and Grid System)	链接(Link)	列表组(List group)	媒体(Media)	模态、 弹出模态框(Modal)	导航(Nav)
导航栏(Navbar)	分页(Pagination)	分页导航(Pagination Nav)	弹窗(Popover)	进展、 进度指示器(Progress)	微调器、 旋转指示器(Spinner)	表格(Table)	选项卡(Tabs)
冒泡推送、弹出提示框(Toasts)	tip提示组件、提示冒泡(Tooltip)	表单内时间控件(Form Timepicker)	时间组件(Time)	图标（Icons）

常用组件对比

	Ant-design	Ant-design-Mobile	React-Bootstrap	Material-UI	element UI	iView	BootstrapVue
按钮 Button	√	√	√	√	√	√	√
图标 Icon	√	√	√	√	√	√	√
栅格Grid	√	√	√	√	x	√ (收费)	√
布局layout	√	√	√	√	√	√	√
面包屑Breadcrumb	√	×	√	√	√	√	√
下拉菜单Dropdown	√	×	√	x	√	√	√
导航菜单Menu	√	√	√	√	√	√	√
分页Pagination	√	×	√	√	√	√（page）	√
级联选择Cascader	√	×	x	x	√	√	x
多选框Checkbox	√	√	√ (控件）		√	√	√
日期选择框DatePicker	√	√	x	x	√	√	√
表单Form	√	x	√	x	√	√	√
输入框Input	√	√	√	x	√	√	√
单选框Radio	√	√	√ (控件）		√	√	√
选择器Select	√	√ (Picker)	x	√	√	x	x
上传Upload	√	x	x	x	√	√	x
徽标数Badge	√	√	√	√	√ (标记)	√	√
卡片Card	√	√	x	√	√	√	√
走马灯Carousel	√	√	√	√	√	√	√ (轮播效果)
抽屉Drawer	√	√	x	√	√	√	x
对话框Modal	√	√	√	√ (Diologs)	√ (Diologs)	√	√
进度条Progress	√	√	√	√	√	√	√
折叠面板Collapse	√	x	√	x	√	√	√