lostintranslation lostintranslation - 6 days ago 7
AngularJS Question

How to add content to Angular Material Tabs

I am trying to put tabs in my toolbar w/ angular material.

I found a great example:

<md-toolbar layout="row" layout-align="center end">
<div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
<span flex></span>
<md-tabs md-stretch-tabs="always" class="md-primary">
<md-tab id="tab1" aria-controls="Tab 1">
<md-tab-label>Tab 1</md-tab-label>
</md-tab>
<md-tab id="tab2" aria-controls="Tab 2">
<md-tab-label>Tab 2</md-tab-label>
</md-tab>
</md-tabs>
</div>
</md-toolbar>


Works perfect, except that I am not sure how to add content.

If I put an
<md-tab-body>
tag inside the
<md-tab>
tag then the toolbar expands and that new content is within the toolbar, which I don't want. I want the tab content to be below the toolbar.

I just started to play around with angular material so I feel like I am missing something fundamental.

Looking at the tab docs it seems like used tabs with external content might useful, however the docs do not go into how one might do that.

Answer

I think this should help you, I am new to this But by reading doc code here ,I found that the content can be added using md-tab-body. So I tried that you can see this codepen . I have added the md-tab-body just below md-tab-label. Hope this helps you. Thank you for showing me such a nice designing material.

Adding my code here:

<md-toolbar layout="row" layout-align="center end">
<div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
    <span flex></span>
    <md-tabs  md-stretch-tabs="always" class="md-primary">
        <md-tab id="tab1" aria-controls="Tab 1">
            <md-tab-label>Tab 1</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab One</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
        <md-tab id="tab2" aria-controls="Tab 2">
            <md-tab-label>Tab 2</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab Two</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
    </md-tabs>
</div></md-toolbar>

Edit1 ok.But I think your question didn't mention anything about the color.Those can be done with css too. Now I have updated the codepen and you can see that here or here or this with other color here. Hope this helps you. and If this helps you please rate my answer.

Edit2 Ok.After searching more on web I found that something called md-selected can be used to keep track of which tab is selected. and then Based on the value of that index I used ng-switch-when the value is that index. It is just similar to normal Switch-case statements. I also removed that css so the it becomes more clear. You can see the solution here.I hope my solution is clear to you. I tried to keep it as simple as possible. Thank you.

Comments