CODEWITHSUNDEEP
cssangularjstabsangular-material
developthewebz
developthewebz

Reputation: 1937

Show only active md-tab

I am trying to show only the active tab in md-tabs on mobile view. I want the tab to be centered, and when I user swipes left or right, the tab title changes with the next or previous (somehow should be 100% width). Is this possible?

I have my tabs set up like this:

<md-toolbar>
    <md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
        <md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding>
    <ng-switch on="selectedDay" class="tabpanel-container">
        <div>
            <p>{{selectedDayInfo.day}}</p>
        </div>
    </ng-switch>
</md-content>

Please see the following Plunkr: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview

Upvotes: 1

Views: 833

Answers (1)

Chris Hermut
Chris Hermut

Reputation: 1758

I would play around with 'hide' attributes - https://material.angularjs.org/latest/layout/options.

Also it would be fairly easy (without looking at your code) to just create logic that would detect screen size and from there just to create different DOM elements based on that (ng-show etc.).

Upvotes: 0

Related Questions