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"，一样是比较少会用於现在的网页设计，但如果有需求的话可以参考官方的范例。

那麽以上就是今天的全部内容了，明天的话会接续讲解後续的内容。