角材料导航示意图断点

Question

我正在尝试使用“角/材料:角材料指南”中的nav示意图。

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

在模板中，sidenav显示在大屏幕设备上，然后在不到960px时变成一个汉堡包菜单。

960px或以上

小于960px

有人知道这是怎么安排的吗？例如，我想要大屏幕设备上的汉堡包菜单？

谢谢!

Answer 1

断点在常量中指定。

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)