在看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结构篇的更多相关文章

  1. element-ui Collapse 折叠面板源码分析整理笔记(十)

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  2. 产品打包工具的制作,ant,编译源码,打jar包,打tag,打war包,备份release版本等

    1.  在进行打包工具的制作前,需要准备的软件有: svnant-1.3.1 作用是让ant和svn相关联 apache-ant-1.9.7 需要设置ant_home,path,我的配置是: ANT_ ...

  3. JUC并发编程基石AQS源码之结构篇

    前言 AQS(AbstractQueuedSynchronizer)算是JUC包中最重要的一个类了,如果你想了解JUC提供的并发编程工具类的代码逻辑,这个类绝对是你绕不过的.我相信如果你是第一次看AQ ...

  4. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  5. 修改ElementUI源码实践

    提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...

  6. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  7. Tomcat源码导入eclipse的步骤

    Tomcat源码导入eclipse 一.下载源码 1.  进入Apache 官网:http://tomcat.apache.org/ 2.  在左边侧选择要下载的源码的版本. 3.  或者直接通过Ar ...

  8. 基于MVVM的知乎日报应用安卓源码

    使用data binding , dagger2 , retrofit2和rxjava实现的,基于MVVM的知乎日报APP运行效果: <ignore_js_op> 使用说明: 项目结构 a ...

  9. Memcached源码分析之从SET命令开始说起

    作者:Calix 如果直接把memcached的源码从main函数开始说,恐怕会有点头大,所以这里以一句经典的“SET”命令简单地开个头,算是回忆一下memcached的作用,后面的结构篇中关于命令解 ...

随机推荐

  1. HTML5+CSS3入门学习(一)——HTML5

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  2. golang中Context的使用场景

    golang中Context的使用场景 context在Go1.7之后就进入标准库中了.它主要的用处如果用一句话来说,是在于控制goroutine的生命周期.当一个计算任务被goroutine承接了之 ...

  3. 从零开始学习PYTHON3讲义(九)字典类型和插入排序

    <从零开始PYTHON3>第九讲 第六讲.上一讲我们都介绍了列表类型.列表类型是编程中最常用的一种类型,但也有挺明显的缺陷,比如: data = [5,22,34,12,87,67,3,4 ...

  4. 带着新人简单看看servlet到springmvc

    好久都没有写博客了,不是因为自己懒了,而是总感觉自己知道的只是太少了,每次想写博客的时候都不知道怎么下手,不过最近看到一篇博客说的是springmvc,给了我比较大的兴趣,感觉一下子对整个spring ...

  5. PyQt:自定义QLineEdit禁止选中复制粘贴

    说明 自定义的QLineEdit,当输入文本之后,禁止选中复制粘贴等操作 实现方法 MyQLineEdit类继承了QLineEdit类,并重写QLineEdit类中的mouseMoveEvent方法和 ...

  6. ubuntu上配置nginx实现反向代理

    反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...

  7. SpringBoot + Spring Security 学习笔记(二)安全认证流程源码详解

    用户认证流程 UsernamePasswordAuthenticationFilter 我们直接来看UsernamePasswordAuthenticationFilter类, public clas ...

  8. zk分布式任务管理

    在我们的系统开发过程 中不可避免的会使用到定时任务的功能,而当我们在生产环境部署的服务超过1台时,就需要考虑任务调度的问题,防止两台或多台服务器上执行同一个任务,这个问题今天咱们就用zookeeper ...

  9. C++求集合的交集差集

    标准库的<algorithm>头文件中提供了std::set_difference,std::set_intersection和std::set_union用来求两个集合的差集,交集和并集 ...

  10. Spring Boot(六):如何优雅的使用 Mybatis

    *:first-child{margin-top: 0 !important}.markdown-body>*:last-child{margin-bottom: 0 !important}.m ...