[![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)

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 与 Tailwind 的移动 web 组件库。

Simple • Thin • Design • Fast

简单 • 轻量 • 设计 • 快速

特性

🚀 无运行时，无虚拟 DOM，线上运行更快；
🧰 API 丰富，轻松配置出符合需求的组件样式；
✍ 基于 Svelte 和 Tailwind，编码迅速轻松；
🍭 支持暗色模式；
📖 提供丰富的中英文文档和组件示例；
🌍 支持国际化，已内置 60+ 种语言包；
🫰 交互友好，动画参数可配，可自定义主题；
🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等；
🫡 无三方依赖，无需担心三方库版本与安全问题。

快速上手

安装

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

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

使用

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

<Button>默认</Button>

😓 无工程？创建工程

可以尝试使用 create-stdf 快速创建工程。（beta 版本，可能存在问题）

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

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

预览

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

开源协议

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

贡献者

Star 历史

<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=dufu1991/stdf&type=Timeline&theme=dark" />
<img alt="Star History Chart" width="100%" src="https://api.star-history.com/svg?repos=dufu1991/stdf&type=Timeline" />

README_CN.md 4.5 KB Historique Raw