gpt4 book ai didi

css - Angular 7 - 如何根据窗口大小处理两个不同的导航栏?

转载 作者:行者123 更新时间:2023-11-28 14:29:54 28 4
gpt4 key购买 nike

我想我的问题很简单,

我正处于一个元素的开始阶段,我刚刚完成了 Sidenav(位于屏幕左侧),我实际上将其用作一个组件。我想在窗口较小时使用“普通”顶部导航栏,但我不知道如何实际实现它。顶部导航栏是否需要另一个组件?如果是这样,我如何根据窗口大小在这 2 个之间切换?

顺便说一句,我使用 Materialize CSS...

最佳答案

我遇到了类似的问题。当我在 Angular 中创建简历时,我想在屏幕大于 700 像素时显示 mat-h​​orizo​​ntal-stepper,在小于 700px 时显示 mat-vertical-stepper比它。所以我为 window:resize 事件创建了一个 HostListener

This is my deployed resume, if you resize you can see the expected behavior.

This is how my HTML with horizontalStepper, at line 23 you can see that if the value is true show something, otherwise show something else.

And this is my component's TS file, at line 36 you can find the HostListener.

关于css - Angular 7 - 如何根据窗口大小处理两个不同的导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54226005/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com