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 的部分。