List清單
清單是一種垂直排列的項目集合，用來呈現文字或圖片，方便使用者快速瀏覽並存取相關資訊。
按需引入元件：
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
按需引入元件的 TypeScript 型別：
import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';
使用範例：
Subheader
Item 1
Item 2
<mdui-list>
<mdui-list-subheader>Subheader</mdui-list-subheader>
<mdui-list-item>Item 1</mdui-list-item>
<mdui-list-item>Item 2</mdui-list-item>
</mdui-list>
在 <mdui-list-item> 元件上設定 headline 屬性，可以設定清單項目的主文字；設定 description 屬性，則可以設定副文字。
<mdui-list>
<mdui-list-item headline="Headline"></mdui-list-item>
<mdui-list-item headline="Headline" description="Supporting text"></mdui-list-item>
</mdui-list>
原始碼也可以透過 default slot 設定主文字，並透過 description slot 設定副文字。
Headline
Headline
Supporting text
<mdui-list>
<mdui-list-item>Headline</mdui-list-item>
<mdui-list-item>
Headline
<span slot="description">Supporting text</span>
</mdui-list-item>
</mdui-list>
原始碼預設情況下，主文字和副文字無論長度如何，都會完全顯示。你可以透過設定 headline-line 和 description-line 屬性來為主文字和副文字加入行數限制，最多可以限制為 3 行。
Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline
Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text
<mdui-list>
<mdui-list-item headline-line="1" description-line="2">
Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline
<span slot="description">Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text</span>
</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上設定 icon 和 end-icon 屬性，可以在清單項目的左側和右側加入 Material Icons 圖示。
Headline
<mdui-list>
<mdui-list-item icon="people" end-icon="arrow_right">Headline</mdui-list-item>
</mdui-list>
原始碼也可以透過 icon 和 end-icon slot 在清單項目的左側和右側加入元素。
Headline
<mdui-list>
<mdui-list-item>
Headline
<mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
<mdui-checkbox slot="end-icon"></mdui-checkbox>
</mdui-list-item>
</mdui-list>
原始碼
透過設定 href 屬性，即可將清單項目轉換為連結。此時，你還可使用下列與連結相關的屬性：download、target 和 rel。
Headline
<mdui-list>
<mdui-list-item href="https://www.mdui.org" target="_blank">Headline</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上加上 disabled 屬性，可停用該清單項目。此時，清單項目中的核取方塊、單選按鈕、開關等元件也會被一併停用。
Headline
Headline
<mdui-list>
<mdui-list-item disabled>Headline</mdui-list-item>
<mdui-list-item>Headline</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上加上 active 屬性，可以啟用該清單項目。
Headline
Headline
<mdui-list>
<mdui-list-item active>Headline</mdui-list-item>
<mdui-list-item>Headline</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上加上 nonclickable 屬性，可以移除清單項目上的滑鼠懸停和點選漣漪效果。
Headline
Headline
<mdui-list>
<mdui-list-item nonclickable>Headline</mdui-list-item>
<mdui-list-item>Headline</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上加上 rounded 屬性，可以使該清單項目呈現圓角形狀。
Headline
Headline
<mdui-list>
<mdui-list-item rounded>Headline</mdui-list-item>
<mdui-list-item rounded>Headline</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件上設定 alignment 屬性，可以調整清單項目左右兩側元素與清單項目的對齊方式。其值可以為：
start：頂部對齊center：居中對齊end：底部對齊
Headline
Headline
Headline
<mdui-list>
<mdui-list-item alignment="start" description="Supporting text">
Headline
<mdui-icon slot="icon" name="people"></mdui-icon>
</mdui-list-item>
<mdui-list-item alignment="center" description="Supporting text">
Headline
<mdui-icon slot="icon" name="people"></mdui-icon>
</mdui-list-item>
<mdui-list-item alignment="end" description="Supporting text">
Headline
<mdui-icon slot="icon" name="people"></mdui-icon>
</mdui-list-item>
</mdui-list>
原始碼
在 <mdui-list-item> 元件中使用 custom slot，可以完全自訂清單項目的內容。
<mdui-list>
<mdui-list-item>
<div slot="custom" style="display: flex;">
<mdui-icon name="people"></mdui-icon>
<div>test</div>
</div>
</mdui-list-item>
</mdui-list>
原始碼| HTML 屬性 | JavaScript 屬性 | Reflect | 型別 | 預設值 |
|---|
headline | headline | | string | - |
主文字。也可以透過 default slot 設定
|
headline-line | headlineLine | | 1 | 2 | 3 | - |
主文字行數，超過限制後將截斷顯示。預設無行數限制。可選值包括：
1：顯示單行，超出後截斷2：顯示兩行，超出後截斷3：顯示三行，超出後截斷
|
description | description | | string | - |
副文字。也可以透過 slot="description" 設定
|
description-line | descriptionLine | | 1 | 2 | 3 | - |
副文字行數，超過限制後將截斷顯示。預設無行數限制。可選值包括：
1：顯示單行，超出後截斷2：顯示兩行，超出後截斷3：顯示三行，超出後截斷
|
icon | icon | | string | - |
左側的 Material Icons 圖示名。也可以透過 slot="icon" 設定
|
end-icon | endIcon | | string | - |
右側的 Material Icons 圖示名。也可以透過 slot="end-icon" 設定
|
disabled | disabled | | boolean | false |
是否停用該清單項目，停用後，清單項目將變為灰色，且其中的 <mdui-checkbox>、<mdui-radio>、<mdui-switch> 等也將停用
|
active | active | | boolean | false |
是否啟用該清單項目
|
nonclickable | nonclickable | | boolean | false |
是否使清單項目不可點擊。設定後，清單項目中的 <mdui-checkbox>、<mdui-radio>、<mdui-switch> 等仍可互動
|
rounded | rounded | | boolean | false |
是否使用圓角形狀的清單項目
|
alignment | alignment | | 'start' | 'center' | 'end' | 'center' |
清單項目的垂直對齊方式。可選值包括：
start：頂部對齊center：置中對齊end：底部對齊
|
href | href | | string | - |
連結的目標 URL。
若設定此屬性，元件內部將渲染為 <a> 元素，並可以使用連結相關的屬性。
|
download | download | | string | - |
下載連結的目標。
Note：僅在設定了 href 屬性時，此屬性才有效。
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
連結的開啟方式。可選值包括：
_blank：在新視窗中開啟連結_parent：在父框架中開啟連結_self：預設。在目前框架中開啟連結_top：在整個視窗中開啟連結
Note：僅在設定了 href 屬性時，此屬性才有效。
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
目前文件與被連結文件之間的關係。可選值包括：
alternate：目前文件的替代版本author：目前文件或文章的作者bookmark：永久連結到最近的祖先章節external：引用的文件與目前文件不在同一站點help：連結到相關的說明文件license：目前文件的主要內容由被引用文件的版權許可覆蓋me：目前文件代表連結內容的所有者next：目前文件是系列中的一部分，被引用的文件是系列的下一個文件nofollow：目前文件的作者或發布者不認可被引用的文件noreferrer：不包含 Referer 標頭。類似於 noopener 的效果opener：如果超連結會建立一個頂級瀏覽上下文（即 target 屬性值為 _blank），則建立一個輔助瀏覽上下文prev：目前文件是系列的一部分，被引用的文件是系列的上一個文件search：提供一個資源連結，可用於搜尋目前檔案及其相關頁面tag：提供一個適用於目前文件的標籤（由給定位址識別）
Note：僅在指定了 href 屬性時可用。
|
autofocus | autofocus | | boolean | false |
是否在頁面載入完成後自動取得焦點
|
tabindex | tabIndex | | number | - |
元素在使用 Tab 鍵切換焦點時的順序
|
| 名稱 | 參數 | 回傳值 |
|---|
click | | void |
模擬滑鼠點擊元素
|
focus | options: FocusOptions (選配)
| void |
將焦點設定到目前元素。
可以傳入一個物件作為引數，該物件的屬性包括：
preventScroll：預設情況下，元素取得焦點後，頁面會捲動以將該元素捲動到檢視中。如果不希望頁面捲動，可以將此屬性設定為 true。
|
blur | | void |
移除目前元素的焦點
|
