如何根据屏幕宽度切换垫扩展面板？

Question

我有一个扩展面板需要在某些媒体设备上关闭。例如如果网络应用程序在移动设备上，我想收缩扩展面板，如果它在桌面上，我想扩展它。我怎样才能达到这个要求？

这是我用的垫子扩展板

<mat-accordion class="example-headers-align">
                <mat-expansion-panel>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      Description
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <p class="">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Viverra nibh cras pulvinar mattis nunc sed blandit. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Consectetur lorem donec massa sapien faucibus. In est ante in nibh. Ullamcorper malesuada proin libero nunc consequat interdum varius. Curabitur vitae nunc sed velit. Mauris a diam maecenas sed enim ut sem viverra.        
                  </p>
                </mat-expansion-panel>
              </mat-accordion>

我研究可以通过在 css 中使用 @media 属性来做到这一点。

@media only screen and (max-width: 600px) {
  */contract expansion panel*/
}

帮助将不胜感激。提前致谢。

Answer 1

在您的 .ts 文件中，您可以访问 window 宽度。您可以使用以下属性之一执行此操作：

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;

然后您可以简单地根据返回的数字以编程方式切换您的 mat-expansion-panel。

您应该能够使用此问题的答案之一进行扩展：

Answer 2

对于这种情况，您可以从控制器端使用媒体查询，而不是从 CSS 文件。

我的意思是说将屏幕宽度的值（使用 JS 的媒体查询）存储在某个变量中，并根据变量的值切换手风琴。

在 mat-expansion-panel 中有使用 expanded

的属性绑定

           <mat-accordion class="beagel-headers-align">
            <mat-expansion-panel [expanded]="isMobileWidth">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Description
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p class="">
                Lorem ipsum.....
              </p>
            </mat-expansion-panel>
          </mat-accordion> 


          isMobileWidth = true // check here using media query in .ts file

如何根据屏幕宽度切换垫扩展面板？

How to toggle mat expansion panel based on screen width?

css

angular

angular-material

mat-expansion-panel