Tailwind CSS 驱动的 UI 组件:Svelte 生态中的杰出之作

发表时间: 2023-09-07 12:34

Svelte 是一个新兴的前端框架,组件库不多,今天介绍一款 Svelte 移动端的组件库。

关于 STDF

STDF 是一个移动端的 UI 组件库,主要用来开发移动端 web 应用。和我之前介绍的很多 Vue 组件库不一样,STDF 是基于近来新晋 js 框架 Svelte 开发的,Svelte 是一个和 Vue / React 类似的 JavaScript 框架,也就是说,这套组件库是专为 Svelte 打造的。

Svelte 简洁语法,主要是让原生 JS 代码有了响应式的能力,而且打包后的 web 应用很小,特别适合开发移动应用,而 Tailwind 又是一个优雅的 CSS 框架,有兴趣的小伙伴可以前去了解学习。STDF 组件库基于 Svelte 和 Tailwind 打造,取其优点,质量很高,本文会向大家介绍它。

为什么叫 STDF

STDF 作为国人开发的组件库,名字虽然简单,但作者也赋予了一些有意思的寓意:

常规解释:S 代表 Simple(简单),T 代表 Thin(轻量),D 代表 Design(设计),F 代表 Fast(快速),STDF 代表一个使用简单、体积轻量、设计友好、开发快速的组件库。

非常规解释:S 和 T 分别代表 Svelte 和 Tailwind,因为 STDF 是基于 Svelte 和 Tailwind 的。DF 可以看成诗人杜甫,不像李白那么浪漫飘逸,他注重的是实用性与易用性,这也是 STDF 的设计理念。希望每一位使用 STDF 的开发者都能写出诗一般的代码。

— 作者关于 STDF 名称的阐述

技术特性

  • 简单:使用 Svelte 语法编码简洁迅速。组件源码逻辑清晰、简单易懂、中英注释详细,查看源码、修改逻辑也可以得心应手
  • 轻量:源码体积小巧,无三方依赖。基于 SvelteTailwind 编译产出的代码在体积上也优势明显,这在移动端显得尤为重要
  • 设计优雅:针对移动设备优化设计与交互,使用友好、高效、灵活。支持通过简单配置定制颜色系统、圆角风格、亮暗模式等
  • 快速:无运行时,无虚拟 DOM,无烦杂的 CSS 代码,状态管理简单轻快。编码过程、编译处理、线上运行都快了起来

组件列表

通用组件(5)

  • 按钮 Button
  • 底部浮窗 BottomSheet
  • 图标 Icon
  • 遮罩 Mask
  • 弹出层 Popup

布局(4)

  • 分割线 Divider
  • 网格 Grids
  • 占位符 Placeholder
  • 骨架屏 Skeleton

导航(6)

  • 索引栏 IndexBar
  • 导航栏 NavBar
  • 分页 Pagination
  • 步骤条 Steps
  • 标签栏 TabBar
  • 标签页 Tabs

数据输入(11)

  • 动作面板 ActionSheet
  • 异步选择器 AsyncPicker
  • 日历 Calendar
  • 复选框 Checkbox
  • 输入框 Input
  • 选择器 Picker
  • 单选框 Radio
  • 评分 Rate
  • 滑块 Slider
  • 开关 Switch
  • 时间选择器 TimePicker

信息展示(7)

  • 头像 Avatar
  • 徽标 Badge
  • 单元格 Cell
  • 通告栏 NoticeBar
  • 进度条 Progress
  • 进度环 ProgressLoop
  • 轮播 Swiper

反馈(4)

  • 对话框 Dialog
  • 加载 Loading
  • 弹框 Modal
  • 轻提示 Toast

开发上手体验和建议

Svelte 是近年来新兴的一款前端框架,不过目前生态还不是特别丰富,STDF 是其中的一款质量非常高的 UI 组件库,无论是组件颜值、代码和用法都非常优雅。

我之前也推荐过很多 PC 端 Vue 组件库,移动端相对较少,STDF 的作者也道出了原因,这是因为移动端一般面向 C 端用户,对产品的性能、易用性和可用性要求很高。所以做好移动端的产品,需要花费大量精力。

Svelte 和 Vue 对比的几个主要特点:

  1. 性能:Svelte 通过编译时直接转换为较为精简的 JavaScript 代码,避免了运行时的虚拟 DOM 操作,所以在性能上更胜一筹。Vue 需要运行时的虚拟 DOM
  2. 大小:Svelte 生成的代码体积更小,对页面加载速度影响较小。Vue 的运行时库还是有一定代码量的
  3. 编程方式:Svelte 更类似于编译型语言,在编写组件时就确定好了模板、逻辑和样式。Vue 属于典型的 MVVM 框架,需要在组件选项中配置模板、逻辑和样式
  4. 学习难度:Svelte 的 API 更少,语法更简单直接,上手较快。Vue 具有更完整的框架功能,学习曲线更陡峭
  5. 生态:Vue 的生态更加丰富成熟,组件、工具、资源等支持都更多。Svelte 生态还在增长中
  6. 兼容性:Vue 可以兼容到 IE11,兼容性更好。而 Svelte 需要较新版本浏览器

综合来说,如果追求极致的性能表现,就可以选择 Svelte。如果需要生态完整、主流框架,Vue 仍是一个不错的选择。

STDF 这套组件库就凝聚了作者的很多经验,让我们开箱就可以直接使用,节省了大量的开发时间,让我们把精力放在业务上。更小更快的特点,让 STDF 这套组件库特别适合用来开发一些移动端相对简单的业务场景,特别是如果你觉得使用 Vue 或者 React 既麻烦打包又大,写原生 JS 又费时间的话,真的可以考虑用这套 Svelte 的组件库。

安装使用

在已有配置好 SvelteTailwind 的工程的情况下,我们可以直接安装:

npm i stdf -D # 或者pnpm i stdf -D

然后在 Svelet 中使用:

<script>import { Button } from 'stdf';</script><Button>默认</Button>

更详细的使用方法,可以查看 STDF 官网的文档,文档和代码例子写得很详细易懂。

免费开源说明

STDF 是一款基于 SvelteTailwind CSS 开发的移动端 web UI 组件库,源码基于 MIT 开源协议托管在 Github 上,而 Svelte 和 Tailwind CSS 同样是 MIT 开源项目,所以我们可以免费用于商业项目,也可以二次开发。

最后强调一下,之前我分享了很多 Vue 的组件库,但这是一个 Svelte 的组件库,不能在 Vue.js 上使用。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

STDF - 基于 Svelte 和 Tailwind CSS 打造的移动 web UI 组件库,Svelte 生态里不可多得的优秀项目|那些免费的砖