|
|
@@ -26,9 +26,9 @@
|
|
|
[](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension)
|
|
|
|
|
|
<h3>
|
|
|
- <a href="https://github.com/any-tdf/stdf/blob/next/README_CN.md" target="_blank">简体中文</a>
|
|
|
+ <a href="https://github.com/any-tdf/stdf/blob/main/README_CN.md" target="_blank">简体中文</a>
|
|
|
<span> • </span>
|
|
|
- <a href="https://next.stdf.design?lang=en_US" target="_blank">Website</a>
|
|
|
+ <a href="https://stdf.design?lang=en_US" target="_blank">Website</a>
|
|
|
</h3>
|
|
|
</div>
|
|
|
|
|
|
@@ -40,9 +40,9 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
|
|
|
|
|
|
# Features
|
|
|
|
|
|
+- 🔥 Full support for Svelte v5, Tailwind CSS v4, and TypeScript.
|
|
|
- 🚀 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.
|
|
|
@@ -53,52 +53,36 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
|
|
|
- 🪜 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.
|
|
|
-- 🔧 Supports TypeScript, with complete type prompts for component Props.
|
|
|
|
|
|
# Getting Started
|
|
|
|
|
|
-## Installation
|
|
|
-
|
|
|
-If you have a project configured with Svelte and Tailwind, install directly.
|
|
|
-
|
|
|
+<!-- :::code-groups -->
|
|
|
+<!-- pnpm -->
|
|
|
```sh
|
|
|
-pnpm i stdf@next -D
|
|
|
-# or
|
|
|
-npm i stdf@next -D
|
|
|
-# or
|
|
|
-bun i stdf@next -D
|
|
|
-```
|
|
|
-
|
|
|
-## Usage
|
|
|
-
|
|
|
-```xml
|
|
|
-<!-- Button Demo -->
|
|
|
-<script>
|
|
|
-import { Button } from 'stdf';
|
|
|
-</script>
|
|
|
-
|
|
|
-<Button>Default</Button>
|
|
|
+pnpm create stdf
|
|
|
```
|
|
|
-
|
|
|
-## 😓 No project? Create one
|
|
|
-
|
|
|
-You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project.
|
|
|
-
|
|
|
+<!-- :: -->
|
|
|
+<!-- npm -->
|
|
|
```sh
|
|
|
-pnpm create stdf
|
|
|
-# or
|
|
|
-npm create stdf@latest
|
|
|
-# or
|
|
|
-npm init stdf@latest
|
|
|
+npm create stdf
|
|
|
# or
|
|
|
-npx create-stdf@latest
|
|
|
+npm init stdf
|
|
|
# or
|
|
|
+npx create-stdf
|
|
|
+```
|
|
|
+<!-- :: -->
|
|
|
+<!-- bun -->
|
|
|
+```sh
|
|
|
bun create stdf
|
|
|
```
|
|
|
+<!-- :: -->
|
|
|
+<!-- yarn -->
|
|
|
+```sh
|
|
|
+yarn create stdf
|
|
|
+```
|
|
|
+<!-- ::: -->
|
|
|
|
|
|
-Alternatively, you can create a Vite project and configure it to use Tailwind CSS and the configurations used by STDF. Refer to [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) & [Tailwind CSS](https://tailwindcss.com/docs/guides/vite#svelte) & [STDF](https://stdf.design/#/guide) for more information.
|
|
|
-
|
|
|
-# Preview
|
|
|
+# Preview Demo
|
|
|
|
|
|
Please scan the QR code to access the mobile demo:
|
|
|
|
|
|
@@ -109,7 +93,7 @@ Please scan the QR code to access the mobile demo:
|
|
|
|
|
|
# Quick Try
|
|
|
|
|
|
-You can quickly try STDF on StackBlitz's [STDF Demo](https://stackblitz.com/github/any-tdf/next-demo-stdf?startScript=dev_en).
|
|
|
+You can quickly try STDF on StackBlitz's [STDF Demo](https://stackblitz.com/github/any-tdf/demo-stdf?startScript=dev_en).
|
|
|
|
|
|
# Feedback and Communication
|
|
|
|