STDF mirror - Mobile web component library based on Svelte and Tailwind

dufu1991 336031e365 [stdf]Add JSDoc 2 anni fa
.github e5c9b4eea2 [action]Use any-tdf instead of dufu1991. 2 anni fa
demo aeaf2d14d5 [stdf]Add JSDoc 2 anni fa
doc 1b3f85fb25 [doc]Update FAQ 2 anni fa
packages 336031e365 [stdf]Add JSDoc 2 anni fa
.eslintignore 5750ba48ea format 3 anni fa
.eslintrc.js bb70325bbd [demo]Optimized code 2 anni fa
.gitignore 438145c188 Add test symbol.svg to rollup-plugin-stdf-icon 2 anni fa
.prettierrc.js 5750ba48ea format 3 anni fa
LICENSE 16a309bc4c Initial commit 3 anni fa
README.md 6f818335fd [doc]Demo links to use any-tdf instead of dufu1991 2 anni fa
README_CN.md 6f818335fd [doc]Demo links to use any-tdf instead of dufu1991 2 anni fa
jsconfig.json ab3875c10c Add checkJs compiler option and exclude 2 anni fa
package.json 5750ba48ea format 3 anni fa

README.md

[![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) [![Build Status](https://github.com/any-tdf/stdf/actions/workflows/build-demo.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/build-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) 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=visualstudiocode&label=extension&style=for-the-badge&color=c7f292&logoColor=F0FCD6&labelColor=0E1901)](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension)

简体中文 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 and multiple theme configuration.
  • 📖 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.
  • 🍺 IDE plugin for quickly viewing component APIs.

Getting Started

Installation

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

bun i stdf -D
# or
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)

bun create stdf
# or
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:

Quick Try

You can quickly try STDF on StackBlitz's STDF Demo.

Feedback and Communication

We recommend using GitHub Issues for direct and effective feedback and communication. Contributions of code are also highly appreciated. You can also choose from the following options:

Contributors

Sponsors

License

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

Star History

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