Maz UI

用於 Vue 3 和 Nuxt 3 的輕量級且高效的函式庫

文件 · 開始使用 · 展示

_{使用 Maz UI 元件建構的儀表板範例}

✨ 功能

• 🎯 精選元件 - 只使用您需要的元件
• 🌙 深色模式 - 內建深色模式支援
• 🎨 主題化 - 易於使用 CSS 變數進行自訂
• 📱 響應式 - 行動優先的設計方法
• 🔧 TypeScript - 包含完整的類型支援
• ⚡️ 輕量級 - 可進行樹狀結構修剪，沒有臃腫程式碼
• 🔍 SSR - 已準備好進行伺服器端渲染

🚀 快速開始

npm install maz-ui

Vue 3

// main.ts
import 'maz-ui/styles'

💡 用法

然後，匯入並只使用您需要的元件、組合式函式等等

<template>
  <MazBtn>Click me!</MazBtn>
</template>

<script setup lang="ts">
  import MazBtn from 'maz-ui/components/MazBtn'
</script>

使用提供的解析器來享受自動匯入和 TypeScript 支援：解析器文件

Nuxt 3

Nuxt 模組會自動

• 按需匯入所有元件、插件、組合式函式和指令（自動匯入）
• 包含必要的樣式
• 提供開箱即用的 TypeScript 支援

請參閱文件中的選項和更多資訊

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['maz-ui/nuxt'],
})

💡 用法

無需匯入元件、插件、組合式函式或指令，它們都會自動匯入。

<template>
  <MazBtn @click="toast.success('Hello Maz UI!')"> Click me! </MazBtn>
</template>

<script setup lang="ts">
  const toast = useToast()
</script>

🎨 主題化變得簡單

使用我們專用的 CLI 工具自訂 Maz UI 以符合您的品牌

# Install the CLI
npm install -g @mazui/cli

# Generate your theme
maz generate-css-vars

CLI 將自動

• 產生所有顏色變化
• 建立深色模式變數
• 輸出可直接使用的 CSS 檔案

要了解如何設定 CLI，請查看我們文件中的主題選項。

🧰 包含哪些內容？

• 🧩 元件 - 美觀、可存取的 UI 元件
• 🔌 插件 - 用於常見用例的強大插件
• 🎣 組合式函式 - 可重複使用的組合式函式
• 📏 指令 - 有用的 Vue 指令
• 🛠️ 助手函式 - 用於常見任務的實用工具

🤝 貢獻

我們一直在尋找貢獻者！請查看我們的貢獻指南以開始使用。

📄 授權條款

MIT