Angular material 导航示意图断点

Question

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

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

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

960px or more

less than 960px

有谁知道这是怎么设置的？例如我想要大屏幕设备上的汉堡菜单？

谢谢！

Answer 1

断点在Breakpoints constant:

中指定

export const 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)

Angular material 导航示意图断点

Angular material nav schematics breakpoint

nav

angular-material

angular