分享一个非常不错的页面组件库

这是「进击的Coder」的第 475 篇技术分享
作者:崔庆才

我对设计美学有一定执念,所以我在编写一些 UI 的时候会比较注重它的一些美观度、舒适度。

随着现在前端的发展,一些成套的组件库也是层出不穷了,比如基于 Vue 的 Element UI、iView,基于 React 的 Ant Design、Fluent UI 等等,它们设计其实挺好的,但有一些色彩搭配和风格还没有达到我理想中的样子。

我其实比较欣赏苹果的那种半透明设计风,比如这样的:

分享一个非常不错的页面组件库

大家感兴趣可以看苹果的设计手册:https://developer.apple.com/design/human-interface-guidelines/

同时我也对 Material Design 中的一些光影理念比较推崇,但并不太喜欢原生的 Material Design,比如这样的:

分享一个非常不错的页面组件库

我个人觉得这种原生的 Material Design 有点用力过猛,显得有些沉重。

相比之下,目前的一些 Element UI、Ant Design 则算是吸收了二者的一些优点,提供了一些 UI 组件,比如这样的:

分享一个非常不错的页面组件库

这种设计风格显得没有 Material Design 那样厚重,也吸取了一些 Apple Design 的风格,另外一些光影效果拿捏也挺不错的。

然而,这些设计还是没有达到我理想中的样子。

比如说,卡片的一些设计、边缘轮廓的一些设计,总让我感觉没有那么清爽。

后来,直到我用了一款梯🪜子软件,它是基于一个叫做 STISLA 的 UI 框架设计的,整体风格是这样的:

分享一个非常不错的页面组件库
分享一个非常不错的页面组件库

一眼看过去,爱了爱了,看起来,它借鉴了 Material Design 的一些光影设计理念,同时又不显得那么厚重,一些布局、卡片和文本框的轮廓也显得很明晰,另外一些配色、图标的样式整体也给人一种清爽的感觉,总之我个人非常喜欢。

这个 UI 框架的名字叫做 STISLA,其官网是:https://getstisla.com/,它是基于 BootStrap4 编写的,很可惜的是,它现在没有提供 Vue、React 的支持,所以使用起来暂时还不能完全组件化,不过里面的一些 class 可以直接拿来用,就像使用 tailwind 一样。

STISLA 现在是完全开源的,其 GitHub 仓库是:https://github.com/stisla/stisla,使用的话直接引用其中的 CSS 即可,这里就不再赘述了。

另外关于更多的组件,大家可以到官方 Demo 示例页面来体验,链接是:https://demo.getstisla.com/,这里简单列举几个组件。

头像:

分享一个非常不错的页面组件库

文章列表:

分享一个非常不错的页面组件库

统计图表:

分享一个非常不错的页面组件库

用户信息:

分享一个非常不错的页面组件库

表单:

分享一个非常不错的页面组件库

表格:

分享一个非常不错的页面组件库

不得不说,每个版面我都觉得非常赏心悦目!感兴趣的就去官网看看吧。

好啦,以上就介绍这么多啦,大家感兴趣的话就快快用起来吧~



分享一个非常不错的页面组件库

End

「进击的Coder」专属学习群已正式成立,搜索「CQCcqc4」添加崔庆才的个人微信或者扫描下方二维码拉您入群交流学习。


分享一个非常不错的页面组件库

看完记得关注@进击的Coder
及时收看更多好文
↓↓↓

崔庆才的「进击的Coder」知识星球已正式成立,感兴趣的可以查看《我创办了一个知识星球》了解更多内容,欢迎您的加入:


分享一个非常不错的页面组件库


原文始发于微信公众号(进击的Coder):分享一个非常不错的页面组件库

链接:https://bbbe.top/archives/410.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。
本网站使用者因为违反本声明的规定而触犯中华人民共和国法律的,一切后果自己负责,本网站不承担任何责任。
本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。
本文仅供学习参考,请勿用于违法用途。 若根据文章内容操作遭受任何损失,请自行承担责任。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>