MaterialUI Appbar with Tabs - can it be scrollable AND fullwidth

1
votes

I would like my tab buttons to spread out across the entire screen.

When the screen width is too skinny to fit all the tabs, I would like the scroll buttons to show up.

MaterialUI has variant='scrollable' and the variant='fullWidth'. It does not appear to allow both of these to be used at the same time.

If I use the property scrollButtons='auto' in combination with variant='fullWidth' I don't get scroll buttons when things get to skinny.

Is there a mechanism for letting this work? Centering the buttons mitigates the issue somewhat, but isn't the real answer.

1
reactjsmaterial-ui

1 Answers

1
votes

I know this question has been asked a while ago but in case someone would wonder, here is what I did:

import { Tabs, Tab } from ‘@mui/material’

<Tabs {…propsTabs} variant=“scrollable”>
  <Tab {…propsTab1} sx={{ minWidth: “fit-content”, flex: 1 }} />
  <Tab {…propsTab2} sx={{ minWidth: “fit-content”, flex: 1 }} />
  …
</Tabs>

The MUI Tabs component has a { display: “flex” } property.