Drawer

這個組件其實就是我們常用的 sidebar，繼前一天的章節結合，就可以完成一個完整的應用欄，它們可以直接顯示在頁面上，也可以由 navbar Menu icon 控制。

// in export function
const [drawerOpen, setDrawerOpen] = React.useState(false);

// in return
<div>
  <Button onClick={() => setDrawerOpen(true)}>left</Button>
  <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
    <List>
      <ListItem>基本資料</ListItem>
      <ListItem>設定</ListItem>
      <ListItem>相簿</ListItem>
    </List>
  </Drawer>
</div>

可以透過 anchor 屬性去更改 sideBar 彈出來的地方，預設值是 left。

// in return
<div>
  <Button onClick={() => setDrawerOpen(true)}>left</Button>
  <Drawer open={drawerOpen} anchor="right" onClose={() => setDrawerOpen(false)}>
    <List>
      <ListItem>基本資料</ListItem>
      <ListItem>設定</ListItem>
      <ListItem>相簿</ListItem>
    </List>
  </Drawer>
</div>

Swipeable

可以使用 SwipeableDrawer 組件使可滑動，該組件帶有 2kB 壓縮負載開銷，一些低端移動設備將無法以 60 FPS 的速度跟隨滑動，可以使用 disableBackdropTransition 屬性來提供幫助，詳細見官方文件。

Persistent drawer

他是一個可以推縮內容的 sideBar，透過設定屬性 variant="persistent"，雖然這個做法現在比較不流行了但如果有需求的話，還是可以參考官方文件的範例，因為內容比較多我這裡就不再示範了。

Mini variant drawer

和上面的情況是一樣的，只是可以顯示部分內容於側邊欄位，透過設定屬性 variant="permanent"，一樣是比較少會用於現在的網頁設計，但如果有需求的話可以參考官方的範例。

那麼以上就是今天的全部內容了，明天的話會接續講解後續的內容。