jjzjj

Element - 饿了么团队出品的神级桌面 UI 组件库

FGGIT 2024-06-03 原文

一套著名的桌面端的组件库,同时提供Sketch、Axure模板资源文件方便快速产品设计。

介绍

由饿了么团队出品,一套为开发者、设计师和产品经理准备的组件库,提供了配套axure、sektch设计资源,可以直接下载使用,能帮我等搬砖人员节省大量的时间。

使用现成的UI组件库,能快速搭建项目,后期也容易维护,在敏捷开发项目中尤为常见。设计师可以下载设计文件,在做设计图时直接使用模板,既能快速出图,也保证了前端还原实现。

我是一个喜欢研究前端开发的爱好者,当我第一次看到element时,卧槽真漂亮!那个时候优秀的前端ui框架还不多,等我把官网所有的组件一一体验下来,发现惊叹得太早了,不仅好看,体验做得非常到位,另我深有体会的是,原来在做产品设计时很难解决的交互问题,element都解决得非常好。

高质量的UI组件

为了用它,于是花了1周时间学了vue.js,之后就开始策马奔腾了。

特点

element ui是一款设计和交互非常优秀的前端UI框架。基于 Vue 2.0,同时也有基于React和Angular的实现。

视觉设计优秀,细节处理到位;交互体验很好,即使是复杂的表单操作,反馈也非常清晰,操作简洁直观;较容易上手,基于vue.js开发,官网实例代码很充足;支持定制主题;支持Vue\React\Angular,满足各前端技术型。使用体验

对于设计师,官网提供主题定制功能,可以快速按需生成符合自己设计风格的界面,同时提供sketch、axure模板文件下载,非常良心的企业级UI框架;

对于产品经理,element ui 解决了大量的交互问题,能让pm们专注于解决更深层次的问题,同时可以使用设计文件快速做出原型。

前端开发初期在选择组件库尤为重要。成熟的第三方组件库包含了你需要的组件,会省很多精力和时间,而且可以按需求定制主题,大气,易用逼格高,外包公司搬砖的同学绝对非常喜欢。

element 主题编辑器

这是一款为桌面端设计的UI库,出道即巅峰,特别适合做项目管理后台的前端框架,复杂的操作完全不在话下,官网的有充足的代码例子,使用很简单,可以配合webpack等工具按需引入,对于没有工程化开发经验的同学也很友好,支持引入js、css文件直接开发。

唯一不好的是,国内官网偶尔会抽风,速度有时也不是很快。

虽然一般用于pc端开发,但由于是响应式的设计,因此在移动端的表现也不赖,如果开发交互简单的界面,移动端表现也非常优秀。如果你还没用过element,强烈推荐你现在开始吧。

就算没能把element用在生产项目上,在官网体验这些高质量的组件,也能学习到很多设计和人机交互知识。特别是对vue.js组件化开发感兴趣的前端工程师,如果还不是那么熟练,可以多看element的例子来学习组件设计的思路。

有关Element - 饿了么团队出品的神级桌面 UI 组件库的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  3. ruby-on-rails - 如何使用 grape swagger ui 传递数组? - 2

    我在下面定义了api端点:paramsdorequires:ids,type:Array,desc:'Arrayofgroupids'end我无法从Swagger生成的UI传递数组。如果我输入[1,2,3,4]或ids%5b%5d=1&ids%5b%5d=2&ids%5b%5d=3然后两者都无效.如果我使用数组调用spec中的api,它就可以工作。我的客户想尝试Swagger的整个api,所以我想要一个适用于SwaggerUI的解决方案。 最佳答案 我对所有情况的解决方案:paramsdorequires:ids,type:Arra

  4. ruby - 我可以使用 ruby​​ 创建桌面应用程序吗? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我想知道是否可以使用ruby​​创建桌面应用程序以及缺点,你能举个例子吗?在Windows中使用的应用程序谢谢

  5. jquery - Sprockets::FileNotFound - 找不到文件 'jquery.ui' - 2

    这个问题已经被问过几次了,但我尝试了提供的解决方案,但仍然没有帮助,所以我提出了一个新问题。gem文件gem'jquery-ui-rails'按照建议,我将gem放在:assets组之外Application.css~*=require_self*=requirejquery.ui*=requirebootstrap-datepicker*=requirejquery.timepicker*=require_tree.*/RailsAssetPipeline根据列出的顺序加载Assets。在这里,我把它排在列表的第2位。Application.css.scss*=require_sel

  6. jquery - 'jquery-rails' 和 'jquery-ui-rails' 可以在一个项目下管理吗? - 2

    我有一个Rails应用,使用Rails5.1.6和ruby2.3.5p376我的Gemfile中有这两个gemgem'jquery-rails','~>4.3.3'gem'jquery-ui-rails','~>6.0.1'在show.html.erb中我有以下内容:$(function(){$("#datepicker").datepicker();});Date:在application.js中//=requirejquery-ui//=requirejquery//=requirerails-ujs//=requireturbolinks//=require_tree.在appl

  7. Handler在UI线程与子线程中的使用 - 2

    Handler在UI线程与子线程中的使用一、Handler基本概念Handler:其作用是在新启动的线程中发送消息,在主线程中获取和处理消息。Message:Handler接收和处理的消息对象。MessageQueue:消息队列,采用先进先出的方式来管理Message。由Looper对象进行管理,在程序创建Looper对象时,会在它的构造方法中创建MessageQueue对象,两者是相互依存的。Looper:每个线程只能拥有一个Looper对象。它在loop()方法会不断在MessageQueue中读取Message消息,分给对应的Handler来进行处理。二、Handler使用步骤在主线程中

  8. ruby-on-rails - Rails 4 - Mailer deliver_later 没有按照我的预期进行,阻止了 UI - 2

    我有一个Rails应用程序,其中有一个功能可以发送很多电子邮件。我想以异步方式的方式进行,并且我认为deliver_later方法可以做到这一点。目前,从用户单击submit到提交表单,我有一些延迟-这会导致糟糕的用户体验(这是一个非常简单的表单)。我的实现如下所示:defcreaterespond_todo|format|if@competition.save[...]send_notification_to_team_membersendenddefsend_notification_to_team_members@team.members.eachdo|member|unless

  9. 续集来了丨UI自动化测试(二):带视频,实在RPA高效进行web项目UI自动化测试 - 2

    一、什么是web项目ui自动化测试?通过测试工具模拟人为操控浏览器,使软件按照测试人员的预定计划自动执行测试的一种方式,可以完成许多手工测试无法完成或者不易实现的繁琐工作。正确使用自动化测试,可以更全面的对软件进行测试,从而提高软件质量进而缩短迭代周期。二、构建测试用例的“九部曲”(一)创建流程包划分功能模块日常测试活动中,都会根据功能模块进行拆分,所以在设计器中我们可以通过创建流程包的方式来拆分需要测试的功能模块,如下图中操作创建一个电脑流程包并且取名为对应的功能模块名称,如果有多个功能模块就创建多个对应的流程包,实在RPA设计器有易用的图形可视化界面,方便管理较多的功能模块。(二)在流程包

  10. ruby - 如何在 selenium webdriver - ruby​​ 中自动化桌面通知 - 2

    我正在尝试使用ruby​​中的seleniumwebdriver从gmail桌面通知中获取数据 最佳答案 开箱即用的想法,用Selenium截屏并用OCR处理图像?https://github.com/suyesh/ocr_space我假设Selenium只允许您与页面数据交互。 关于ruby-如何在seleniumwebdriver-ruby​​中自动化桌面通知,我们在StackOverflow上找到一个类似的问题: https://stackoverflo

随机推荐