[Docs] Add an example on how to use Tabs inside an AppBar

[oliviertassinari]

Here is the result:

This is also to illustrate what #3004 would break. cc @cgestes.
We should address #1817 at some point.

[mbrookes]

What's the advantage of having Tabs as a child of AppBar, instead of just putting it below AppBar? Or is this just a "because you can" example? The description should probably say in either case.

[oliviertassinari]

What's the advantage of having Tabs as a child of AppBar, instead of just putting it below AppBar?

The AppBar is often set as fixed and is wrapped inside a Paper with a box shadow. Putting the Tabs below won't work.

[alitaheri]

I for one didn't know we could do this, and I needed it in my app O.o

Good example @oliviertassinari 👍 👍

[cgestes]

Humm ok, didn't think about this one. Would it make more sense to use a tabbar property instead of children for this case?

[mbrookes]

@oliviertassinari - makes sense. Perhaps the description could be more explicit? Leave it if you like and I can fix it up later. Once I finish the example descriptions for last few components, I'm going to circle back around and tidy up the descriptions for some of the components I did first, to be more in the style of the later ones that I wrote when I had got more into the swing of it.

[mbrookes]

Incidentally, you can also do this with a little bit of styling:

[cgestes]

Just had to use Tabbar with an AppBar, and I was wondering why we should put the whole application inside the AppBar. Why not allow to disable the shadow of the AppBar instead?

[mbrookes]

@cgestes you can (at least that's how I was doing it before @oliviertassinari posted this), but then you don't have the shadow under the tabs.

[cgestes]

`what's the correct solution then?

If we include support for flexible area that scroll?
Do we need a root component to wrap AppBar, TabBar, flexible space and the page?

[mbrookes]

I don't think either is necessarily more correct, it depends on use case and preference - you have that flexibility.

Yes, you would need a root component, but your flexible space will presumably be nested in each Tab.

[pke]

How is this supposed to work with controlled tabs? The content area is below the appbar. How is it switched when the tabs are toggled?
I can imagine that its something like this:

<AppBar>
<Tabs>
 <Tab lable="tab1">
 <Tab lable="tab2">
</Tabs>
</AppBar>
<div>
{ activeTab == 'tab1' ? <Tab1Content ...props/> : <Tab2Content ...props/> }
</div>

Although this will not maintain state inside the tabcontent component.

Would that work? Or whats the proposed solution?

[mbrookes]

Your content goes inside each tab: http://www.material-ui.com/#/components/tabs

(Controlled example).

[pke]

This results in the appbar expanding all behind the content, which is not the desired result. The appbar should only got until the tabs.

[oliviertassinari]

@pke Have a look at the Swipeable example.
What do we do with this PR? I would say we can close this one and #3004.

[mbrookes]

This results in the appbar expanding all behind the content,
@pke Sorry, I was referring to your Tabs outside AppBar scenario.

@oliviertassinari is this example not still useful for the reasons you mentioned? (But perhaps expanded to include controlled content (like the Swipeable example you just pointed out?) to overcome @pke's issue.

Perhaps we just wait for @igorbt and @newoga's improvements #1321 (comment).

I think we can probably close #1817 (I'm making the assumption that @newoga's extension of #1321 supersedes it - I haven't look at the code for either.)

[oliviertassinari]

@pke The Tabs component has a feature that is to render the children when you provide them. Still, this is optionnal and shouldn't be done when you want your tabs to be swipeable or when you are using the tabs inside the AppBar.

[oliviertassinari]

I'm closing this PR. I'm not fully happy with the style hack I had to use. Let's wait #773 to be resolved.

[mjsevilla]

@mbrookes could you explain how you styled your solution? I would like to implement that in my app.

[mbrookes]

@mjsevilla Here: https://github.com/mbrookes/base/blob/material-ui/imports/ui/components/app-navigation.js and here: https://github.com/mbrookes/base/blob/material-ui/imports/ui/components/authenticated-navigation.js

[mjsevilla]

@mbrookes wow, to be honest, I didn't think I'd get a response from a year old thread! Thank you very much! Looking at the code, it's just a styled Tab bar? No combination of app bar and tab bar?

[mbrookes]

@mjsevilla AppBar is in the first file linked above.

The bootstrap Navbar import there is legacy. This is MeteorChef base converted from bootstrap React to Material-UI, but looks like I missed a couple of bits.