神奇的网站(Uiverse.io)——号称最大开源UI库,包含5000+前端组件、适配React、Vue、Lit等,开箱即用。...

前端页面开发中最头疼的无外乎DIY组件,有的时候真的无从下手,我一般的套路就是找一个类似的然后去修改,在这个过程中无意间发现了一个有意思的网站,这个网站上有很多DIY的炫酷组件,刚好可以满足我工作中这种坑爹需求(👍🏻),该网站号称最大的开源UI库,当前有5418个组件、115647个贡献者,细看一下总结了以下几个优点:

  • 组件类型比较多:有Button、Checkbox、Switch、Cards、Loader、Input、Radio、Form、Patterns、Tooltips等;

  • Tailwind、CSS均有实现

  • 能够导出至React、Vue、Svelte、Lit使用;

  • 能够拷贝至Figma使用

  • 免费开源

63ea546f84d2e92bba50ed8b6bf4246b.png

组件类型

Buttons

Button标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。

8178b0c3a8325996eb8ab99fa8247c44.png

Checkboxes

Checkbox用于收集用户的多项选择。

19b68bd7d950b7ee8c4b5167aa4c5dce.png

Toggle switches

Switch需要表示开关状态/两种状态之间的切换时使用。

556b06e0b8f803891c7997fdf3481131.png

Cards

Card是最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。

a934939ed1edfb60ab4ca39b884a9bb0.png

Loaders

Loader用于页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

f9ea71b25b281fa20f432187793fd4ba.png

Input

Input通过鼠标或键盘输入内容,是最基础的表单域的包装。

4ca5b403ef13eb7305504363f9b2aa66.png

Radio

Radio用于在多个备选项中选中单个状态

4e488e319baaf02d647e0671be014be8.png

Forms

Form是一个表单,用于收集信息。

6aa5289ffac88901a6bac23e245a278c.png

Tooltip

Tooltip是文字提示气泡框,主要起到提示作用。

9a29ded9ab2052682d849d759634347a.png

多框架导出

该平台组件可以直接导出供React、Vue、Svelte、Lit框架使用,避免了自己去进行转换,真正做到了开箱即用。

68eac57f4e979cc47b403aece625638b.png

自我感觉,该网站中酷炫动效在99%的工作场景中是用不到的,但是这些炫酷效果对于寻求灵感,DIY网站、应对坑逼需求、日常装X还是挺有价值的,此外,《工具人的工具箱》小程序也上线了,内含11个模块338道面试题,不容错过!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值