Как переключить панель расширения коврика в зависимости от ширины экрана?

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> 

Я исследую, как это можно сделать, используя атрибут @media в css.

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

Помощь будет оценена. Заранее спасибо.

Answer 1

В вашем файле.ts вы можете получить доступ к ширине окна. Вы можете сделать это, используя одно из следующих свойств:

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

Затем вы можете просто переключить mat-expansion-panel программно на основе возвращенного числа.

Вы должны иметь возможность использовать один из ответов на этот вопрос для расширения: Как программно переключать панель расширения материала Angular

Answer 2

Для таких сценариев вы можете использовать Media Queries со стороны контроллера, а не из файла 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