Как сделать адаптивные компоненты?

Question

[Жук]

К примеру на мобиле есть гармошка (по клику раскрывается текст), а на десктопе это будут вкладки (tabs)?

Answer 1

[Никита Кит]

1) Подрубаем в контекст vue плагин current-device. Я рекомендую его добавлять в прототип Vue. Через Vue install чтоб он всегда был под рукой. Если не шаришь, погугли чёт типа creating plugin Vue.install - там всё просто.
2) Создаём отдельно табы, отдельно аккордеоны. У них должна быть одинаковая модель данных само собой.
3) Создаём обёртку табокордеонов, И под рутом ставим

<template v-if='$device.desktop()'><tabs.../></template>
<template v-else><accordions.../></template>

Вуаля. В зависимости от юзерагента вью зарендерит модель в нужном представлении

Comments

[Жук]

Попробую реализовать и обязательно отпишусь.

Answer 2

[Eduard Shkuta]

CSS Media Queries

Comments

[Жук]

и как бы вы это сделали? Это можно сказать 2 разных компонента и поведение у них разное: скрывать/показывать информацию у одного и у другого показ контента на основе выбранной вкладки

[Никита Кит]

Жук, да ну можно уже на layout-grid и по медиазапросам наколотить... но не нужно =)
А относительно поведения - не соглашусь. Поведение у них аналогичное. Тогглинг разделов UI. И неважно как. Модель данных у них тоже схожа

[Rustam Bainazarov]

Жук, обычно то, что вы хотите делается с помощью того же React и контроля состояния, разрешения. И будет у вас полный контроль над рендерингом вашего компонента. Либо делайте надстройки-костыли с помощью CSS и медиазапросов.