Material Design 2 Tabs aligned at bottom

2
votes

I want to have tabs aligned at the bottom of the md-tab-group, like shown below:

enter image description here

It is possible in Material 1 using md-tabs-align="bottom". Is there anything available in Material 2 for this purpose?

Here is my code:

<md-tab-group> 
    <md-tab label="Tab One"> 
        Tab One Contents 
    </md-tab> 
    <md-tab label="Tab Two"> 
        Tab Two Contents 
    </md-tab> 
</md-tab-group>
3
angularmaterial-designangular-material2

3 Answers

12
votes

For whomever may stumble across this question.

The Tabs section of the component demo site references the following in the API Reference section

@Input()            | Position of the tab header.
headerPosition      |

After looking through the source I found the following:

/** Possible positions for the tab header. */
export type MdTabHeaderPosition = 'above' | 'below';

Thus, the following worked for me

<md-tab-group headerPosition="below"> 
<md-tab label="Tab One"> 
    Tab One Contents 
</md-tab> 
<md-tab label="Tab Two"> 
    Tab Two Contents 
</md-tab> 
</md-tab-group>
2
votes

Think outside the box. Flip the UI upside down and then flip the content back right-side up. 

md-tab-group{
    display:flex;
    transform:rotate(180deg);
    .mat-tab-labels{
        display:flex;
        flex-direction: row-reverse;
        justify-content:space-around;
        & > div{
            flex: 1;
            transform: rotate(180deg);
        }
    }
    md-tab-body{
        transform:rotate(180deg);
        padding:20px;
    }
}

.mat-tab-body-wrapper{
    flex:1;
}
1
votes

See the part about properties within the design document for md-tabs:

Properties

These properties can be applied to any of the root tab component tags: md-tab-group, md-router-tabs, md-tab-bar, md-tab-outlet

[barPosition] - string - Tells the tabs component where to position the tab header - Options: top, bottom

[alignTabs] - string - Tells the tabs component how to align tabs - Options: start, end, center, stretch

Edit #1

Indeed, it does not work. I got the same error with [barPosition]="bottom". In addition, the accordant npm link only lists one property: selectedIndex. Therefore I think, that there is no easy or built-in way to place the tabs at the bottom.

Edit #2

You do not use Ionic 2, do you? If yes, maybe this helps.