elementUi、iview、ant Design源码button结构篇
在看elementUI的button组件的时候,一起和iview、ant Design的button组件比
较功能、样式、代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功能那些会
用到哪些会相对比较好。
我们先来看这三个UI的button对外开放的功能结构:
elementUI button:

iview button:

ant Design button:

可以看出iview和ant Desgin的button的功能很像,而element的button的功能少了个a标签的功能,感觉button转换a标签的功能用到的不多。后面看具体button样式代码会发现iview和ant Desgin更像,所有之前有看到说iview抄袭element感觉只是无中生有,那iview和ant Desgin到底是谁借鉴谁的也没必要深究,本身开源项目借鉴代码风格规范是很正常的,在加上一个常用组件常用功能翻来覆去就那些固定的。
三个UI的button样式结构:
elementUI button.scss

iview button.less

ant Desgin button.less

我可以看到iview和ant Desgin的button的样式都是用less而且结构包括mixins和button、命名都非常相似,elementUI的button样式用sass来写的。后续计划解析组件分elementUI、iview、ant Desgin的整体功能、样式结构篇;elementUI、iview、ant Desgin的样式详细篇;elementUI、iview、ant Desgin的功能代码详细篇三部分入手。这篇就介绍button在三大UI框架的功能、样式整天结构。下一片就是看三大UI框架样式详细篇。
elementUi、iview、ant Design源码button结构篇的更多相关文章
- element-ui Collapse 折叠面板源码分析整理笔记(十)
Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...
- 产品打包工具的制作,ant,编译源码,打jar包,打tag,打war包,备份release版本等
1. 在进行打包工具的制作前,需要准备的软件有: svnant-1.3.1 作用是让ant和svn相关联 apache-ant-1.9.7 需要设置ant_home,path,我的配置是: ANT_ ...
- JUC并发编程基石AQS源码之结构篇
前言 AQS(AbstractQueuedSynchronizer)算是JUC包中最重要的一个类了,如果你想了解JUC提供的并发编程工具类的代码逻辑,这个类绝对是你绕不过的.我相信如果你是第一次看AQ ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- 修改ElementUI源码实践
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...
- element-ui 组件源码分析整理笔记目录
element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...
- Tomcat源码导入eclipse的步骤
Tomcat源码导入eclipse 一.下载源码 1. 进入Apache 官网:http://tomcat.apache.org/ 2. 在左边侧选择要下载的源码的版本. 3. 或者直接通过Ar ...
- 基于MVVM的知乎日报应用安卓源码
使用data binding , dagger2 , retrofit2和rxjava实现的,基于MVVM的知乎日报APP运行效果: <ignore_js_op> 使用说明: 项目结构 a ...
- Memcached源码分析之从SET命令开始说起
作者:Calix 如果直接把memcached的源码从main函数开始说,恐怕会有点头大,所以这里以一句经典的“SET”命令简单地开个头,算是回忆一下memcached的作用,后面的结构篇中关于命令解 ...
随机推荐
- Hadoop2.0伪分布式平台环境搭建
一.搭建环境的前提条件 环境:ubuntu-16.04 hadoop-2.6.0 jdk1.8.0_161.这里的环境不一定需要和我一样,基本版本差不多都ok的,所需安装包和压缩包自行下载即可. 因 ...
- vue2.0 配置环境总结(都是泪啊)
最近有点空闲时间,终于把一直想学的vue提上了日程,以下是收集的一些帮助入门的链接 1:https://vuefe.cn/v2/guide/ vue2.0中文官网 2:https://router.v ...
- 【深度学习篇】--Windows 64下tensorflow-gpu安装到应用
一.前述 一直以为自己的笔记本不支持tensflow-gpu的运行,结果每次运行模型都要好久.偶然间一个想法,想试试自己的笔记本,结果竟然神奇的发现能用GPU.于是分享一下安装步骤. 二.具体 因为版 ...
- 中缀表达式得到后缀表达式(c++、python实现)
将中缀表达式转换为后缀表达式的算法思想如下: 从左往右开始扫描中缀表达式 遇到数字加入到后缀表达式 遇到运算符时: 1.若为‘(’,入栈 2.若为’)‘,把栈中的运算符依次加入后缀表达式,直到出现'( ...
- IdentityServer4 中文文档与实战
写在前面 写于2018.9.12 我研究 IdentityServer4 是从.net core 1.1的时候开始的,那时候国内的中文资料比较少,我都是按照官方文档来研究的,整理成了笔记.这个系列文档 ...
- Maven常用命令:
Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ 一,Maven常用命令: 1. 创建Maven的 ...
- Writing a Simple Service and Client (C++)
此前说的publisher/subscriber都是广播式的,subscriber被动地接收消息,二者没有request/response这种交互. Service Node Client Node ...
- ado.net的简单数据库操作(二)之封装SqlHelperl类
今天我书接上回,接着昨天的ado.net的数据库操作的相关知识来讲哈! 从上篇文章给出的实例来看,你一定会发现,操作数据库其实还挺麻烦的,就连一个最简单的数据库操作语句都要包括 定义数据库连接字符串. ...
- bootstrap tooltips在 angularJS中的使用
使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <in ...
- Spring Boot 自定义 starter
一.简介 SpringBoot 最强大的功能就是把我们常用的场景抽取成了一个个starter(场景启动器),我们通过引入springboot 为我提供的这些场景启动器,我们再进行少量的配置就能使用相应 ...