推荐一款中国风React组件
最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下
项目地址: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组件的更多相关文章
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- 给 Web 开发人员推荐的通用独立 UI 组件(二)
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- 推荐12款实用的 JavaScript 书页翻转效果插件
Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...
- 向 Web 开发人员推荐35款 JavaScript 图形图表库
图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...
- 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】
HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...
随机推荐
- Linux和Uboot下eMMC boot分区读写
关键词:eMMC boot.PARTITION_CONFIG.force_ro等. 1. eMMC的分区 大部分eMMC都有类似如下的分区,其中BOOT.RPMB和UDA一般是默认存在的,gpp分区需 ...
- Linux内存管理 (20)最新更新和展望
专题:Linux内存管理专题 关键词:OOM.swap.HMM.LRU. 本系列没有提到的内容由THP(Transparent Huge Page).memory cgroup.slub.CMA.zr ...
- LOJ3053 十二省联考2019 希望 容斥、树形DP、长链剖分
传送门 官方题解其实讲的挺清楚了,就是锅有点多-- 一些有启发性的部分分 L=N 一个经典(反正我是不会)的容斥:最后的答案=对于每个点能够以它作为集合点的方案数-对于每条边能够以其两个端点作为集合点 ...
- SQL Server之深入理解STUFF
前言 最近项目无论查询报表还是其他数据都在和SQL Server数据库打交道,对于STUFF也有了解,但是发现当下一次再写SQL语句时我还得查看相关具体用法,说到底还是没有完全理解其原理,所以本节我们 ...
- Scrapy命令行详解
官方文档:https://doc.scrapy.org/en/latest/ Global commands: startproject genspider settings runspider sh ...
- iview 动态渲染menu时active-name无效的问题
动态渲染menu时,如果需要active-name,那么name只能绑定index,动态渲染的数组初始必须有一个空对象.否则无法使用active-name属性.注:仅限3.0版本,不排除新版本修复的可 ...
- js 实现数据结构 -- 队列
原文: 在 Javascript 中学习数据结构与算法. 概念: 与栈相反,队列是一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项:队列在尾部添加新元素,并 ...
- 数据分析---《Python for Data Analysis》学习笔记【01】
<Python for Data Analysis>一书由Wes Mckinney所著,中文译名是<利用Python进行数据分析>.这里记录一下学习过程,其中有些方法和书中不同 ...
- 【XSY3126】异或II 数学
题目描述 给你一个序列 \(a_0,a_1,\ldots,a_{n-1}\).你要进行 \(t\) 次操作,每次操作是把序列 \(x\) 变为序列 \(y\),满足 \(y_i=\oplus_{j=0 ...
- Linux(Ubuntu)换apt-get源
在虚拟机安装完Ubuntu后,因为apt-get命令默认的服务器在国外会很慢,换成国内的会快很多 选一个国内镜像源,以清华大学开源镜像为例,要选对应的Ubuntu版本 网站链接https://mirr ...