Material Design Lite 繁體中文

開始使用

引入主要的 CSS 和 JavaScript 檔案

在專案的每個 HTML 頁面中引入 Material Lite 的 CSS 和 JavaScript 檔案。我們建議您使用**我們 CDN 上託管的檔案**。您也可以**自訂並下載**它們自行託管，從我們的原始碼**建置**它們，或將它們安裝到您的 **npm**/ **Bower** 專案中。

託管下載建置 Bower npm

只需將以下 <link> 和 <script> 元素添加到您的 HTML 頁面中 (壓縮後大小為 27kB)

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

選擇配色方案

Material Design 中使用的配色方案基於您可能想要個人化的主要顏色和強調顏色。這些顏色在 CSS 檔案名稱中按照以下模式指定：material.{primary}-{accent}.min.css（例如 material.indigo-pink.min.css）。我們的 CDN 託管了許多基於常見 Material Design 顏色的配色組合。要探索和預覽可用的配色組合，請使用我們的自訂和預覽工具。

立即下載最小化的 CSS 和 Javascript 檔案 (壓縮後大小為 27kB)

透過在 HTML 頁面中添加 <link> 和 <script> 元素來引用這些檔案，並且也要引入 Material Icon 字型

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

選擇配色方案

Material Design 中使用的配色方案基於您可能想要個人化的主要顏色和強調顏色。使用自訂和預覽工具為您的網站選擇和預覽主要顏色和強調顏色的組合。然後使用按鈕下載您自訂的 Material Design Lite CSS，只需將 `material.min.css` 替換為自訂的 CSS 即可。

我們的原始碼託管在 GitHub 上。您需要下載程式碼並建置它。

在 shell 中執行以下命令

# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp

您可以在 dist 資料夾中找到 Material Design Lite 函式庫的檔案。將它們複製到您的專案中。

透過在 HTML 頁面中添加 <link> 和 <script> 元素來引用這些檔案，並且也要引入 Material Icon 字型

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意事項

使用此方法，您將無法自訂 MDL 元素的配色方案。如果您想要自訂配色方案，請選擇 CDN 託管或可下載的函式庫。在這種情況下，請使用我們的自訂和預覽工具。

只需使用以下命令在您的 Bower 啟用專案中安裝 Material Design Lite 檔案即可

在 shell 中執行以下命令

bower install material-design-lite --save

這會將 Material Design Lite 函式庫檔案安裝到您專案的 bower_components 資料夾中。

透過在 HTML 頁面中添加 <link> 和 <script> 元素來引用這些檔案，並且也要引入 Material Icon 字型

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意事項

只需使用以下命令在您的 npm 啟用專案中安裝 Material Design Lite 檔案即可

在 shell 中執行以下命令

npm install material-design-lite --save

這會將 Material Design Lite 函式庫檔案安裝到您專案的 node_modules 資料夾中。

透過在 HTML 頁面中添加 <link> 和 <script> 元素來引用這些檔案，並且也要引入 Material Icon 字型

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意事項

這樣就完成了！您現在可以在您的網站上新增 MDL 元件了。

使用元件

您可以在下方找到幾個 MDL 按鈕元素的範例：一個帶有漣漪效果的按鈕和一個 FAB 按鈕。只需將相應的原始碼複製並貼上到您專案的 HTML 頁面的 <body> 中，元素就會如下所示呈現。

凸起按鈕

彩色 FAB

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<style></style>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
<style></style>
<style>
body {
  padding: 20px;
  background: #fafafa;
  position: relative;
}
</style>

可以透過新增 CSS 類別來調整和設定 MDL 元素。例如，將 mdl-js-ripple-effect 新增到 MDL 按鈕中，將在點擊按鈕時新增漣漪效果，而新增 mdl-button--fab 將按鈕的樣式更改為 FAB 按鈕。

還有許多其他可用的元素，例如卡片容器、滑桿、表格、選單... 如需完整的 MDL 元素和選項，請參閱元件頁面。

我們也建議您查看我們的範本。這些是使用 MDL 元件的現成網站範本。歡迎您查看它們，以便快速開始您的下一個專案。

一般規則和原則

一般來說，請按照以下基本步驟在您的 HTML 頁面中使用 MDL 元件

根據您想要使用的 MDL 元件，從標準 HTML 元素開始，例如 <button>、<div> 或 <ul>。這會在頁面中建立元素，並準備好進行 MDL 修改。
根據元件，將一個或多個 MDL 特定的 CSS 類別新增到元素中，例如 mdl-button 或 mdl-tabs__panel。這些類別會將 MDL 增強功能套用至元素，並將其轉換為 MDL 元件。

請記得在您的文件中包含 meta viewport 標籤，以便行動裝置能夠正確呈現。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

關於 HTML 元素和 MDL CSS 類別的注意事項

Material Design Lite 使用命名空間化的 BEM 類別（幾乎可以套用於任何 HTML 元素）來建構元件。對於某些元件，您幾乎可以使用任何元素。每個元件的文件中的範例使用作為該元件表現良好的元素。如果您必須使用範例中顯示的元素以外的元素，我們鼓勵您進行實驗，以找到最適合您應用程式的 HTML 元素和 MDL CSS 類別組合。

在動態網站上使用 MDL

Material Design Lite 會在頁面載入時自動註冊並呈現所有標記有 MDL 類別的元素。然而，如果您是動態建立 DOM 元素，則需要使用 upgradeElement 函式註冊新元素。以下是如何動態建立與上述章節中顯示的相同凸起按鈕（帶有漣漪效果）的方法

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

MDL 的職責是什麼？

Material Design Lite 的建置目的是為網站提供輕量級且基本的 Material Design 元件和範本。該專案並非旨在提供用於建立所有可能的 UX 需求的結構，而是提供一個您可以建構的低摩擦 Material Design 實作。即使在 Material Design 本身中，特別是卡片，也無法以無縫的方式提供所有組合。當您發現沒有提供的東西，例如抽屜中的下拉式選單時，您可能需要編寫自己的元件。

團隊致力於在忠於輕量級承諾的同時，為開發人員提供絕佳的體驗。

下一步是什麼？

有關使用元件的詳細說明，包括 MDL 類別及其效果、編碼注意事項和設定選項，請參閱元件頁面。可以在範本頁面中找到一起使用 MDL 元素的網站範例。

授權

下載套件

目錄

引入主要的 CSS 和 JavaScript 檔案

選擇配色方案

選擇配色方案

注意事項

注意事項

注意事項

使用元件

一般規則和原則

關於 HTML 元素和 MDL CSS 類別的注意事項

在動態網站上使用 MDL

MDL 的職責是什麼？

下一步是什麼？

授權