iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

從 React 開始,讓你的ui material 起來系列 第 8

[Day 8] 常用的卡片 Card

  • 分享至 

  • xImage
  •  

Day 7
卡片在商品介紹 或登入介面時常用到

通常格式為一張圖片 與他的title 配上說明
也有可能是 登入 及輸入密碼跟帳號的input

使用架構如下 配合昨天介紹的APP Bar 一個簡單的商品介紹跟使用者UI可以很迅速地套用元件完成

 <Card sx={{ maxWidth: 345 }}>
              <CardMedia
                component="img"
                height="140"
                image="https://fakeimg.pl/350x200/?text=Hello"
                alt="green iguana"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                溯溪鞋
                </Typography>
                <Typography variant="body2">
                溯溪鞋 可以飛天遁地
                </Typography>
              </CardContent>
              <CardActions>
                <Button size="small">Share</Button>
                <Button size="small">get More</Button>
              </CardActions>
            </Card>

Day 8


上一篇
[Day 7] 網頁的開頭 App Bar
下一篇
[Day 9] 漂亮的輸入框 TextField 文本框
系列文
從 React 開始,讓你的ui material 起來15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言