Вкладки пользовательского интерфейса материалов не прокручиваются в мобильном представлении

avatar
user8779054
9 августа 2021 в 02:28
1033
1
0

Прокрутка вкладок пользовательского интерфейса материалов не работает в мобильной версии

Я пытался поставить следующее

      variant="scrollable"
      scrollButtons="auto"

Вот фрагмент моего кода

          subheader={(
            <Tabs scrollButtons="on" variant="scrollable" value={activeTab} onChange={e => this.handleChange(e)}>
              <Tab key="Overview" activetab={0} label="Overview" />
              <Tab key="Followers" activetab={1} label={getTabCount('Followers', facets.followers)} />
            ....
            </Tabs>
          )}

Обновление:

Похоже, это существующая проблема. Когда мы переключимся на мобильный режим, вы сможете увидеть проблему.

Codesandbox: https://codesandbox.io/s/material-demo-forked-gdrfp?file=/demo.js&resolutionWidth=320&resolutionHeight=675

https://github.com/mui-org/material-ui/issues/22598

Ссылка: https://material-ui.com/components/tabs/

Источник
Drew Reese
9 августа 2021 в 02:35
0

Всего две вкладки... они уже влезают во вьюпорт? Я не верю, что стрелки прокрутки будут отображаться, если не будет больше контента для просмотра.

user8779054
9 августа 2021 в 02:54
0

У нас есть около 4 вкладок. Одна из вкладок обрезана, так как мы пытаемся отобразить ее и в мобильном представлении. Следовательно, пытаясь иметь возможность прокрутки

Drew Reese
9 августа 2021 в 03:00
0

Я понимаю. Можете ли вы обновить свой вопрос, включив в него минимальный, полный и воспроизводимый пример кода, который мы можем просмотреть?

user8779054
9 августа 2021 в 03:12
0

Обновлено. Но это похоже на существующую проблему в github, основываясь на дальнейших исследованиях.

Drew Reese
9 августа 2021 в 03:23
0

Я вижу, и да, похоже, это известная проблема.

Ответы (1)

avatar
user8779054
18 августа 2021 в 15:41
0

Удалось получить ответ от команды отдела пользовательского интерфейса материалов.

Это будет исправлено в пользовательском интерфейсе материала 5 - https://next.material-ui.com/

Пример для v5 на codeandbox: https://codesandbox.io/s/material-demo-forked-2yw9t?file=/demo.js:0-2159&resolutionWidth=320&resolutionHeight=675<586708448122>