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

【问题标题】：How to toggle mat expansion panel based on screen width?如何根据屏幕宽度切换垫扩展面板？
【发布时间】：2020-07-09 21:52:25
【问题描述】：

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

这是我用的垫子扩展面板

<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*/
}

我们将不胜感激。提前致谢。

【问题讨论】：

标签： css angular angular-material mat-expansion-panel

【解决方案1】：

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

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

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

您应该能够使用此问题的答案之一进行扩展：How to toggle Angular material expansion panel programmatically

【讨论】：

【解决方案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

【讨论】：

谢谢这给了我这个想法。使变量为 true 对我有帮助。