README_CN.md

S T D F

English • 网站

介绍

基于 Svelte 与 Tailwind 的移动 web 组件库。

Simple • Thin • Design • Fast

简 单 • 轻 量 • 设 计 • 快 速

特性

• 🚀 无运行时，无虚拟 DOM，线上运行更快。
• 🧰 API 丰富，轻松配置出符合需求的组件样式。
• ✍ 基于 Svelte 与 Tailwind，编码迅速轻松。
• 🍭 支持暗模式与多主题配置。
• 📖 提供丰富的中英文文档和组件示例。
• 🌍 支持国际化，已内置 60+ 种语言包。
• 🫰 交互友好，动画参数可配，可自定义主题。
• 🤝 支持 Tailwind 类库，如 UnoCSS。
• 🫡 无三方依赖，无需担心三方库版本与安全问题。
• 📦 支持按需引入，减少打包体积。
• 🪜 配套脚手架，快速创建工程。
• 🔗 配套 SVG 合并插件，快速合并 SVG。
• 🍺 配套 IDE 插件，快速查看组件 API。
• 🔧 Props 支持类型提示与检测。

快速上手

安装

已有配置好 Svelte 与 Tailwind 的工程，直接安装。

pnpm i stdf -D
# or
npm i stdf -D
# or
bun i stdf -D

使用

<!-- Button Demo -->
<script>
import { Button } from 'stdf';
</script>

<Button>默认</Button>

😓 无工程？创建工程

可以尝试使用 create-stdf 快速创建工程。

pnpm create stdf
# or
npm create stdf@latest
# or
npm init stdf@latest
# or
npx create-stdf@latest
# or
bun create stdf

或者自行创建 Vite 工程，并配置 Tailwind CSS 和 STDF 使用到的配置。参考 Vite & Tailwind CSS & STDF。

预览

扫描二维码访问移动端 Demo：

快速尝试

可以到 StackBlitz 的 STDF Demo 快速尝试 STDF。

反馈与交流

推荐使用 GitHub Issues 进行直接有效地反馈与交流，贡献代码就更好了。也可以选择以下几种方式：

• QQ 群
• QQ 频道
• Discord
• Discussions

贡献者

赞助者

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源。

Star 历史