Material-ui: appbar with tabs

[thomasdelaet]

Thanks for this amazing framework!

I'm trying to create an appbar with integrated tabs. Something like this: http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsOUdyb0FjQTJTdlk/components_tabs_usage_mobile3.png

Anyone has an idea on how to best achieve this?

Thanks!

[oliviertassinari]

Yes you can with somethings like

var styles = {
  appBar: {
    flexWrap: 'wrap',
  },
  tabs: {
    width: '100%',
  },
};

       <AppBar title={xxxx} style={styles.appBar}>
          <Tabs onChange={this.onChangeTabs} style={styles.tabs}>
            <Tab label={xxxx} />
            <Tab label={xxxx} />
            <Tab label={xxxx} />
          </Tabs>
        </AppBar>

[thomasdelaet]

Thanks Olivier

I did have to use some extra styling for padding but it worked.

Thanks.

[oliviertassinari]

This is a hack waiting #773 to be addressed.

[shilch]

Hi, thank you for this framework and the hack above!
Sadly there is one problem I am facing:
When using Tabs with the AppBar, there should not be this menu icon. So I disable it using showMenuIconButton={false} .
This makes the title disappear:

Without the styles from the hack it looks like this:

Do you have any ideas?
Thank you in advance!

[oliviertassinari]

@shilch That looks like an issue with the flexboxes. Try playing with the flex styles.

[tarifrudrapur]

Guys put your tabs inside a title of AppBar try this
<AppBar title={ <Tabs onChange={this.onChangeTabs} style={styles.tabs}> <Tab label={xxxx} /> <Tab label={xxxx} /> <Tab label={xxxx} /> </Tabs> } />

[ego]

Try like this

const styles = {
    paddingLeft: "20px"
};

const HeaderMenu = () => (
    <div>
      <span style={styles}>Blog</span>
      <span style={styles}>Event</span>
      <span style={styles}>Technology</span>
    </div>
);

<AppBar title={<HeaderMenu/>} />

[snsheth55]

Hello,

I am having difficulty getting the Appbar to wrap around with tabs, when the all of the tabs do not fit onto one line, this works automatically with strings but for tabs I'm not sure what to do.

This is my current set up using tabs inside the app bar

        <AppBar
          component="div"
          className={classes.secondaryBar}
          color="primary"
          position="sticky"
          elevation={10}
        >
          <Tabs value={getValue()} textColor="inherit" >
            <Tab key={'overview'} label="Overview" href={`/EditContracts/${tab}`}/>
              {arr}
            <AddTab value={props.numberOfSections + 1} addSection={tab2==='addSection'}/>
          </Tabs>
          {props.loading ? <LinearProgress color="secondary" /> : null}
        </AppBar>