前端页面开发中最头疼的无外乎DIY组件,有的时候真的无从下手,我一般的套路就是找一个类似的然后去修改,在这个过程中无意间发现了一个有意思的网站,这个网站上有很多DIY的炫酷组件,刚好可以满足我工作中这种坑爹需求(👍🏻),该网站号称最大的开源UI库,当前有5418个组件、115647个贡献者,细看一下总结了以下几个优点:
组件类型比较多:有Button、Checkbox、Switch、Cards、Loader、Input、Radio、Form、Patterns、Tooltips等; Tailwind、CSS均有实现 能够导出至React、Vue、Svelte、Lit使用; 能够拷贝至Figma使用 免费开源
组件类型
Buttons
Button标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
Checkboxes
Checkbox用于收集用户的多项选择。
Toggle switches
Switch需要表示开关状态/两种状态之间的切换时使用。
Cards
Card是最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。
Loaders
Loader用于页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
Input
Input通过鼠标或键盘输入内容,是最基础的表单域的包装。
Radio
Radio用于在多个备选项中选中单个状态
Forms
Form是一个表单,用于收集信息。
Tooltip
Tooltip是文字提示气泡框,主要起到提示作用。
多框架导出
该平台组件可以直接导出供React、Vue、Svelte、Lit框架使用,避免了自己去进行转换,真正做到了开箱即用。
自我感觉,该网站中酷炫动效在99%的工作场景中是用不到的,但是这些炫酷效果对于寻求灵感,DIY网站、应对坑逼需求、日常装X还是挺有价值的。
往期推荐
我的新书,冲上了京东榜一!
我做了个闯关游戏,竟难倒了无数程序员。。
看了我的简历指南,面试率翻倍
超 10 万人在用的简历模板,绝了
我的编程学习小圈子