|
|
@@ -0,0 +1,69 @@
|
|
|
+<div align="center">
|
|
|
+
|
|
|
+ <img src="https://stdf.design/assets/images/stdf_512px.png" alt="logo" width="100" height="auto" />
|
|
|
+ <h1>S T D F</h1>
|
|
|
+
|
|
|
+[](https://www.npmjs.com/package/stdf) [](https://www.npmjs.com/package/stdf)
|
|
|
+
|
|
|
+ <h4>
|
|
|
+ <a href="https://github.com/dufu1991/stdf/blob/main/README_en.md" target="_blank">English Doc</a>
|
|
|
+ <span> · </span>
|
|
|
+ <a href="https://stdf.design?lang=zh_CN" target="_blank">中文网站</a>
|
|
|
+ <span> · </span>
|
|
|
+ <a href="https://stdf.design?lang=en_US" target="_blank">英文网站</a>
|
|
|
+ </h4>
|
|
|
+</div>
|
|
|
+
|
|
|
+# 介绍
|
|
|
+
|
|
|
+基于 [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 等。
|
|
|
+
|
|
|
+# 快速上手
|
|
|
+
|
|
|
+## 安装
|
|
|
+
|
|
|
+已有配置好 Svelte 与 Tailwind 的工程,直接安装。
|
|
|
+
|
|
|
+```bash
|
|
|
+npm i stdf
|
|
|
+# or
|
|
|
+yarn add stdf
|
|
|
+# or
|
|
|
+pnpm i stdf
|
|
|
+```
|
|
|
+
|
|
|
+## 使用
|
|
|
+
|
|
|
+```xml
|
|
|
+<!-- Button Demo -->
|
|
|
+<script>
|
|
|
+import { Button } from 'stdf';
|
|
|
+</script>
|
|
|
+
|
|
|
+<Button>默认</Button>
|
|
|
+```
|
|
|
+
|
|
|
+😓 无工程?用 Vite 示例创建工程,参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。并配置 Tailwind CSS,参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite)。
|
|
|
+
|
|
|
+# 手机预览
|
|
|
+
|
|
|
+可以手机扫描以下二维码访问手机端 Demo:
|
|
|
+
|
|
|
+<img src="https://stdf.design/assets/qr/demo_qr.png" width="220" height="220" >
|
|
|
+
|
|
|
+# 开源协议
|
|
|
+
|
|
|
+本项目基于 [MIT](https://github.com/dufu1991/stdf/blob/main/LICENSE) 协议,请自由地享受和参与开源。
|