[![Public STDF Status](https://github.com/any-tdf/stdf/actions/workflows/publish-stdf.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-stdf.yml) [![Releases Status](https://github.com/any-tdf/stdf/actions/workflows/releases.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/releases.yml) [![Sync Status](https://github.com/any-tdf/stdf/actions/workflows/sync-demo.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/sync-demo.yml) [![Public Create Status](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml) [![Public Icon Status](https://github.com/any-tdf/stdf/actions/workflows/publish-icon.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-icon.yml) [![Public VS Code Extension Status](https://github.com/any-tdf/stdf/actions/workflows/publish-vscode.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-vscode.yml) [![Sync Gitee Status](https://github.com/any-tdf/stdf/actions/workflows/sync-gitee.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/sync-gitee.yml) [![Releases Site](https://github.com/any-tdf/stdf/actions/workflows/releases-site.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/releases-site.yml) [![Releases Demo](https://github.com/any-tdf/demo-stdf/actions/workflows/releases-demo.yml/badge.svg)](https://github.com/any-tdf/demo-stdf/actions/workflows/releases-demo.yml) logo

S T D F

[![npm](https://img.shields.io/npm/v/stdf?logo=npm&label=stdf&style=for-the-badge&color=aeb5f4&logoColor=DCE4FD&labelColor=010319)](https://www.npmjs.com/package/stdf) [![GitHub stars](https://img.shields.io/github/stars/any-tdf/stdf?logo=github&label=star&style=for-the-badge&color=A1DAD7&logoColor=D9F8F2&labelColor=011918)](https://github.com/any-tdf/stdf) [![GitHub license](https://img.shields.io/github/license/any-tdf/stdf?logo=github&style=for-the-badge&color=B9C46A&logoColor=F3F3CB&labelColor=161901)](https://github.com/any-tdf/stdf) [![npm](https://img.shields.io/npm/dt/stdf?logo=npm&label=install&style=for-the-badge&color=FFCC33&logoColor=FFFDE8&labelColor=191301)](https://www.npmjs.com/package/stdf) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/stdf?logo=npm&label=minzip&style=for-the-badge&color=E29CD2&logoColor=F9D8ED&labelColor=190113)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/v/create-stdf?logo=npm&label=create&style=for-the-badge&color=ebb2ba&logoColor=FBDDDD&labelColor=190104)](https://www.npmjs.com/package/create-stdf) [![npm](https://img.shields.io/npm/v/rollup-plugin-stdf-icon?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/rollup-plugin-stdf-icon) [![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/STDF.stdf-vscode-extension?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGgKICAgICAgICBmaWxsPSIjRjBGQ0Q2IgogICAgICAgIGQ9Ik0zMC44NjUgMy40NDhMMjQuMjgyLjI4MWExLjk5IDEuOTkgMCAwIDAtMi4yNzYuMzg1TDkuMzk3IDEyLjE3MUwzLjkwMiA4LjAwNGExLjMzIDEuMzMgMCAwIDAtMS43MDMuMDczTC40MzkgOS42ODFhMS4zMyAxLjMzIDAgMCAwLS4wMDUgMS45NjlMNS4yIDE1Ljk5OUwuNDM0IDIwLjM0OGExLjMzIDEuMzMgMCAwIDAgLjAwNSAxLjk2OWwxLjc2IDEuNjA0YTEuMzMgMS4zMyAwIDAgMCAxLjcwMy4wNzNsNS40OTUtNC4xNzJsMTIuNjE1IDExLjUxYTEuOTgyIDEuOTgyIDAgMCAwIDIuMjcxLjM4NWw2LjU4OS0zLjE3MmExLjk5MyAxLjk5MyAwIDAgMCAxLjEzLTEuODAyVjUuMjQ4YzAtLjc2Ni0uNDQzLTEuNDY5LTEuMTM1LTEuODAyem0tNi44NiAxOS44MThMMTQuNDMyIDE2bDkuNTczLTcuMjY2eiIKICAgIC8+Cjwvc3ZnPgo=&label=extension&style=for-the-badge&color=c7f292&logoColor=F0FCD6&labelColor=0E1901)](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension)

English 网站

# 介绍 基于 [Svelte](https://svelte.dev) 与 [Tailwind](https://www.tailwindcss.com) 的移动 web 组件库。 > **S**imple • **T**hin • **D**esign • **F**ast > 简 单 • 轻 量 • 设 计 • 快 速 # 特性 - 🔥 完整支持 Svelte v5、Tailwind CSS v4 与 TypeScript。 - 🚀 无运行时,无虚拟 DOM,线上运行更快。 - 🧰 API 丰富,轻松配置出符合需求的组件样式。 - 🍭 支持暗模式与多主题配置。 - 📖 提供丰富的中英文文档和组件示例。 - 🌍 支持国际化,已内置 60+ 种语言包。 - 🫰 交互友好,动画参数可配,可自定义主题。 - 🤝 支持 Tailwind 类库,如 UnoCSS。 - 🫡 无三方依赖,无需担心三方库版本与安全问题。 - 📦 支持按需引入,减少打包体积。 - 🪜 配套脚手架,快速创建工程。 - 🔗 配套 SVG 合并插件,快速合并 SVG。 - 🍺 配套 IDE 插件,快速查看组件 API。 # 快速上手 ```sh pnpm create stdf ``` ```sh npm create stdf # 或 npm init stdf # 或 npx create-stdf ``` ```sh bun create stdf ``` ```sh yarn create stdf ``` # 预览 Demo 扫描二维码访问移动端 Demo: # 快速尝试 可以到 StackBlitz 的 [STDF Demo](https://stackblitz.com/github/any-tdf/demo-stdf) 快速尝试 STDF。 # 反馈与交流 推荐使用 [GitHub Issues](https://github.com/any-tdf/stdf/issues) 进行直接有效地反馈与交流,贡献代码就更好了。也可以选择以下几种方式: - [QQ 群](https://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=U8ZlXJ3KVpTI9oZzs1jBnyWc3gVA0h6Y&authKey=ScWu0nU9g8BqNsC7o2eYkESwgVDVz9vzGNZEb17MrEAay9%2F7bTkXDiLJRIzo2vrg&noverify=0&group_code=581073686) - [QQ 频道](https://pd.qq.com/s/fdd8incyr) - [Discord](https://discord.gg/DMkHu8GGre) - [Discussions](https://github.com/any-tdf/stdf/discussions) # 贡献者 # 赞助者 # 开源协议 本项目基于 [MIT](https://github.com/any-tdf/stdf/blob/main/LICENSE) 协议,请自由地享受和参与开源。 # Star 历史 Star History Chart