随意换装-基于 Svelte 与 Tailwind 的组件库 STDF 支持多主题配置

[dufu1991]

一、简介

STDF 是一个基于 Svelte 与 Tailwind CSS 的移动 web 组件库。

官方地址： https://stdf.design 。

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

不知不觉 STDF 开源半年有余，截止 2023-11-04 ，作为个人维护的开源项目，GitHub 上已有 460+ star ，感谢大家的支持。在这半年的时间里，STDF 一直在不断地更新迭代，目前已经发布了 0.4.0 版本，本次更新支持了多主题配置，让开发者可以自由配置多套主题。详情请参考 主题配置、色彩、主题生成器。

虽然有一定的 star ，说实话使用率和参与度并不高，希望大家能多多尝试使用，多多提 issue ，多多提 PR ，让 STDF 暴露更多问题，也能更多地满足大家的需求。

是否是重复造轮子？据我所知，目前基于 Svelte 的开源组件库并不多，尤其是移动 web 更是少之又少，所以 STDF 还是有一定的存在价值。而且即使对标大厂开源的移动 web 组件库，STDF 也有一定的优势。

二、主题配置

此次更新比较特别的是专门设计了一个主题生成器，可以通过配置各项颜色，并实时预览效果，最后生成主题配置文件，方便开发者使用。

作为一个现代化的组件库，我认为完美支持暗黑模式是一个基本的要求，所以 STDF 一开始的设计思路就支持亮暗模式，此次更新将切换方法放置于 NPM 包内，开发者将会更加方便。

三、文档站点

作为开发者，我认为一个易用、简洁、描述清晰的文档站点是一个组件库仅次于组件源码的重要部分，所以 STDF 非常重视文档站点的体验。

日常开发浏览一些组件库站点时，总是会有一些不爽的地方，有些文档一上来就体验价值观，为你赋能，给你加持......，作为单纯的程序员，我还是喜欢接地气的简单直接；有些文档虽然是中文文档，看着看着又掺杂着一些英文，或者 Demo 还是英文的；有些文档的结构层次不够清晰，查找起来不够方便；有些文档没有配置快捷搜索和纯键盘操作，也不方便追求效率的键盘党；有些文档写的内容太过深奥，并没有站在新手的角度去描述，难以理解；有些文档的 Demo 写得太省略，并没有很好地展示各项 API 的使用场景等等。

考虑到以上问题，我在写文档的时候就特别注意这些点，希望给大家一个良好的文档浏览体验。如果大家发现什么问题或者有什么建议，欢迎提意见。

四、配套工具

STDF 也提供了一些配套工具，方便开发者使用。

1. 快速创建 STDF 项目的脚手架 create-stdf。
2. 自动将 svg 图标合并为 SVG symbol 的 Vite/Rollup 插件 rollup-plugin-stdf-icon。
3. 不用离开编辑器，快速预览 STDF API 的 VS Code 插件 STDF for VS Code。

五、未来计划

继续丰富组件库的基础组件，并考虑增加一些常用的业务组件。

目前 STDF 源码并未使用 TypeScript ，我原本计划在后续版本中逐渐将组件所有的 API 都按照 JSDoc 的规范修改注释，此方案是可以满足开发时优雅地代码提示的。前段时间社区有人提议使用 TypeScript ，我也在考虑中，但是目前还没有最终决定，欢迎大家提提自己的想法供参考。

马上 Svelte5 大版本就要发布了，之后我也会尽快适配 Svelte5 ，让使用 STDF 的开发者能够尽快享受到 Svelte5 带来的新特性。

如果大家对 STDF 这套组件库的 UI/UE 感觉还行的话，后续我会基于此修改逻辑层同步开发 React/Vue3 的版本，希望更多开发者参与进来。

欢迎大家各抒己见。

[happy32199]

大佬 cell 和 input 可以结合起来用吗？

[dufu1991]

@happy32199 你说的结合是指什么？把 Input 放在 Cell 里面吗？

[happy32199]

是的

[dufu1991]

@happy32199 怎么会有这种需求，Cell 一般用来做信息展示或者事件选项，实在要在里面放 Input 可以考虑插槽，Cell 目前支持 left 、right 、detail 三个地方使用插槽。

[happy32199]

@dufu1991 可以帮忙是一个 form 的示例吗？有 input select radio 这些 form 元素， 想自己整合下 全放到 cell 里的，但是弄得比较丑

[dufu1991]

你这种需求为什么会房子啊 Cell 呢？有 input select radio 这些不是应该写在页面上吗？