iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

Material UI in React系列 第 19

Material UI in React [ Day 19 ] Surface

在這邊我會一起講解這一 part 裡面的組件,由於 App Bar 的部分之前已先講解這邊就不再提及。

Paper

這個組件很常出現在前面的範例當中,其實跟他的命名一樣,希望他能保有紙張的特性,預設的情況下是有 borderRadius: 5px的,如果想要拿掉要下 square,它本質上就是一個 div 給予圓角及陰影。

<Paper />
<Paper elevation={3} />
<Paper variant="outlined" square />

Card

這個組件可以快速幫你做出一張卡片的效果,外層為 Card 組件封包,內層由 CardContent & CardAction 兩個組成,content 通常用來擺資訊,action 通常來擺按鈕。

<Card>
  <CardContent>
    <Typography variant="h5" component="h2">
      基德
    </Typography>
    <Typography variant="body2" component="p">
      並沒有
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

當然卡片裡面的內容可以照自己的需求去修改,這部分的話就請到官方文件去看詳細範例吧!

Accordion

這個組件就有使用到 collapse 的概念,算是套包組吧。

<Accordion>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
    id="panel1a-header"
  >
    <Typography className={classes.heading}>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
      sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>

基本上一個 accordion 會是一個選項,所以要控制的話只要在最外層的 Accordion 去下 onChange function就可以控制了。
其他自訂的方法一樣請到官方文件上查詢。

那麼今天的內容就到這邊,明天的話會講解 Feedback 的部分。


上一篇
Material UI in React [ Day 18 ] Drawer (側邊欄)
下一篇
Material UI in React [ Day 20] Feedback
系列文
Material UI in React30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言