angular-material2 отзывчивый показать/скрыть

Можно ли контролировать видимость элемента с angular-material2, используя

hide-xx  show-xx hide-gt-xx show-gt-xx

я знаю, что это работает с angularJS-материалом.
Код ниже не работает:

<md-toolbar color="primary">
  <span>Application Title</span>  
  <span class="example-fill-remaining-space"></span>
  <button md-button hide-xs show-gt-xs>Auto hide button</button>  
</md-toolbar>

Я использую https://github.com/angular/material2 версии 2.0.0-beta1.

Если нет, есть ли другой способ сделать это без использования *ngif и прослушивателей изменения размера экрана или других фреймворков css, таких как Bootstrap?
Также делает https://github.com/angular/flex-layoutКстати,уrel= есть такая возможность?


person Y Borys    schedule 31.01.2017    source источник
comment
Что вы имеете в виду, это еще один способ сделать это без использования *ngif и прослушивателей изменения размера экрана или других фреймворков CSS, таких как Bootstrap?   -  person Roman C    schedule 31.01.2017
comment
Я не хочу использовать Bootstrap вместе с Material, потому что слышал о некоторых конфликтах/переопределениях в css. И насчет ngif - я хочу использовать логику в html-шаблоне без использования контроллера (файлы typescript)   -  person Y Borys    schedule 31.01.2017


Ответы (1)


Я бы порекомендовал @angular/flex-layout, как вы уже упоминали!

Это дополнительный пакет - требуется установка, он не является частью angular!

Возможные варианты:

  • fxСкрыть
  • fxHide.xs
  • fxHide.gt-xs
  • fxHide.sm
  • fxHide.gt-sm
  • fxHide.md
  • fxHide.gt-md
  • fxHide.lg
  • fxHide.gt-lg
  • fxHide.xl

Применение:

<div fxFlex="60" fxHide.xs></div>

живая демонстрация: https://plnkr.co/edit/yrhaGtFpHOlYYOTqzDDO?p=preview

документация здесь:

https://github.com/angular/flex-layout/wiki/API-Documentation

https://github.com/angular/flex-layout/wiki/fxShow-API

https://github.com/angular/flex-layout/wiki/fxHide-API

person slaesh    schedule 31.01.2017
comment
Где документация на это? Я ненавижу искать в Google каждый класс или функцию, которые у них уже есть из коробки. - person LOTUSMS; 29.04.2017
comment
я думаю, что в настоящее время есть только вики: github.com/angular/flex-layout/wiki - person slaesh; 29.04.2017
comment
Спасибо. Ваш ответ должен скоро побить рекорды. Пока это единственный ответ Google. - person LOTUSMS; 29.04.2017
comment
Следует отметить, что @angular/flex-layout не поставляется в комплекте с angular cli, вам придется установить его в свое приложение npm install @angular/flex-layout@latest --save и импортировать в app.module import { FlexLayoutModule } from '@angular/flex-layout' - person Ian Poston Framer; 27.09.2017