0

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

这是我使用的垫子扩展面板

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

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

4

2 回答 2

1

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

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

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

您应该能够使用此问题的答案之一进行扩展：如何以编程方式切换 Angular 材质扩展面板

于 2020-07-08T10:17:28.023 回答
1

对于这种情况，您可以使用来自控制器端的媒体查询，而不是来自 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
于 2020-07-08T10:18:20.340 回答