最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下

项目地址:https://github.com/zhui-team/zhui

使用手册请参考:https://inspiring-bardeen-426f2e.netlify.com/

以下为zh - ui 作者的掘金简介文章

1. 很长的前言

大三狗的寒假到了...众所周知,寒暑假是超越别人的最好的时机。然鹅一不小心就会荒废过去,大二暑假去杭州实习了两个月,这个寒假如果不做点什么开学会被满满的负罪感填满...

想了想...发现自己还没有太多接触过组件这方面,于是就想搭建一个组件库,但是又不想和市面上的组件库样式雷同,考察了一段时间发现没有中国风相关的组件,于是下定决心(懒得再想)搭建一款中国风的组件库。一方面可以回顾一下自己的css,另一方面也可以加深自己对React和组件的理解。

2. 最初的梦想

应该不会应用到生产环境:没有专业的设计,怎么把一款组件设计的有中国风真的很难,并且很难做出统一的一套标准——至少对于我而言(不过我遇到了志同道合的小伙伴山鬼帮助我一起设计)。

不会开发太多的组件:凭我的智商是无法把所有组件都转成中国风的。

3. 开发&问题

设计的实现:想要用css来实现好看的中国风有时候是不切实际的,所以许多组件的样式都进行了简化,但我们还是尽量保住了中国风的属性,比如灯笼,画卷,太极,书签,秤等等。。

组件的设计: 讲真的,在接触组件库前,以为自己对组件了解的够多了,但实际开发起来才知道,许多内含看上去简单,但是如果你不接触的话是永远学不到的,这个过程中感谢前端大佬们已经搭好的轮子,让我能够愉快的借鉴哈哈哈哈。

4. 收获

  • 许多css的技巧及偏门的知识
  • 对React组件更深入的理解
  • 一个具有特色的项目
  • 博客的荒废
  • 在公司要尊重强大的设计老哥老姐

5. 结尾

这篇文章没什么干货,因为更多的是记录自己个人的真实感受,另一方面至少在开发组件库这方面我确实是个新人

这里放上GITHUB文档,感兴趣的可以看一下文档,不感兴趣的可以点个star鼓励一下我

项目我会一直坚持完善下去的,她现在还是个孩子,期待她长大的那一天。

另外不接受任何秀优越大佬的点评。

作者:AddOneG
链接:https://juejin.im/post/5c617a355188256299385138
来源:掘金

推荐一款中国风React组件的更多相关文章

  1. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  2. 给 Web 开发人员推荐的通用独立 UI 组件(二)

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  3. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  4. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  7. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  8. 向 Web 开发人员推荐35款 JavaScript 图形图表库

    图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...

  9. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

随机推荐

  1. Spring Cloud:统一异常处理

    在启动应用时会发现在控制台打印的日志中出现了两个路径为 {[/error]} 的访问地址,当系统中发送异常错误时,Spring Boot 会根据请求方式分别跳转到以 JSON 格式或以界面显示的 /e ...

  2. 基于 WebGL 3D 的 HTML5 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  3. 自己动手,打造轻量级VSCode/C#环境代替LinqPad

    .Net 的项目都挺重的,一直想找一个轻量级的 CSharp 环境,能像Python那样,选一个文件就能跑的.之前用的是 LinqPad,但它的缺点也很明显: (1)     不付费,自动完成不能用( ...

  4. 排序算法(sorting)

    学习到的排序算法的总结,包括对COMP20003中排序部分进行总结,部分图片来自COMP20003 有部分内容来自http://www.cnblogs.com/eniac12/p/5329396.ht ...

  5. iview库表table组件内嵌套Select组件

    表格内render函数渲染Select组件   { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{   ...

  6. svn 服务器部署

    系统环境:CentOS 7.x安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 #检查是否安装了低版本的SVN[root@localhost /]# ...

  7. js DOM操作 容易犯的错误

    这样一段html片段 <select class="form-control" id="course_chapter" onchange="fi ...

  8. Java执行jar总结

    1.命令集 1)nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 ...

  9. ☆ [ZJOI2006] 书架 「平衡树维护数列」

    题目类型:平衡树 传送门:>Here< 题意:要求维护一个数列,支持:将某个元素置顶或置底,交换某元素与其前驱或后继的位置,查询编号为\(S\)的元素的排名,查询排名第\(k\)的元素编号 ...

  10. 【并发编程】【JDK源码】J.U.C--AQS (AbstractQueuedSynchronizer)(1/2)

    J.U.C实现基础 AQS.非阻塞数据结构和原子变量类(java.util.concurrent.atomic包中的类),concurrent包中的基础类都是使用这种模式来实现的.而concurren ...