Angular - 工具栏被抽屉遮挡而不是侧边栏
创始人
2024-10-14 16:31:17
0次

要解决Angular中工具栏被抽屉遮挡的问题，您可以使用Flex布局来调整组件的显示位置。以下是一种可能的解决方案：

  1. 在HTML模板中，将工具栏和抽屉放在同一个父容器中，并使用Flex布局将它们放在一行中。确保工具栏在抽屉之前。

  
工具栏内容

  
    抽屉内容
    Main内容
  1. 在CSS样式文件中，使用Flex布局将工具栏放在顶部，并设置抽屉容器为剩余空间。
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.toolbar {
  flex: 0 0 auto;
}

.drawer-container {
  flex: 1 1 auto;
}

在这个解决方案中，工具栏被设置为自动适应内容高度，而抽屉容器则填充剩余空间。这样，工具栏将始终位于抽屉之前，不会被抽屉遮挡。

请注意，上述示例中的类名和组件选择器可能需要根据您的实际代码进行调整。

上一篇：Angular - 格式化输入的日期和时间（使用或不使用Angular Material）

下一篇：Angular - Google分析自定义事件

相关内容

热门资讯

6分钟辅助！德州局HHpoke... 6分钟辅助！德州局HHpoker透视脚本，sohoo辅助，操作教程（有挂猫腻）德州局HHpoker透...
八分钟辅助！hh poker辅... 八分钟辅助！hh poker辅助器先试用，wepoker手机版辅助，窍要教程（真的有挂）运hh po...
9分钟辅助！hh poker辅... 9分钟辅助！hh poker辅助有用吗，哈糖大菠萝有没有挂，模块教程（有挂头条）1、下载好哈糖大菠萝...
三分钟辅助！cloudpoke... 三分钟辅助！cloudpoker怎么开挂，来玩app破解版，绝活教程（有挂辅助）1、点击下载安装，c...
第1分钟辅助！德州局HHpok... 您好，wepoker私人局俱乐部怎么进这款游戏可以开挂的，确实是有挂的，需要了解加去威信【48527...
第9分钟辅助！wpk是真的还是... 第9分钟辅助！wpk是真的还是假的，来玩app破解，窍门教程（有挂总结）1、金币登录送、破产送、升级...
2分钟辅助！hhpoker可以... 2分钟辅助！hhpoker可以开挂吗，拱趴大菠萝挂怎么安装，练习教程（有挂头条）1、起透看视 拱趴大...
两分钟辅助！fishpoker... 两分钟辅助！fishpoker透视底牌，wepoker透视最简单三个步骤，演示教程（竟然有挂）1、金...
第三分钟辅助！hhpoker作... 第三分钟辅助！hhpoker作弊码，wepoker怎么看底牌，手段教程（有挂教程）wepoker怎么...
第9分钟辅助！aapoker辅... 第9分钟辅助！aapoker辅助器是真的吗，aa poker辅助包，绝活儿教程（有挂助手）1.aap...