MUI 可滑动抽屉，但让某些部分始终可见

Question

我的目标是有一个可滑动的页脚，类似于：

MUI Swipeable Drawer 看起来非常接近，要是我能让它不完全关闭并保持某些部分可见就好了。可以吗？

Answer 1

你可以用这样的按钮做一些事情:

const useStyles = makeStyles({
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  buttonDrawer: {
    position:"absolute",
bottom:0,
left:0,
border:"1px solid ",
borderRadius:0
  }
});

export default function SwipeableTemporaryDrawer() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]: anchor === 'top' || anchor === 'bottom',
      })}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <div>
      {[ 'bottom'].map((anchor) => (
        <React.Fragment key={anchor}>
          <Button fullWidth className={classes.buttonDrawer}   onClick={toggleDrawer(anchor, true)}><KeyboardArrowUpIcon/></Button>
          <SwipeableDrawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
            onOpen={toggleDrawer(anchor, true)}
          >
             <Button fullWidth    onClick={toggleDrawer(anchor, false)}><KeyboardArrowDownIcon/></Button>
            {list(anchor)}
          </SwipeableDrawer>
        </React.Fragment>
      ))}
    </div>
  );
}

沙盒here
这是基于 material ui 演示沙箱，当然，样式是完全可定制的 ;-)

Answer 2

我有类似的任务，也许这篇codesandbox对你有帮助 https://codesandbox.io/s/ykj8t?file=/demo.tsx

MUI 可滑动抽屉，但让某些部分始终可见

MUI Swipeable Drawer but let some part be always visible

reactjs

mobile

material-ui

footer

drawer