Как работает адаптив?

[scffs]

Судя по доке в <AdaptivityProvider> мы передаем ширину, но как ее определять? Если я передам ViewWidth.SMALL_MOBILE, то всегда будет мобильный дизайн, но что делать для Desktop?

Изначально я думал, что const { viewWidth } = useAdaptivityConditionalRender(); сам определяет ширину, но это оказалось не так.

В общем вопрос такой - как определить ширину экрана юзера, чтобы в зависимости от этого левая колонка скрывалась и появлялся таббар

[BlackySoul]

Привет! Про адаптивность расписано вот здесь и ещё можно почитать этот гайд

Ещё есть пример в доке с требующимся функционалом здесь

Если коротко, то наша адаптивность построена на CSS Media Queries. Хук useAdaptivityConditionalRender возвращает параметры адаптивности, на которые нужно опираться при построение интерфейсов.
Например, нам нужно показывать Tabbar только на планшетах и мобильных устройствах. Будем опираться на параметр viewWidth.

const { viewWidth } = useAdaptivityConditionalRender();

...
// Где-то в коде по условию отрисовываем tabbar
tabbar={
            viewWidth.tabletMinus && (
              <Tabbar className={viewWidth.tabletMinus.className}>
 ...

Данный код будет выполняться для всех устройств с экраном меньшим или равным планшету. Если в AdaptivityProvider было определено, что viewWidth=ViewWidth.DESKTOP, то viewWidth.tabletMinus всегда будет возвращать false, иначе будет возвращена мета-информация, в частности, объект с className, который нужно навесить на компонент, который необходимо показывать/скрывать. Соответственно, при изменении размеров экрана у компонента (Tabbar в примере) будет меняться css-свойство display, отвечающее за отображение на экране.
Замечание: если в AdaptivityProvider ничего не передавать, то все параметры вычисляются автоматически, подстраиваясь под текущие условия.

[scffs]

Привет, что-то не очень вычисляется, если честно)

[scffs]

Если передать viewWidth={ViewWidth.MOBILE}, то всё ок, но такой вариант не подходит

UPD
А если передать в SplitCol className={viewWidth.tabletPlus.className} без передачи viewWidth={ViewWidth.DESKTOP} в AdaptivityProvider, то он не рендерится на больших экранах

[BlackySoul]

Извини за такой долгий ответ.

А можно где-то посмотреть всю структуру приложения полностью? Я правильно понимаю, что ты на десктопах пытаешься скрыть Tabbar? Тогда почему есть некий TabbarDesktop?)

У тебя веб-приложение или в контексте мини-аппов? Установлен ли пакет vk-bridge?

[scffs]

Снова привет, DesktopTabbar - левая колонка на пк, название компонента просто кривое немного))

Весь проект тут, если есть время, то можешь чекнуть
https://github.com/ExercisesMiniApp/Frontend

Если захочешь запустить проект, то чтобы фронт запустить без бекенда, то ты можешь просто запросы к АПИ удалить, они где-то в FetchUser.ts лежат

Логика отображения таббара и левой колонки в src/App.tsx

Там сейчас элементам не задаётся className из viewWidth, но у меня с ним вообще ничего не отображается)))

[BlackySoul]

Хмм, вроде бы у меня все работает, как ожидается

2023-06-30.11.20.05.mov

Изменения такие (ещё добавила в TabbarMobile проброс пропа className):

const { viewWidth } = useAdaptivityConditionalRender();

  const MobileTabbar = viewWidth.tabletMinus && (
    <Suspense>
      <TabbarMobile className={viewWidth.tabletMinus.className} />
    </Suspense>
  );

  const DesktopTabbar = viewWidth.tabletPlus && (
    <SplitCol
      fixed
      width={280}
      maxWidth={280}
      autoSpaced
      className={viewWidth.tabletPlus.className}
    >
      <Suspense>
        <TabbarDesktop />
      </Suspense>
    </SplitCol>
  );

Из того, что заметила - Tabbar ещё необходимо вкладывать в Epic, по структуре должно быть как здесь.

UPD.: увидела, что ты в контексте мини-приложений запускаешь, сейчас попробую тоже
UPD.: в контексте мини-приложений тоже работает, колонка слева скрыта

[scffs]

Интересненько... Позже смогу чекнуть и отпишу, надеюсь, что поможет

[scffs]

В браузере действительно всё адаптируется, но в самом mini app у меня таббар, а не SplitCol. SplitCol скрывается, если viewWidth < 1024px, но в настройках приложения нельзя поставить ширину > 1000px

[BlackySoul]

А почему в mini app'е должен быть SplitCol? Так и должно же работат, т.е. ширина меньше 1024px, колонка SplitCol скрыта

[scffs]

Я вообще думал в аппах тоже SplitCol бывает, а то странно как-то, заходишь с ПК, а у тебя дизан как на мобилке.. Ну ок)