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

项目地址: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. git完全cli指南之详细思维导图整理分享

    一直以来都觉得 在开发过程中 能用命令行的还是用命令行 能用快捷键的就要快捷键 前期可能要点学习成本 但是熟练后带来的好处还是非常可观的 所以一直坚持使用命令行的方式来使用git 基本上每个操作都能心 ...

  2. Leetcode 88. Merge Sorted Array(easy)

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  3. Docker Toolbox替换默认docker machine的存储位置

    使用Docker Toolbox是因为它不用打开windows的hyper-v组件,这样可以和VMware workstation一起使用. 关于如何迁移可参考:https://www.cnblogs ...

  4. WSL、Git on Windows 、Putty等的创建的rsa秘钥与连接linux的使用。

    1. 在windows 上面可以使用多种方式创建公钥和私钥 这里从一开始说: 1.1 windows subsystem linux 的方式最简单了 cmd 命令行 下 进入 WSL 输入命令 bas ...

  5. 妙解Servlet四大域对象

    pageContext pageContext作用域为page(页面执行期). request request是表示一个请求,只要发出一个请求就会创建一个request,它的作用域仅在当前请求中有效. ...

  6. npm ERR! code ENOENT

    npm ERR! path F:\VsCodeWorkspace\labWeb\front\LabWebAdminFrontEnd\node_modules\core-jsnpm ERR! code ...

  7. 面试题(一GC)

    参考https://blog.csdn.net/m0_38110132/article/details/74542143 6.详谈一下Java内存模型以及GC算法: (1). jvm结构 JVM的内部 ...

  8. mpvue——引入vant_weapp组件

    克隆仓库 克隆后,将dist目录下的所有文件复制到项目中的/static/vant/目录下,vant目录是我自己创建为了区分的 git clone https://github.com/youzan/ ...

  9. jpg、png格式的图片转换成webp后颜色失真的问题

    今天简单的试用了一下 cweb.exe 将 jpg, png 格式的图片转换成 webp 格式. 我今天下载的是当前最新版:1.0.0 cwebp 3.jpg  -q 85 -o 3.webp 发现图 ...

  10. 第七篇--ubuntu18.04下面特殊符号

    按住键盘win键,在搜索框输入“字符”,弹出来的工具点进去 需要什么符号就找什么符号,然后点击它复制就好.