Card卡片

卡片是一個多功能元件，用來承載與單一主題相關的內容和操作。

使用方法

按需引入元件：

import 'mdui/components/card.js';

按需引入元件的 TypeScript 型別：

import type { Card } from 'mdui/components/card.js';

使用範例：

Card

<mdui-card style="width: 200px;height: 124px">Card</mdui-card>

範例

形狀

使用 variant 屬性設定卡片的形狀。

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

原始碼

可點選

加上 clickable 屬性即可讓卡片可點選，此時會加入滑鼠懸停效果和點擊漣漪效果。

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

原始碼

連結

加上 href 屬性即可將卡片轉為連結，並可使用以下連結相關的屬性：download、target、rel。

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

原始碼

禁用狀態

加上 disabled 屬性即可停用卡片。

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

原始碼

API

屬性

HTML 屬性	JavaScript 屬性	型別	預設值
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
卡片的形狀。可選值包括： `elevated`：帶陰影的卡片，與背景的視覺分離度較高 `filled`：帶填滿色的卡片，與背景的視覺分離度較低 `outlined`：帶邊框的卡片，與背景的視覺分離度最高
`clickable`	`clickable`	`boolean`	`false`
是否可點擊。為 `true` 時，卡片將具有滑鼠懸停效果和點擊漣漪效果
`disabled`	`disabled`	`boolean`	`false`
是否停用
`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`
移除目前元素的焦點

事件

名稱
`focus`
取得焦點時觸發
`blur`
失去焦點時觸發

Slots

名稱
預設
卡片的內容

CSS 自訂屬性

名稱
`--shape-corner`
元件的圓角大小。可以指定一個具體的像素值；但更推薦引用設計令牌

ButtonIcon 圖示按鈕

Checkbox 核取方塊