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

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)

简体中文 • Website

Introduction

Mobile web component library based on Svelte and Tailwind .

Simple • Thin • Design • Fast

Features

🚀 No runtime, no virtual DOM, runs faster online;
🧰 Rich API, easily configure component styles that meet your needs;
✍ Based on Svelte and Tailwind, coding is quick and easy;
🍭 Supports dark mode;
📖 Provides extensive Chinese and English documentation and component examples;
🌍 Supports internationalization, with 60+ built-in language packages;
🫰 User-friendly interaction, animation parameters can be configured, and custom themes are supported;
🤝 Supports Tailwind libraries such as Windi CSS and UnoCSS;
🫡 No three -party dependence, no need to worry about the three -party library version and security issues.
📦 Supports on-demand import to reduce bundle size.
🪜 Comes with a scaffolding tool for quick project creation.
🔗 Comes with an SVG merging plugin for quickly merging SVG files.

Getting Started

Installation

If you have a project configured with Svelte and Tailwind, install directly.

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

Usage

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

<Button>Default</Button>

😓 No project? Create one

You can try using create-stdf to quickly create a project. (beta version)

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

Alternatively, you can create a Vite project and configure it to use Tailwind CSS and the configurations used by STDF. Refer to Vite & Tailwind CSS & STDF for more information.

Preview

Please scan the QR code to access the mobile demo:

License

This project is licensed under the MIT License. Feel free to enjoy and contribute to this open-source project.

Contributors

Star History

<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.md 5.0 KB تاريخچه خام