menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

顏色與主題

mdui 中的導覽抽屜可以從頁面左側或右側滑出，一個頁面可以擁有多個導覽抽屜。

相關閱讀

導覽抽屜在手機、平板、桌上型裝置上的表現有些不同，你可以透過改變瀏覽器寬度來觀察本頁面左側的導覽抽屜的變化：

高度

在手機和平板上，開啟導覽抽屜時，始終會顯示遮罩層。

在桌上型裝置上，開啟導覽抽屜時，預設不顯示遮罩層。設定 overlay 參數為 true，可以在開啟導覽抽屜時顯示遮罩層。如果設定為顯示遮罩層，那麼應該加入 .mdui-drawer-close 類別使導覽抽屜預設處於隱藏狀態。

在手機和平板上，導覽抽屜的高度始終為 100%。

（若元件是動態產生的，則需要呼叫 <a href="/zh-tw/docs/1/global#mutation"><code>mdui.mutation()</code></a> 進行初始化）

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey

Material Design 設計規範：模式 - 導覽抽屜

50
100
200
300
400
500
600
700
800
900

在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。

mdui-drawer-body-left 類別為 body 加入 padding-left，只要左側有預設開啟的導覽抽屜，就要加入這個類別。

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange

mdui-drawer-body-right 類別為 body 加入 padding-right，只要右側有預設開啟的導覽抽屜，就要加入這個類別。

a100
a200
a400
a700

背景顏色和陰影

預設導覽抽屜在左側

如果要使導覽抽屜在右側，需要加入類別 mdui-drawer-right

  • 使用該方式無需編寫 JavaScript 程式碼。只需在一個起控制作用的元素（例如：按鈕）上加入 mdui-drawer="options" 屬性即可。透過自訂屬性呼叫時，需要額外加入一個 target 參數，用於指定被控制的導覽抽屜，它的值為被控制的導覽抽屜的 CSS 選取器。
  • 在導覽抽屜內的元素上可以加入一些屬性來綁定事件，這些屬性在使用 JavaScript 呼叫方式時也可以使用。
codeplay_arrow
範例
<div class="mdui-color-blue-200">mdui-color-blue-200</div>
<div class="mdui-color-blue">mdui-color-blue</div>
<div class="mdui-color-pink-accent">mdui-color-pink-accent</div>
<div class="mdui-color-pink-a200">mdui-color-pink-a200</div>

點擊該元素會觸發 close.mdui.drawer 事件，並關閉導覽抽屜。

在手機和平板上，導覽抽屜預設為白色背景，有陰影。

selector 為導覽抽屜的 CSS 選取器或 DOM 元素

options 為配置參數，見下面的參數清單

  • 開啟導覽抽屜時是否顯示遮罩層。該參數只對中等螢幕及以上的裝置有效，在超小螢幕和小螢幕裝置上始終會顯示遮罩層。
  • 是否啟用滑動手勢。
codeplay_arrow
範例
<div class="mdui-text-color-blue-900">mdui-text-color-blue-900</div>
<div class="mdui-text-color-blue">mdui-text-color-blue</div>
<div class="mdui-text-color-blue-a200">mdui-text-color-blue-a200</div>
<div class="mdui-text-color-blue-accent">mdui-text-color-blue-accent</div>

顯示導覽抽屜。

  • 隱藏導覽抽屜。
  • 切換導覽抽屜的顯示狀態。
範例

在桌上型裝置上，導覽抽屜預設為透明背景，沒有陰影。加入類別 <code>.mdui-color-[color]</code> 可以設定導覽抽屜的背景顏色，並加入陰影。

傳回目前導覽抽屜的狀態。共包含四種狀態（<code>opening</code>、<code>opened</code>、<code>closing</code>、<code>closed</code>）。

導覽抽屜開始開啟動畫時，事件將被觸發。

在手機和平板上，導覽抽屜的高度始終為 100%。

event._detail.inst：實例

導覽抽屜完成開啟動畫時，事件將被觸發。

  • .mdui-color-theme
  • .mdui-color-theme-[degree]
  • .mdui-text-color-theme
  • .mdui-text-color-theme-[degree]

在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。

導覽抽屜完成關閉動畫時，事件將被觸發。

定義一個導覽抽屜。

  • .mdui-color-theme-accent
  • .mdui-color-theme-[degree]
  • .mdui-text-color-theme-accent
  • .mdui-text-color-theme-[degree]

顯示狀態

使導覽抽屜佔據 100% 高度。

使導覽抽屜預設處於顯示狀態。

使導覽抽屜預設處於隱藏狀態。

  • .mdui-text-color-theme-text
  • .mdui-text-color-theme-secondary
  • .mdui-text-color-theme-disabled
  • .mdui-text-color-theme-divider
  • .mdui-text-color-theme-icon
  • .mdui-text-color-theme-icon-disabled

為 body 加入 padding-left。

  • Primary (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-theme
  • mdui-color-theme-50
  • mdui-color-theme-100
  • mdui-color-theme-200
  • mdui-color-theme-300
  • mdui-color-theme-400
  • mdui-color-theme-500
  • mdui-color-theme-600
  • mdui-color-theme-700
  • mdui-color-theme-800
  • mdui-color-theme-900
  • Accent (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-theme-accent
  • mdui-color-theme-a100
  • mdui-color-theme-a200
  • mdui-color-theme-a400
  • mdui-color-theme-a700
  • mdui-text-color-theme-text87%100%
  • mdui-text-color-theme-secondary54%70%
  • mdui-text-color-theme-disabled38%50%
  • mdui-text-color-theme-divider12%12%
  • mdui-text-color-theme-icon54%100%
  • mdui-text-color-theme-icon-disabled26%30%

在手機和平板上，導覽抽屜預設隱藏。

  • red (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-red#F44336
  • mdui-color-red-50#FFEBEE
  • mdui-color-red-100#FFCDD2
  • mdui-color-red-200#EF9A9A
  • mdui-color-red-300#E57373
  • mdui-color-red-400#EF5350
  • mdui-color-red-500#F44336
  • mdui-color-red-600#E53935
  • mdui-color-red-700#D32F2F
  • mdui-color-red-800#C62828
  • mdui-color-red-900#B71C1C
  • red (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-red-accent#FF5252
  • mdui-color-red-a100#FF8A80
  • mdui-color-red-a200#FF5252
  • mdui-color-red-a400#FF1744
  • mdui-color-red-a700#D50000
  • pink (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-pink#E91E63
  • mdui-color-pink-50#FCE4EC
  • mdui-color-pink-100#F8BBD0
  • mdui-color-pink-200#F48FB1
  • mdui-color-pink-300#F06292
  • mdui-color-pink-400#EC407A
  • mdui-color-pink-500#E91E63
  • mdui-color-pink-600#D81B60
  • mdui-color-pink-700#C2185B
  • mdui-color-pink-800#AD1457
  • mdui-color-pink-900#880E4F
  • pink (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-pink-accent#FF4081
  • mdui-color-pink-a100#FF80AB
  • mdui-color-pink-a200#FF4081
  • mdui-color-pink-a400#F50057
  • mdui-color-pink-a700#C51162
  • purple (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-purple#9C27B0
  • mdui-color-purple-50#F3E5F5
  • mdui-color-purple-100#E1BEE7
  • mdui-color-purple-200#CE93D8
  • mdui-color-purple-300#BA68C8
  • mdui-color-purple-400#AB47BC
  • mdui-color-purple-500#9C27B0
  • mdui-color-purple-600#8E24AA
  • mdui-color-purple-700#7B1FA2
  • mdui-color-purple-800#6A1B9A
  • mdui-color-purple-900#4A148C
  • purple (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-purple-accent#E040FB
  • mdui-color-purple-a100#EA80FC
  • mdui-color-purple-a200#E040FB
  • mdui-color-purple-a400#D500F9
  • mdui-color-purple-a700#AA00FF
  • deep-purple (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-deep-purple#673AB7
  • mdui-color-deep-purple-50#EDE7F6
  • mdui-color-deep-purple-100#D1C4E9
  • mdui-color-deep-purple-200#B39DDB
  • mdui-color-deep-purple-300#9575CD
  • mdui-color-deep-purple-400#7E57C2
  • mdui-color-deep-purple-500#673AB7
  • mdui-color-deep-purple-600#5E35B1
  • mdui-color-deep-purple-700#512DA8
  • mdui-color-deep-purple-800#4527A0
  • mdui-color-deep-purple-900#311B92
  • deep-purple (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-deep-purple-accent#7C4DFF
  • mdui-color-deep-purple-a100#B388FF
  • mdui-color-deep-purple-a200#7C4DFF
  • mdui-color-deep-purple-a400#651FFF
  • mdui-color-deep-purple-a700#6200EA
  • indigo (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-indigo#3F51B5
  • mdui-color-indigo-50#E8EAF6
  • mdui-color-indigo-100#C5CAE9
  • mdui-color-indigo-200#9FA8DA
  • mdui-color-indigo-300#7986CB
  • mdui-color-indigo-400#5C6BC0
  • mdui-color-indigo-500#3F51B5
  • mdui-color-indigo-600#3949AB
  • mdui-color-indigo-700#303F9F
  • mdui-color-indigo-800#283593
  • mdui-color-indigo-900#1A237E
  • indigo (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-indigo-accent#536DFE
  • mdui-color-indigo-a100#8C9EFF
  • mdui-color-indigo-a200#536DFE
  • mdui-color-indigo-a400#3D5AFE
  • mdui-color-indigo-a700#304FFE
  • blue (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-blue#2196F3
  • mdui-color-blue-50#E3F2FD
  • mdui-color-blue-100#BBDEFB
  • mdui-color-blue-200#90CAF9
  • mdui-color-blue-300#64B5F6
  • mdui-color-blue-400#42A5F5
  • mdui-color-blue-500#2196F3
  • mdui-color-blue-600#1E88E5
  • mdui-color-blue-700#1976D2
  • mdui-color-blue-800#1565C0
  • mdui-color-blue-900#0D47A1
  • blue (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-blue-accent#448AFF
  • mdui-color-blue-a100#82B1FF
  • mdui-color-blue-a200#448AFF
  • mdui-color-blue-a400#2979FF
  • mdui-color-blue-a700#2962FF
  • light-blue (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-light-blue#03A9F4
  • mdui-color-light-blue-50#E1F5FE
  • mdui-color-light-blue-100#B3E5FC
  • mdui-color-light-blue-200#81D4FA
  • mdui-color-light-blue-300#4FC3F7
  • mdui-color-light-blue-400#29B6F6
  • mdui-color-light-blue-500#03A9F4
  • mdui-color-light-blue-600#039BE5
  • mdui-color-light-blue-700#0288D1
  • mdui-color-light-blue-800#0277BD
  • mdui-color-light-blue-900#01579B
  • light-blue (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-light-blue-accent#40C4FF
  • mdui-color-light-blue-a100#80D8FF
  • mdui-color-light-blue-a200#40C4FF
  • mdui-color-light-blue-a400#00B0FF
  • mdui-color-light-blue-a700#0091EA
  • cyan (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-cyan#00BCD4
  • mdui-color-cyan-50#E0F7FA
  • mdui-color-cyan-100#B2EBF2
  • mdui-color-cyan-200#80DEEA
  • mdui-color-cyan-300#4DD0E1
  • mdui-color-cyan-400#26C6DA
  • mdui-color-cyan-500#00BCD4
  • mdui-color-cyan-600#00ACC1
  • mdui-color-cyan-700#0097A7
  • mdui-color-cyan-800#00838F
  • mdui-color-cyan-900#006064
  • cyan (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-cyan-accent#18FFFF
  • mdui-color-cyan-a100#84FFFF
  • mdui-color-cyan-a200#18FFFF
  • mdui-color-cyan-a400#00E5FF
  • mdui-color-cyan-a700#00B8D4
  • teal (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-teal#009688
  • mdui-color-teal-50#E0F2F1
  • mdui-color-teal-100#B2DFDB
  • mdui-color-teal-200#80CBC4
  • mdui-color-teal-300#4DB6AC
  • mdui-color-teal-400#26A69A
  • mdui-color-teal-500#009688
  • mdui-color-teal-600#00897B
  • mdui-color-teal-700#00796B
  • mdui-color-teal-800#00695C
  • mdui-color-teal-900#004D40
  • teal (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-teal-accent#64FFDA
  • mdui-color-teal-a100#A7FFEB
  • mdui-color-teal-a200#64FFDA
  • mdui-color-teal-a400#1DE9B6
  • mdui-color-teal-a700#00BFA5
  • green (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-green#4CAF50
  • mdui-color-green-50#E8F5E9
  • mdui-color-green-100#C8E6C9
  • mdui-color-green-200#A5D6A7
  • mdui-color-green-300#81C784
  • mdui-color-green-400#66BB6A
  • mdui-color-green-500#4CAF50
  • mdui-color-green-600#43A047
  • mdui-color-green-700#388E3C
  • mdui-color-green-800#2E7D32
  • mdui-color-green-900#1B5E20
  • green (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-green-accent#69F0AE
  • mdui-color-green-a100#B9F6CA
  • mdui-color-green-a200#69F0AE
  • mdui-color-green-a400#00E676
  • mdui-color-green-a700#00C853
  • light-green (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-light-green#8BC34A
  • mdui-color-light-green-50#F1F8E9
  • mdui-color-light-green-100#DCEDC8
  • mdui-color-light-green-200#C5E1A5
  • mdui-color-light-green-300#AED581
  • mdui-color-light-green-400#9CCC65
  • mdui-color-light-green-500#8BC34A
  • mdui-color-light-green-600#7CB342
  • mdui-color-light-green-700#689F38
  • mdui-color-light-green-800#558B2F
  • mdui-color-light-green-900#33691E
  • light-green (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-light-green-accent#B2FF59
  • mdui-color-light-green-a100#CCFF90
  • mdui-color-light-green-a200#B2FF59
  • mdui-color-light-green-a400#76FF03
  • mdui-color-light-green-a700#64DD17
  • lime (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-lime#CDDC39
  • mdui-color-lime-50#F9FBE7
  • mdui-color-lime-100#F0F4C3
  • mdui-color-lime-200#E6EE9C
  • mdui-color-lime-300#DCE775
  • mdui-color-lime-400#D4E157
  • mdui-color-lime-500#CDDC39
  • mdui-color-lime-600#C0CA33
  • mdui-color-lime-700#AFB42B
  • mdui-color-lime-800#9E9D24
  • mdui-color-lime-900#827717
  • lime (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-lime-accent#EEFF41
  • mdui-color-lime-a100#F4FF81
  • mdui-color-lime-a200#EEFF41
  • mdui-color-lime-a400#C6FF00
  • mdui-color-lime-a700#AEEA00
  • yellow (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-yellow#FFEB3B
  • mdui-color-yellow-50#FFFDE7
  • mdui-color-yellow-100#FFF9C4
  • mdui-color-yellow-200#FFF59D
  • mdui-color-yellow-300#FFF176
  • mdui-color-yellow-400#FFEE58
  • mdui-color-yellow-500#FFEB3B
  • mdui-color-yellow-600#FDD835
  • mdui-color-yellow-700#FBC02D
  • mdui-color-yellow-800#F9A825
  • mdui-color-yellow-900#F57F17
  • yellow (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-yellow-accent#FFFF00
  • mdui-color-yellow-a100#FFFF8D
  • mdui-color-yellow-a200#FFFF00
  • mdui-color-yellow-a400#FFEA00
  • mdui-color-yellow-a700#FFD600
  • amber (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-amber#FFC107
  • mdui-color-amber-50#FFF8E1
  • mdui-color-amber-100#FFECB3
  • mdui-color-amber-200#FFE082
  • mdui-color-amber-300#FFD54F
  • mdui-color-amber-400#FFCA28
  • mdui-color-amber-500#FFC107
  • mdui-color-amber-600#FFB300
  • mdui-color-amber-700#FFA000
  • mdui-color-amber-800#FF8F00
  • mdui-color-amber-900#FF6F00
  • amber (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-amber-accent#FFD740
  • mdui-color-amber-a100#FFE57F
  • mdui-color-amber-a200#FFD740
  • mdui-color-amber-a400#FFC400
  • mdui-color-amber-a700#FFAB00
  • orange (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-orange#FF9800
  • mdui-color-orange-50#FFF3E0
  • mdui-color-orange-100#FFE0B2
  • mdui-color-orange-200#FFCC80
  • mdui-color-orange-300#FFB74D
  • mdui-color-orange-400#FFA726
  • mdui-color-orange-500#FF9800
  • mdui-color-orange-600#FB8C00
  • mdui-color-orange-700#F57C00
  • mdui-color-orange-800#EF6C00
  • mdui-color-orange-900#E65100
  • orange (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-orange-accent#FFAB40
  • mdui-color-orange-a100#FFD180
  • mdui-color-orange-a200#FFAB40
  • mdui-color-orange-a400#FF9100
  • mdui-color-orange-a700#FF6D00
  • deep-orange (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-deep-orange#FF5722
  • mdui-color-deep-orange-50#FBE9E7
  • mdui-color-deep-orange-100#FFCCBC
  • mdui-color-deep-orange-200#FFAB91
  • mdui-color-deep-orange-300#FF8A65
  • mdui-color-deep-orange-400#FF7043
  • mdui-color-deep-orange-500#FF5722
  • mdui-color-deep-orange-600#F4511E
  • mdui-color-deep-orange-700#E64A19
  • mdui-color-deep-orange-800#D84315
  • mdui-color-deep-orange-900#BF360C
  • deep-orange (在桌上型裝置上，導覽抽屜預設不覆蓋應用程式列，距離頁面頂部有一個應用程式列的高度。加入類別 <code>.mdui-drawer-full-height</code> 可以使導覽抽屜高度為 100%，這時導覽抽屜可能會覆蓋在應用程式列上方，可以在應用程式列上加入類別 <code>.mdui-appbar-inset</code> 使應用程式列不被導覽抽屜覆蓋。)mdui-color-deep-orange-accent#FF6E40
  • mdui-color-deep-orange-a100#FF9E80
  • mdui-color-deep-orange-a200#FF6E40
  • mdui-color-deep-orange-a400#FF3D00
  • mdui-color-deep-orange-a700#DD2C00
  • brown (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-brown#795548
  • mdui-color-brown-50#EFEBE9
  • mdui-color-brown-100#D7CCC8
  • mdui-color-brown-200#BCAAA4
  • mdui-color-brown-300#A1887F
  • mdui-color-brown-400#8D6E63
  • mdui-color-brown-500#795548
  • mdui-color-brown-600#6D4C41
  • mdui-color-brown-700#5D4037
  • mdui-color-brown-800#4E342E
  • mdui-color-brown-900#3E2723
  •    
  •   
  •   
  •   
  •   
  • grey (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-grey#9E9E9E
  • mdui-color-grey-50#FAFAFA
  • mdui-color-grey-100#F5F5F5
  • mdui-color-grey-200#EEEEEE
  • mdui-color-grey-300#E0E0E0
  • mdui-color-grey-400#BDBDBD
  • mdui-color-grey-500#9E9E9E
  • mdui-color-grey-600#757575
  • mdui-color-grey-700#616161
  • mdui-color-grey-800#424242
  • mdui-color-grey-900#212121
  •    
  •   
  •   
  •   
  •   
  • blue-grey (在手機和平板上，導覽抽屜的高度始終為 100%。)mdui-color-blue-grey#607D8B
  • mdui-color-blue-grey-50#ECEFF1
  • mdui-color-blue-grey-100#CFD8DC
  • mdui-color-blue-grey-200#B0BEC5
  • mdui-color-blue-grey-300#90A4AE
  • mdui-color-blue-grey-400#78909C
  • mdui-color-blue-grey-500#607D8B
  • mdui-color-blue-grey-600#546E7A
  • mdui-color-blue-grey-700#455A64
  • mdui-color-blue-grey-800#37474F
  • mdui-color-blue-grey-900#263238
  •    
  •   
  •   
  •   
  •   
  • mdui-color-black#000000
  • mdui-color-white#FFFFFF
  • mdui-color-transparenttransparent

      CSS 類別清單

      在桌上型裝置上，導覽抽屜預設顯示。

      類別名稱說明
      .mdui-theme-primary-[color]帶不透明度的 Display 1 樣式
      .mdui-theme-accent-[color]帶不透明度的 Title 樣式
      .mdui-theme-layout-dark帶不透明度的 Subheading 樣式

      加入類別 <code>.mdui-drawer-open</code> 可以使導覽抽屜在所有裝置上都預設顯示；加入類別 <code>.mdui-drawer-close</code> 可以使導覽抽屜在所有裝置上都預設隱藏。

      類別名稱說明
      .mdui-color-[color]帶不透明度的 Body 2 樣式
      .mdui-color-[color]-accent帶不透明度的 Body 1 樣式
      .mdui-color-[color]-[degree]
      .mdui-color-theme
      .mdui-color-theme-accent
      .mdui-color-theme-[degree]
      .mdui-color-black
      .mdui-color-white
      .mdui-color-transparent

      遮罩

      類別名稱說明
      .mdui-text-color-[color]
      .mdui-text-color-[color]-accent
      .mdui-text-color-[color]-[degree]
      .mdui-text-color-theme
      .mdui-text-color-theme-accent
      .mdui-text-color-theme-[degree]

      類別名稱說明
      .mdui-text-color-black
      .mdui-text-color-black-text
      .mdui-text-color-black-secondary
      .mdui-text-color-black-disabled
      .mdui-text-color-black-divider
      .mdui-text-color-black-icon
      .mdui-text-color-black-icon-disabled

      類別名稱說明
      .mdui-text-color-white
      .mdui-text-color-white-text
      .mdui-text-color-white-secondary
      .mdui-text-color-white-disabled
      .mdui-text-color-white-divider
      .mdui-text-color-white-icon
      .mdui-text-color-white-icon-disabled

      類別名稱說明
      .mdui-text-color-theme-text
      .mdui-text-color-theme-secondary
      .mdui-text-color-theme-disabled
      .mdui-text-color-theme-divider
      .mdui-text-color-theme-icon
      .mdui-text-color-theme-icon-disabled
      arrow_backPrevious
      從 0.4.3 升級到 1.0.0
      arrow_forwardNext
      Roboto 字型