mdui 內建了 Material Icons 的 932 個圖示,除了這些圖示,你還可以使用第三方圖示。
使動作列擁有漸層背景。
定義瓦片動作列中的文字。
定義瓦片動作列文字中的標題。
定義瓦片動作列文字中的副標題。
<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>下拉選單開始關閉動畫時,事件將被觸發。
<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>將物件或陣列序列化,回傳一個可用於 URL 參數的字串。
.serializeArray() 的回傳格式一致:函式的第一個參數為陣列的索引位置、或物件的鍵;第二個參數為陣列或物件對應位置的值。
回呼函式中的 <code>this</code> 指向陣列或物件對應位置的值。若回呼函式回傳 <code>false</code>,則停止遍歷。
遍歷一個陣列
結果:
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]把第二個陣列的元素追加到第一個陣列中,並回傳合併後的陣列。
過濾掉陣列中的重複元素。
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]函式的第一個參數為陣列或物件對應位置的值,第二個參數為陣列的索引位置、或物件的鍵。
函式可以回傳任何值,若函式回傳的是陣列,則會被展開;若回傳的是 null 或 undefined,則會被忽略。函式內部的 this 指向 window 物件。
遍歷陣列
.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回呼函式回傳陣列時,會被展開
| 類別名稱 | 說明 |
|---|---|
.mdui-theme-primary-[color] | 判斷父節點是否包含子節點,回傳布林值。 |
.mdui-theme-accent-[color] | 參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、JQ 物件、或回呼函式。 |
.mdui-theme-layout-dark | 參數為回呼函式時,函式的第一個參數為索引位置,第二個參數為目前元素,this 指向目前元素。若函式回傳 true,表示符合;若回傳 false,表示不符合。 |
| 類別名稱 | 說明 |
|---|---|
.mdui-color-[color] | 透過回呼函式的回傳值做判斷 |
.mdui-color-[color]-accent | 回傳目前集合中元素的數量。 |
.mdui-color-[color]-[degree] | 遍歷目前集合,為集合中的每個元素執行一個函式,回傳由函式回傳值組成的新集合。若函式回傳 <code>null</code> 或 <code>undefined</code> 則會被過濾。 |
.mdui-color-theme | 函式的第一個參數為元素的索引位置,第二個參數為目前元素。函式的 <code>this</code> 指向目前元素。 |
.mdui-color-theme-accent | result 為符合元素的值組成的 JQ 物件 |
.mdui-color-theme-[degree] | 回傳僅包含指定索引位置的元素的集合。 |
.mdui-color-black | 回傳僅包含第一個元素的 JQ 物件 |
.mdui-color-white | 回傳僅包含最後一個元素的 JQ 物件 |
.mdui-color-transparent | 回傳僅包含倒數第二個元素的 JQ 物件 |
| 類別名稱 | 說明 |
|---|---|
.mdui-text-color-[color] | 回傳僅包含第一個元素的集合。 |
.mdui-text-color-[color]-accent | 回傳僅包含第一個 div 的 JQ 物件 |
.mdui-text-color-[color]-[degree] | 回傳僅包含最後一個元素的集合。 |
.mdui-text-color-theme | 回傳僅包含最後一個 div 的 JQ 物件 |
.mdui-text-color-theme-accent | 回傳指定索引位置的元素。若未傳入參數,則回傳集合中所有元素組成的陣列。 |
.mdui-text-color-theme-[degree] | 回傳所有 div 元素組成的陣列 |
回傳第一個 div 元素
| 類別名稱 | 說明 |
|---|---|
.mdui-text-color-black | 回傳最後一個 div 元素 |
.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 | 從當前集合中篩選出與指定運算式符合的元素。參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、回呼函式。 |
.mdui-text-color-black-icon-disabled | 參數為函式時,函式的第一個參數為索引位置,第二個參數為當前元素,函式中的 <code>this</code> 指向當前元素。函式回傳 <code>true</code> 時,當前元素會被保留,回傳 <code>false</code> 時,當前元素會被移除。 |
如果沒有傳入參數,則回傳集合中第一個元素相對於同輩元素的索引位置。
| 類別名稱 | 說明 |
|---|---|
.mdui-text-color-white | 如果傳入了一個 CSS 選取器作為參數,則回傳集合中第一個元素相對於 CSS 選取器符合元素的索引位置。 |
.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 | 從當前集合中篩選出與指定運算式符合的元素。參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、回呼函式。 |
.mdui-text-color-white-icon-disabled | 參數為函式時,函式的第一個參數為索引位置,第二個參數為當前元素,函式中的 <code>this</code> 指向當前元素。函式回傳 <code>true</code> 時,當前元素會被保留,回傳 <code>false</code> 時,當前元素會被移除。 |
如果傳入了一個 DOM 元素,則回傳該 DOM 元素在集合中的索引值。
| 類別名稱 | 說明 |
|---|---|
.mdui-text-color-theme-text | 回傳當前集合的子集。 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |
.mdui-text-color-theme-secondary | 第一個參數為子集的起始位置,第二個參數為子集的結束位置;若未傳入第二個參數,表示包含從起始位置到結尾的所有元素。 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |
.mdui-text-color-theme-disabled | 回傳集合中第三個(包含第三個)之後的所有元素 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |
.mdui-text-color-theme-divider | 回傳集合中第三個到第五個(包含第三個,不包含第五個)之間的元素 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |
.mdui-text-color-theme-icon | 從當前集合中篩選出與指定運算式符合的元素。參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、回呼函式。 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |
.mdui-text-color-theme-icon-disabled | 參數為函式時,函式的第一個參數為索引位置,第二個參數為當前元素,函式中的 <code>this</code> 指向當前元素。函式回傳 <code>true</code> 時,當前元素會被保留,回傳 <code>false</code> 時,當前元素會被移除。 如果傳入一個 JQ 物件,則回傳物件中第一個元素在當前集合中的索引位置。 |