我的 UI 组件库发布了！

[dufu1991]

前言

花了一年多的业余时间做了个移动 web 组件库 - STDF 。在此特别感谢我的老婆大人，承担了家里的很多杂事，才让我有时间做这个东西。

站点： https://stdf.design

GitHub： https://github.com/dufu1991/stdf

欢迎到 GitHub 上提 Issue 和 PR ，使它强大，使它更好！可以帮助到更多的人。

我想说一句，使用 Svelte 和 Tailwind 写代码真的是太爽了！

为何写这个组件库

首先最重要的是补充 Svelte 生态。

关于 UI 组件库，PC 端有很多优秀的产品，但是移动端并没有能与 PC 端比肩的产品，这是由于移动端的特殊性导致的。移动端产品大多数是 To C 业务，这就要求对组件库的灵活性有更高的要求。在设计组件 API 的时候，需要有更多的参数支持可供配置，但又不能设计得太过复杂。而在 UI 设计方面，不能有太多的个性化设计，这样才能达到组件的复用性。

市面上也有很多移动端的组件库，但是使用下来还是有很多痛点，比如一些组件库的设计风格太过个性化，导致组件的复用性不高；一些组件库的可配置 API 太少，无法通过简单的 API 配置出符合业务需求的组件；一些组件库的文档太过高深或简陋，使初上手的人很难理解组件的使用方法；一些组件库的文档和 Demo 中英混杂，难以查阅；一些组件库的 Demo 太少或太简陋，高频使用时无法直接复制使用，降低开发效率等。

在体验过 Svelte 和 Tailwind 之后，发现使用它们开发真的是非常舒服，所以就想着能不能把它们结合起来，做一个移动端的 UI 组件库。这样的话，就能够在移动端也享受到 Svelte 和 Tailwind 带来的开发体验了。

适用场景

在移动端有一种业务场景，应用不算复杂，使用 Vue 或者 React 开发其实会显得「大材小用」了，可能整个应用打包之后的 JS 体积也就几十 KB ，但是使用 Vue 或者 React 开发，这两个库的基础大小就超过了几十 KB ，这样就得不偿失了，而且移动端 To C 应用体积过大是非常不可取的。但是使用纯原生 JS 开发，又会显得开发效率低下，这个时候 Svelte 就是一个很好的选择，它的简洁语法，使原生 JS 代码有了响应式能力。

关于开源

除了 IT ，这个世界上应该没有任何一个行业会有这样一群人，他们把自己的时间和精力投入到一个项目中，然后把这个项目毫无保留地免费开源出来，让全世界的人都可以免费使用，而且还会不断地维护和更新这个项目，这就是开源社区的魅力所在。我崇拜这些改变世界的人，我也想成为其中的一员，哪怕只是一粒尘埃。

不要去讨论哪些什么国内开源环境糟糕之类的话题，把自己的想法 code 出来，然后开源出来，可能不完善，但有人用有人提 issue ，它就是有价值的。开源是一种精神，不需要任何理由，只要你想做，就去做。

结束

前段时间，一个阿里的朋友看到我在写这个组件库，不由发出感叹，还在卷组件库呢！是啊，2023 年了竟然还有人在写组件库。但 STDF 还是有一些非常适合的场景，而且它拥有足够灵活的 API 可供配置，有丰富的示例展示。对比大厂的组件库，它很弱小但也有其存在的价值。

面对来势汹汹的 AI ，写代码这种倾向于固定逻辑的工作可能是最先被 AI 取代的，但是我还是会继续写代码，因为我喜欢这种创造的过程，我喜欢这种思考的过程，我喜欢这种不断学习的过程，我喜欢这种完成一个功能的成就感。

创意，是 AI 无法取代的。

昨晚和一群高中同学吃饭，他又提我写书的玩笑，可惜的是，我的文字细胞已经死了。换个角度，如果将这个组件库的站点、文档、示例全部打印出来，牵强一点，也可以算是一本书了吧！

对世界永远保持敬畏与好奇，生命不息，折腾不止！希望自己永远年轻，永远热泪盈眶。

此文由 GitHub Copilot 辅助完成，但是我并不想感谢它。

[leoQaQ]

首页有个 bug ，滑到底部顶部会一直闪烁

[wingkwanli888]

不错啊，没记错的话 Svelte 社区好像还没有符合中国人使用习惯的移动端开源 UI 库，这应该是第一个

[zyj1022]

顶一个！！

[qiayue]

看起来不错。
起步教程那里，需要能够写一篇完全 step by step 的教程给后端看，完全不会也不懂前端工程搭建，看到你的文档也不知道该怎么操作。

[296727]

首页的 fps 只有 4 ，卡的不行

[linauror]

这个默认蓝色有点刺眼的感觉

[296727]

https://imgur.com/a/g2j2Gma

[andrew2558]

提个建议：组件页面，可以将组件的展示突出些(在屏幕中间，占用大部分空间)，而代码可以收缩起来，当用户有需要时再手动展开代码

[jerry12547]

首页那个 3d 动画有点卡

[yangheng4922]

好看 ，动画也很丝滑

[aper]

CPU 10700 打开首页 CPU 占用 100%

[xwayway]

不错不错

[yikeshuo]

赞赞

[17681880207]

Open Srouce 对程序员而言，就是精神上的桃花源，美好又神圣~相信每一个 Star 和 Issue 都会给每一个开源作者内心无比的满足。

如果我也可以像作者一样,那我觉得这件事情...

[AnroZ]

作为外行，看着还以，点赞

[LiuJiang]

牛批，赞赞赞，很棒！支持下！

[Laobai]

老哥，牛批！！！

[iapplebear]

赞

[luoxiang]

niubi

[imchenlong]

非常不错。

[1044523901]

人手一个 ui 库啊，不错~

[KevinDo2]

你组件库里的开关组件动效好爽好解压啊，我刚刚切换了几十次

[tracerking]

不错不错 最近我也在搞基于 svelte 的 ui 组件 没想到已经出来了

[llo]

赶紧非常不错

[BeijingBaby]

看了一下很赞，下期 dev.com.cn 周报推荐一下
（个人原因停更几期，马上恢复更新）

[IamJ]

赞。楼主这文档网站是用什么搭的？

[TaoLoading]

OP 牛逼。另外官网有点小 bug ，当顶部操作栏与“优势 & 目标”的第二行头部位置重叠时，会有闪烁

[chenpbh]

dota

[dufu1991]

@leoQaQ 桌面端还是移动端？

[dufu1991]

@296727 首页因为有 3D 模型，开始渲染的时候会比较吃 CPU 和 GPU ，确实会掉帧，加载完成后还好。不过一般首页也就第一次打开会看一下，后续都主要是在组件页面。

[dufu1991]

@qiayue 后续考虑一下

[dufu1991]

@andrew2558 我开发的个人喜好是，找到 Demo 中符合自己的部分，直接复制代码使用，不用再去查看具体 API 。所以 STDF 的 Demo 写的非常多，多到有点罗嗦的地步。所以我认为代码部分很重要。

[dufu1991]

@tracerking 可以搞桌面端的，那才是大工程。

[dufu1991]

@IamJ 就是 Svelte 和 Tailwind ，只是搭建得很早，当时 Vite 还不成熟，打包使用的还是 Rollup 。Demo 用的就是 Vite 。

[IamJ]

@dufu1991 #34 哦哦，里面的代码示例和 api 是通过什么方案生成的？最近内部要搞个类似的

[assclb]

已 star

[dufu1991]

@IamJ 先用插件将 Markdown 转为 HTML ，再用 hljs 将 HTML 高亮。

[azui999]

看的晕了,

[WGinit]

点赞👍，看到了前端老哥的情怀

[intmax2147483647]

一个人做的吗

[akring]

网站没做宽屏适配的吗，34 寸带鱼屏看起来有点诡异

[buxudashi]

但是一旦使用，就得又定制。 这一弄组件库就得改，改起来的成本 也不小。

[beginor]

赞！

开源传万世，因有我参与！

[dreamramon]

最好有个教程能让后端的同学直接开工。。。

[earthmessenger]

组件文档标题旁的句子挺有趣的

[yamedie]

终于看到一个 Material Design 风格以外的“完成度足够高的 Svelte 组件库”，收藏了，感谢楼主的付出！

-----

但还是想杠一下关于开源的那段话，愿意开源的职业应该有很多种吧，学者、作家、教师、医生…… 另外 IT 也有相当一部分人达不到有作品可以开源的水平（他们只会 CURD 或者调包），还有很大一部分人闭源赚钱……
（我的意思是没必要太刻意的把 IT 升格 XD ）

-----

草草看了一下，关于组件库提点小建议：
1 、很多尺寸的定义写在 script 里，比如在 TabBar 的 labels 里定义 size: 20 ，这个怎么适配不同分辨率的移动设备？比如我用 iPad Mini 屏幕宽度有 768px ，看这个 TabBar 时，图标大小仍然是很小的 20px ，四个图标之间有巨大的空档。我不知道 postCSS 的 px2rem 插件方不方便跟这个组件库集成起来……（怎么实现 px 自动转换成 rem 或 vw 单位，以适配多种屏幕尺寸？）
2 、Loading 组件竟然有十几种之多，type="1_1"这种命名方式有点不严谨，以后扩展只能是 1_18 或 2_1 这样了吗，能不能尽量把它们语义化
3 、Picker 不支持点击选区外的选项来让它被选中，我只能拨动来选中某一项，这类交互还得多参考一下 Vant 之类的组件库

[ashong]

demo slider 不工作

[Imindzzz]

可能还是因为移动端定制化要求比较高，导致没啥组件库

[dufu1991]

@linauror
@dufu1991
@earthmessenger
@TaoLoading 是不是 iOS 的 safari ？

[ohwind]

很棒！希望不会有人端起碗吃饭放下碗骂娘

[nnegier]

很丝滑哇

[dufu1991]

@TaoLoading 已修正

[dufu1991]

@akring 已经对首页做了宽屏限制。

[dufu1991]

@dreamramon 正在计划中

[dufu1991]

@ashong 我看了中英文都正常。

[wananzz]

看了下，是挺不错的，蹲个 Figma 文件…

[oyjt]

很不错的组件库，每个组件都包含了多种丰富的使用样式，很强大也很实用。支持作者，已 Start

[jigi330]

666

[QKgf555H87Fp0cth]

国内开源还是比较差点。大家压力都大，又比较少赞助，贡献的人也少。

有的是，为了 KPI 。用过他们的，半成品...，标签的 CSS 没法传参数进去，只能放弃，像 MUI 就很完善。
有的是，工作刚好需要用到，所以开源，后面不需要用到了，就年久失修。
有的是，官方自己都不更新，比如又拍云。
有的是，提交 Issue ，说暂不支持。
有的是，申请两次 QQ 群，两三天都还没审核。
有的是，提交了 Issue ，都没合并也没拒绝。

有翻译过一点点，比如 MediaWiki 、PHP 、Laravel 、MUI 等，也 GitHub 赞助某人，也自己写点自己用的库，不过还是力量薄弱，跟玩似的。还是得靠你们。

[Aloento]

非常不错；能看出来 OP 不是专业做设计的（

[luodan]

不错！已收藏。发现一个 bug, 日期选择框，Range selection, 选完以后，开始结束日期都向前移动了一天。

[chaoschick]

没有 table 呢

[iTakeo]

轮播图有点 bug ，动画没结束再左右滑动，图片会跳动

[iTakeo]

时间 picker ，先选择日期。再选择月份，结果日期默认归 1 了，这点不合理；而且选中 2 月，再选择年份也归 1 了。虽然是为了判断闰月这种，但是我觉得交互逻辑可以再优化一下。

[TomPig0216]

@17681880207 泰酷辣！

[akring]

@dufu1991 #53 主页还行，文档页面在宽屏状态下全跑到左边去了，还是需要调整一下

[MXMIS]

不错，但是我从演示站首页往下滑第一次会有卡顿

[turan12]

楼主牛逼。我准备尝试一下，到时候做好了告诉 op

[yushiro]

默认的颜色饱和度太高了，特别是那个蓝色，看的刺眼。

[Socrazy]

牛逼。
整体很棒，就是默认配色确实有点刺眼睛。
借题请教一下 OP ，移动端示例里面 Safari 禁用缩放是用的什么代码？

[ashong]

@dufu1991 demo 的 slider 都是不能拖动的吗？ 我试了 firefox 和 edge 都无法拖动，

[chihiro2014]

站点感觉很卡顿？

[sechi]

第一次接触 svelte 的组件库，还不错！支持 op

[Azad01]

太赞了！对前端工作者很友好

[dufu1991]

@intmax2147483647 是啊，业余时间太少了，周期有点长。

[FightPig]

不错，上次发现一个 sevlte 的 ui ，BeerUi 也不错，没想到又有新的出了

[dufu1991]

@chihiro2014 首页有 3D 模型，渲染的时候可能比较吃性能。但是多数时候应该是在组件页面。

[dufu1991]

@yushiro 这只是默认的颜色配置，你们自己的项目肯定是要自己配一套颜色系统的。

[Mindzy]

更好奇首页的 3D 模型怎么做的，来个教程

[majunbo]

github 上的 demo 二维码扫码出来的地址：
1 、步骤条 太慢了；
2 、实例主页无法向下滚动（原因不知道是点击哪个组件后导致的，测试了几次没有发现规律）；
3 、日历示例选择的时候有时选不中，也可能是慢；

安卓手机，微信 8.0.35 扫码后的结果，其他没仔细看，希望楼主有时间再测试一下。

[zhw2590582]

这个白底蓝色太刺眼了啊

[qbhy]

牛逼，已点赞。
顺手发一下我写的 Golang 框架 github.com/goal-web/goal ，目前正在写文档

[dufu1991]

@majunbo 1 、步骤条同一个页面的 Demo 数据，加载渲染可能会有点慢，对比其他页面也就大概 1S 左右的区别，正常页面不会在同一个页面同时加载如此多的 Step 。
2 、在有弹出层的页面（如 Dialog ）弹出内容，不要关闭，此时利用系统返回上一页就会出现，原因是在使用到 Popup 组件的时候，为了防止滚动穿透，在有弹出内容的时候，默认阻止了 body 滚动，弹出内容关闭时又恢复。如果不关闭弹出层使用系统级返回上一级，此时 body 是禁止滚动的。
3 、我在 iOS 的微信浏览器内未发现，MIUI 的 Android 内未发现，麻烦发一下具体手机型号和系统版本。微信魔改的 X5 内核与主流的 web 标准相差越来越远，性能方面也是堪忧，只能发现问题针对性地修改。

[dufu1991]

@Mindzy 打开 F12 看标签名称应该看得出来。

[dufu1991]

@ashong 你是在桌面端吗？有没有注意到一行字「 Slider 区域绑定了 Touch 事件，请直接在移动设备或通过开发者工具模拟移动设备预览。」

[dufu1991]

@yamedie 感谢，这 3 点建议都很中肯，我仔细研究一下。

[dufu1991]

@chaoschick 移动设备上可是区域这么小，table 好像没有一个好的展示方式和适用场景，其他移动端组件库好像也没怎么看到 table 组件。

[dufu1991]

@iTakeo 确实是考虑到闰月的情况，比如先选择 0331 ，再选择 2 月，日就会恢复到 1 。出于两点考虑，技术层面，不用单独对每一个年每一个月份单独处理，逻辑处理上会简单很多；更重要的是从交互层面考虑，大多数情况，重新选择月份时日是不会改变的，这就会给用户一个心理预期，但是当先选择 0331 ，再选择 2 月，如果判断是否是闰月之后，自动显示 28 或 29 ，粗心的用户会根据心理预期而忽略了日的变动，索性让其区别更加明显，「强迫」其重新选择。这是我的考虑。

[dufu1991]

@MXMIS 你滑动的区域是不是在 3D 模型内？那是模型区域，不属于文档内滚动。

[dufu1991]

@Socrazy 应该有很多方式，我用的是
```javascript
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
```

[dufu1991]

@dufu1991 有很多 Loading 效果很接近，语义化出来命名可能会很长，这样使用起来反而不方便，现在这种情况只要在 Demo 里面看到需要的，直接写个编号会更方便。而且后续还会增加，可能会达到数十种甚至上百种，语义化在命名和使用上反而显得累赘。或者您有什么更好地建议？

[dufu1991]

@yamedie 有很多 Loading 效果很接近，语义化出来命名可能会很长，这样使用起来反而不方便，现在这种情况只要在 Demo 里面看到需要的，直接写个编号会更方便。而且后续还会增加，可能会达到数十种甚至上百种，语义化在命名和使用上反而显得累赘。或者您有什么更好的建议？

[iTakeo]

@dufu1991 时间 picker 我也写过，我的处理方法是尽量减少用户的负担，假如用户选择了 3 月份的 30 ，后面又选择了 2 月，就默认跳到 28 ，不归 1 ，如果用户又切回了 3 月，再默认回到 30

[majunbo]

@dufu1991 荣耀 50 ，版本号 7.0.0.135 ，安卓版本 12

[leoQaQ]

@dufu1991 桌面端，bug 已经无了

[yuedanwork]

感谢 op 的组件库，看到该项目的当天就已在我的 Chrome 插件项目用上了

一直都在找一个比较好用的轻量的基于 tw 的 svelte 组件库（因为本身也不是大项目 只需要少数的组件即可），op 这个库解决了我的需求。在此感谢 op

项目地址： https://github.com/yuedanlabs/icp-query-extension

Chrome 插件地址： https://chrome.google.com/webstore/detail/icp-query-extension/plmfnmaihcmijdanpbondfejclejejfa

同时插件昨天更新了部分功能，也欢迎感兴趣的小伙伴体验

使用下来对组件库也有一些需要完善的地方，未来有时间我也会考虑根据自己的需要贡献一点代码，希望 op 的项目在 svelte 的生态中走的更远

[dufu1991]

@yuedanwork 确实需要实际项目来验证使用是否方便。

[dufu1991]

@dreamramon 最近新增了个脚手架，可以尝试一下。

[dufu1991]

@ashong 增加了指针事件，鼠标也可以操作

[ads1029]

太强了！ 总觉得国内对 svelte 和 tailwind 的态度不咸不淡，真心感激 op 的付出，希望能有更多人加入这个社区吧