Maz UI

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

文件 · 開始使用 · 展示

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

✨ 功能特色

• 🎯 隨選元件 - 只使用您需要的
• 🌙 深色模式 - 內建深色模式支援
• 🎨 主題化 - 易於使用 CSS 變數自訂
• 📱 響應式 - 行動裝置優先設計方法
• 🔧 TypeScript - 包含完整的類型支援
• ⚡️ 輕量 - 可 tree-shake，無臃腫
• 🔍 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