HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – Material UI Drawer不会在Appbar下移动大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个Appbar和它下面的抽屉.在这两个组件下我有3个带有bootstrap的div,在每个div中我有一组按钮.

问题是抽屉覆盖了Appbar,我似乎无法移动它.

这是我的代码:

在第一个引导列之后,接着是另一个“col-sm-4”,然后是“col-sm-2”.按钮位于GridList中

这是一个视觉

html  –  Material UI Drawer不会在Appbar下移动

抽屉应该从箭头相遇的地方开始.

有任何想法吗?

最佳答案
@H_958_19@material-UI文档称之为clipped under the app bar的Drawer.要实现它,首先必须为AppBar定义样式对象的z-index:

const styles = theme => ({
  appBar: {
    // Make the app bar z-index always one more than the drawer z-index
    zIndex: theme.zIndex.drawer + 1,},});

然后将其应用于AppBar组件:

由于您的抽屉现在位于AppBar下方,因此您需要将抽屉中的内容向下移动到屏幕下方,以便它不会隐藏在栏下方.您可以使用theme.mixins.toolbar完成此操作.首先,添加工具栏样式:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,// Loads information about the app bar,including app bar height
  toolbar: theme.mixins.toolbar,});

然后,将以下div添加为抽屉中的第一个内容:

工具栏样式将从当前主题加载有关应用栏高度的信息,然后调整div的大小,以确保应用栏不会隐藏内容.

您可以找到完整的代码示例here.

大佬总结

以上是大佬教程为你收集整理的html – Material UI Drawer不会在Appbar下移动全部内容,希望文章能够帮你解决html – Material UI Drawer不会在Appbar下移动所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。