Question

我正在尝试使用Angular材质指南中的@ angular / material：nav原理图。

ng generate @angular/material:nav <component-name>

在模板中，sidenav显示在大屏幕设备上，然后在小于960px时变成汉堡菜单。

960px or more

less than 960px

有人知道如何设置吗？例如，我想在大屏幕设备上使用汉堡包菜单吗？

谢谢！

Answer 1

您可以看到此页面https://github.com/angular/cdk-builds/blob/9aaa7b156a983a3be5f3f0b3ddc658dcbf72f0f1/bundles/cdk-layout.umd.js。我们有不同的断点

var Breakpoints = {
    XSmall: '(max-width: 599.99px)',
    Small: '(min-width: 600px) and (max-width: 959.99px)',
    Medium: '(min-width: 960px) and (max-width: 1279.99px)',
    Large: '(min-width: 1280px) and (max-width: 1919.99px)',
    XLarge: '(min-width: 1920px)',
    Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
        '(max-width: 959.99px) and (orientation: landscape)',
    Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
        '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
    Web: '(min-width: 840px) and (orientation: portrait), ' +
        '(min-width: 1280px) and (orientation: landscape)',
    HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
    TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
    WebPortrait: '(min-width: 840px) and (orientation: portrait)',
    HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
    TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
    WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

现在您可以更改断点，也可以自定义断点，例如

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

->

  isTablet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Tablet)

角材料导航示意图断点

1 个答案: