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

这是「进击的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):分享一个非常不错的页面组件库

本站文章资源均来源自网络,除非特别声明,否则均不代表站方观点,并仅供查阅,不作为任何参考依据!
如有侵权请及时跟我们联系,本站将及时删除!
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
分享一个非常不错的页面组件库
这是「进击的Coder」的第 475 篇技术分享 作者:崔庆才 我对设计美学有一定执念,所以我在编写一些 UI 的时候会比较注重它的一些美观度、舒适度。 随……
<<上一篇
下一篇>>