卡片
卡片包含關於單一主題的內容和操作。
簡介
卡片是表面，用於顯示關於單一主題的內容和操作。Material UI Card 元件包含幾個互補的實用元件，以處理各種使用情境
- Card：用於將相關元件分組的表面層級容器。
- Card Content：Card 內容的包裝器。
- Card Header：Card 標頭的可選包裝器。
- Card Media：用於顯示圖片、影片等的選用容器。
- Card Actions：用於將一組按鈕分組的可選包裝器。
- Card Action Area：一個可選的包裝器，允許使用者與 Card 的指定區域互動。
每日一字
be•nev•o•lent
形容詞
善意的且親切的。
「一個仁慈的微笑」
基本用法
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
外框卡片
設定 variant="outlined" 以呈現外框卡片。
每日一字
be•nev•o•lent
形容詞
善意的且親切的。
「一個仁慈的微笑」
按下 Enter 鍵開始編輯
複雜互動
在桌面上，卡片內容可以展開。（點擊向下箭頭以查看食譜。）
R
西班牙海鮮飯2016 年 9 月 14 日
這道令人印象深刻的西班牙海鮮飯是一道完美的派對料理，也是與您的客人一起烹飪的有趣餐點。如果您喜歡，可以加入 1 杯冷凍豌豆和貽貝。
媒體
使用圖片來強化內容的卡片範例。
蜥蜴
蜥蜴是廣泛分布的鱗狀爬蟲類群，擁有超過 6,000 種物種，分布於除南極洲以外的所有大陸
預設情況下，我們使用 <div> 元素和背景圖片的組合來顯示媒體。在某些情況下可能會出現問題，例如，您可能想要顯示影片或響應式圖片。在這些使用情境下，請使用 component 屬性
蜥蜴
蜥蜴是廣泛分布的鱗狀爬蟲類群，擁有超過 6,000 種物種，分布於除南極洲以外的所有大陸
主要操作
通常，卡片允許使用者與其整個表面互動，以觸發其主要操作，無論是展開、連結到另一個螢幕或某些其他行為。卡片的操作區域可以透過將其內容包裝在 CardActionArea 元件中來指定。
卡片也可以提供補充操作，這些操作應與主要操作區域分離，以避免事件重疊。
太空現場
Mac Miller
活動狀態樣式
若要在卡片處於活動狀態時自訂其樣式，您可以將 data-active 屬性附加到 Card Action Area 元件，並使用 &[data-active] 選擇器套用樣式，如下所示
🎨 如果您正在尋找靈感，可以查看 MUI Treasury 的客製化範例。
API
請參閱以下文件，以完整參考此處提及的元件可用的所有 props 和 classes。