推荐一款中国风React组件

时间:2022-09-27 09:10:09

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

项目地址: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. 100 Door Puzzle

    问题重述: There are 100 doors in a long hallway. They are all closed. The first time you walk by each do ...

  2. 信息加密之消息摘要算法的MAC

    MAC是消息摘要算法的第三种实现方式,另外两种方式分别为:MD2\4\5.SHA. MAC的jdk实现:1.默认密钥方式 private static void MAC_JDK(){ try { Ke ...

  3. windows 下的tcping 小插件

    如果把插件放在根目录 就要能过cmd切换到根目录 cd \ c:\>tcping -d -t -i 0.06 www.baidu.com 将文件放在c:\WINDOWS\system32目录下, ...

  4. set QUOTED_IDENTIFIER ON事故记录

    作业执行失败: 看了一下执行脚本 delete  top(8000) from "interface"."完成" where  loggid in( selec ...

  5. WIN下和LINUX动态库的区别

    **************************************************************************************************** ...

  6. Lazy<T>

    Lazy<T> 对象的创建方式,始终代表了软件工业的生产力方向,代表了先进软件技术发展的方向,也代表了广大程序开发者的集体智慧.以new的方式创建,通过工厂方法,利用IoC容器,都以不同的 ...

  7. java 设计模式之单利模式以及代理模式&lpar;静态&rpar;

    1:单利模式: public class Singleton { private static Singleton uniqueInstance = null; private Singleton() ...

  8. angular5与angular6的比较

  9. UVA 10539 - Almost Prime Numbers&lpar;数论&rpar;

    UVA 10539 - Almost Prime Numbers 题目链接 题意:给定一个区间,求这个区间中的Almost prime number,Almost prime number的定义为:仅 ...

  10. android图片压缩总结

    一.bitmap 图片格式介绍 android中图片是以bitmap形式存在的,那么bitmap所占内存,直接影响到了应用所占内存大小,首先要知道bitmap所占内存大小计算方式: bitmap内存大 ...