傳統中文

目錄

• 介紹
• 安裝
• 引入組件
• 引入樣式
• 組件
• 疑難處理
• 線路圖

介紹

這個存儲庫是什麼

Vue MDC是Vue Material Design Components的縮寫。

Vue MDC是Material Design 3的其中一個實現，它是基於Vue前端框架開發的、針對Vue優化的組件庫。這個組件庫提供諸如Button, Fab, Ripple之類的組件。

有關組件的更多信息請前往組件章節。

MD是什麼

Material Design簡稱為MD，它是由Google創建的一套設計語言，該設計語言廣泛應用于安卓應用程式和Google的官方網站。

有關Material Design的更多信息請前往MD3網站。

這個存儲庫可靠嗎

由於此存儲庫由個人開發，且未部署任何生產環境（例如測試），此存儲庫無法保證Vue MDC在實際應用中的表現。多數情況下，此存儲庫適用於娛樂用途。

如果正在尋找替代方案，請嘗試其它作者的項目：

• Vuetify
• @material/web

安裝

核心依賴：

npm i @glare-labs/vue-mdc @material/material-color-utilities

如果需要使用Material Design風格的圖標，這將需要依賴項（或者其它實現了MD規範的圖標庫）：

npm i material-symbols

引入組件

請注意，@glare-labs/vue-mdc上不存在任何導出，並且引入組件時不會自動引入樣式。

有關引入樣式的更多信息請前往引入樣式章節。

錯誤示範	正確示範
import { Button } from "@glare-labs/vue-mdc"	import { Button } from "@glare-labs/vue-mdc/button"

局部引入組件

<template>
    <Button>My First Button</Button>
</template>
<script setup lang="ts">
import { Button } from "@glare-labs/vue-mdc/button"
</script>

全局引入組件

import { registerComponents } from "@glare-labs/vue-mdc/component-register"

const app = createApp(App)

app.use(registerComponents())

app.mount("#app")

<template>
    <vmdc-fab label="My First Fab">
        <template #icon>
            <vmdc-icon>add</vmdc-icon>
        </template>
    </vmdc-fab>
</template>

引入樣式

建議在.css文件中引入樣式，引入樣式時需要以node_modules為起點：

/* Button */
@import url("node_module/@glare-labs/vue-mdc/build/components/button/styles/button.module.css");

/* Ripple */
@import url("node_module/@glare-labs/vue-mdc/build/components/ripple/styles/ripple.module.css");

/* Elevation */
@import url("node_module/@glare-labs/vue-mdc/build/components/elevation/styles/elevation.module.css");

大多數情況下，ripple和elevation的樣式需要被引入，這是因為大多數組件的內部使用了Ripple和Elevation。

以Button組件為例，若不引入ripple樣式和elevation樣式，Button組件內部的Ripple組件和Elevation組件將不能按照預期呈現樣式、Button組件的結構會被打亂。