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

S T D F

[![NPM Version](https://flat.badgen.net/npm/v/stdf?color=cb3837)](https://www.npmjs.com/package/stdf) [![Github Stars](https://flat.badgen.net/github/stars/dufu1991/stdf?icon=github&color=202328)](https://github.com/dufu1991/stdf) [![License](https://flat.badgen.net/github/license/dufu1991/stdf)](https://github.com/dufu1991/stdf/blob/main/LICENSE) [![NPM Installs](https://flat.badgen.net/npm/dt/stdf?label=installs&icon=npm)](https://www.npmjs.com/package/stdf) [![NPM Minzip](https://flat.badgen.net/bundlephobia/minzip/stdf?label=minzip&icon=npm&color=d26027)](https://www.npmjs.com/package/stdf) [![NPM Dependency](https://flat.badgen.net/bundlephobia/dependency-count/stdf?label=dependency&icon=npm&color=7a4489)](https://www.npmjs.com/package/stdf)

English • 网站

# 介绍 基于 [Svelte](https://svelte.dev) 与 [Tailwind](https://www.tailwindcss.com) 的移动 web 组件库。 > **S**imple • **T**hin • **D**esign • **F**ast > 简 单 • 轻 量 • 设 计 • 快 速 # 特性 - 🚀 无运行时，无虚拟 DOM，线上运行更快。 - 🧰 API 丰富，轻松配置出符合需求的组件样式。 - ✍ 基于 Svelte 与 Tailwind，编码迅速轻松。 - 🍭 支持暗色模式。 - 📖 提供丰富的中英文文档和组件示例。 - 🌍 支持国际化，已内置 60+ 种语言包。 - 🫰 交互友好，动画参数可配，可自定义主题。 - 🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等。 - 🫡 无三方依赖，无需担心三方库版本与安全问题。 - 📦 支持按需引入，减少打包体积。 - 🪜 配套脚手架，快速创建工程。 - 🔗 配套 SVG 合并插件，快速合并 SVG。 - 🍺 配套 IDE 插件，快速查看组件 API。 # 快速上手 ## 安装 已有配置好 Svelte 与 Tailwind 的工程，直接安装。 ```bash pnpm i stdf -D # or npm i stdf -D ``` ## 使用 ```xml ``` ## 😓 无工程？创建工程 可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。（beta 版本） ```bash pnpm create stdf # or npm create stdf@latest # or npm init stdf@latest # or npx create-stdf@latest ``` 或者自行创建 Vite 工程，并配置 Tailwind CSS 和 STDF 使用到的配置。参考 [Vite](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project) & [Tailwind CSS](https://tailwindcss.com/docs/guides/vite) & [STDF](https://stdf.design/#/guide)。 # 预览 扫描二维码访问移动端 Demo： # 快速尝试 可以到 StackBlitz 的 [STDF Demo](https://stackblitz.com/github/dufu1991/demo-stdf) 快速尝试 STDF。 # 反馈与交流 推荐使用 [GitHub Issues](https://github.com/dufu1991/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/dufu1991/stdf/discussions) # 贡献者 # 开源协议 本项目基于 [MIT](https://github.com/dufu1991/stdf/blob/main/LICENSE) 协议，请自由地享受和参与开源。 # Star 历史 Star History Chart