iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

Material UI in React系列 第 18

Material UI in React [ Day 18 ] Drawer (側邊欄)

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",一樣是比較少會用於現在的網頁設計,但如果有需求的話可以參考官方的範例

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


上一篇
Material UI in React [ Day 17 ] Surfaces App Bar (應用欄)
下一篇
Material UI in React [ Day 19 ] Surface
系列文
Material UI in React30

尚未有邦友留言

立即登入留言