Angular Flex & Material: скрыть атрибут кнопки в зависимости от размера экрана

Question

Можно ли показать / скрыть определенные атрибуты тега <button> в зависимости от размера экрана с помощью Angular Flex & Material?

Примерно так (не работает, к сожалению):

 <button [fxFlex.lg]="'mat-raised-button'"
         [fxFlex.md]="'mat-icon-button'"
        (click)="new()">
    ...
</button>

Answer 1

Библиотека flex-layout содержит отзывчивую документацию , в которой вы найдете следующие атрибуты:

[fxHide.md]
[fxShow.md]

и так далее.

Вы можете использовать их, чтобы показать / скрыть элементы на основе точек останова, определенных библиотекой;или создайте свои собственные точки останова, если вам нужно.

Вот пример и соответствующий код:

<button [fxHide.xs]="true" [fxHide.md]="true">I'm only displayed on small screen width !</button>

Answer 2

Следуя моему первому ответу, он должен сказать вам, что нет никакого способа применить директиву conditonnaly к шаблонам только с использованием fxFlex.

Однако для вашей проблемы подходит тот факт, что библиотека fxFlex имеет расширение ngClass, которое позволяет применять классы к элементам.

В этом примере вы можете видеть, как он работает.Все, что вам нужно сделать, это применить правильные классы (взятые из библиотеки материалов), чтобы заставить его работать.

Хотя это и не оптимально, это делает работу.Я все еще рекомендовал бы использовать любую из двух кнопок, что более чисто с точки зрения использования библиотеки.

Answer 3

Я не знаю материала или что делает fxFlex.Но если вы не получите никакой другой помощи, вы можете использовать чистые CSS или SCSS

<button [fxFlex]="'mat-raised-button'" id="button1" (click)="new()">...</button>
<button [fxFlex]="'mat-icon-button'" id="button2" (click)="new()">...</button>

и

@media (min-width: 1000px) { //lg 
    #button2 {
      display:none;
    }
}
 @media (max-width: 1000px) { //md 
    #button1{
      display:none;
    }
}