做百度网站分录,网站建设齐齐哈尔,互联网保险公司有哪几家,网页设计入门软件有哪些Svelte 是一个新兴的前端框架#xff0c;组件库不多#xff0c;今天介绍一款 Svelte 移动端的组件库。
关于 STDF
STDF 是一个移动端的 UI 组件库#xff0c;主要用来开发移动端 web 应用。和我之前介绍的很多 Vue 组件库不一样#xff0c;STDF 是基于近来新晋 js 框架 S…
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 语法编码简洁迅速。组件源码逻辑清晰、简单易懂、中英注释详细查看源码、修改逻辑也可以得心应手轻量源码体积小巧无三方依赖。基于 Svelte 与 Tailwind 编译产出的代码在体积上也优势明显这在移动端显得尤为重要设计优雅针对移动设备优化设计与交互使用友好、高效、灵活。支持通过简单配置定制颜色系统、圆角风格、亮暗模式等快速无运行时无虚拟 DOM无烦杂的 CSS 代码状态管理简单轻快。编码过程、编译处理、线上运行都快了起来
组件列表 按钮 Button 底部浮窗 BottomSheet 图标 Icon 遮罩 Mask 弹出层 Popup 分割线 Divider 网格 Grids 占位符 Placeholder 骨架屏 Skeleton 索引栏 IndexBar 导航栏 NavBar 分页 Pagination 步骤条 Steps 标签栏 TabBar 标签页 Tabs 动作面板 ActionSheet 异步选择器 AsyncPicker 日历 Calendar 复选框 Checkbox 输入框 Input 选择器 Picker 单选框 Radio 评分 Rate 滑块 Slider 开关 Switch 时间选择器 TimePicker 头像 Avatar 徽标 Badge 单元格 Cell 通告栏 NoticeBar 进度条 Progress 进度环 ProgressLoop 轮播 Swiper 对话框 Dialog 加载 Loading 弹框 Modal 轻提示 Toast
开发上手体验和建议
Svelte 是近年来新兴的一款前端框架不过目前生态还不是特别丰富STDF 是其中的一款质量非常高的 UI 组件库无论是组件颜值、代码和用法都非常优雅。
我之前也推荐过很多 PC 端的 Vue 组件库移动端相对较少STDF 的作者也道出了原因这是因为移动端一般面向 C 端用户对产品的性能、易用性和可用性要求很高。所以做好移动端的产品需要花费大量精力。
综合来说如果追求极致的性能表现就可以选择 Svelte。如果需要生态完整、主流框架Vue 仍是一个不错的选择。
STDF 这套组件库就凝聚了作者的很多经验让我们开箱就可以直接使用节省了大量的开发时间让我们把精力放在业务上。更小更快的特点让 STDF 这套组件库特别适合用来开发一些移动端相对简单的业务场景特别是如果你觉得使用 Vue 或者 React 既麻烦打包又大写原生 JS 又费时间的话真的可以考虑用这套 Svelte 的组件库。
在已有配置好 Svelte 与 Tailwind 的工程的情况下我们可以直接安装
然后在 Svelet 中使用
更详细的使用方法可以查看 STDF 官网的文档文档和代码例子写得很详细易懂。
免费开源说明
STDF 是一款基于 Svelte 和 Tailwind CSS 开发的移动端 web UI 组件库源码基于 MIT 开源协议托管在 Github 上而 Svelte 和 Tailwind CSS 同样是 MIT 开源项目所以我们可以免费用于商业项目也可以二次开发。
最后强调一下之前我分享了很多 Vue 的组件库但这是一个 Svelte 的组件库不能在 Vue.js 上使用。
原文链接https://www.thosefree.com/svelte-stdf
