Пользовательский мат-аккордиан и мат-вкладка в зависимости от размера экрана

Question

Мне нужно разработать один пользовательский компонент, который динамически ведет себя в зависимости от размера экрана. для маленьких экранов это будет похоже на мат-аккордеон, а для больших экранов это будет мат-таб.

   <tabs>
     <tab label ='test'>data</tab>
    <tab label ='test1'><data</tab>
  </tabs> 

Answer 1

Использование сетки html является новой нормой для отзывчивых элементов

Требуется работа, чтобы изучить ее. Как только вы поймете это, вы обнаружите, что это отличный инструмент.

Для сокрытия и отображения компонентов на основе размера ViewPort:

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

Затем стиль каждого из них будет выглядеть так:

.foo{display:none;} /* foo is class of element you need to hide*/

Скрытие нужного вам элемента управления.