2016-11-23 59 views
4

在md-tab指令的右角有沒有什麼好方法可以獲得一些按鈕?md-tab,右上角的按鈕,角材料

我嘗試了一些與位置:絕對等,但它發現有點哈克。

<div style="position:absolute; top:15px; right:5px; z-index:5000"> 
    <md-button class="md-primary md-icon-button toolbar-button" ng-click="vm.toggleFullScreen()" aria-label="toggle fullscreen"> 
    <md-icon md-font-icon class="zmdi zmdi-fullscreen"></md-icon> AAA 
    </md-button> 
</div> 

<md-content> 
    <md-tabs> 
     <md-tab label="one"> 
     </md-tab> 
     <md-tab label="two"> 

     </md-tab> 
     <md-tab label="three"> 

     </md-tab> 
    </md-tabs> 
    </md-content> 

http://codepen.io/anon/pen/yVbrjR

回答

7

是的,你可以通過在樣式表裏面添加按鈕md-tabs和編輯md-tab-data

HTML

<md-content> 
    <md-tabs> 
     <md-button class="md-primary md-icon-button toolbar-button" ng-click="vm.toggleFullScreen()" aria-label="toggle fullscreen"> 
     <md-icon md-font-icon class="zmdi zmdi-fullscreen"></md-icon> AAA 
     </md-button> 

     <md-tab label="one"> 
     </md-tab> 
     <md-tab label="two"> 

     </md-tab> 
     <md-tab label="three"> 

     </md-tab> 
    </md-tabs> 
    </md-content> 

CSS

md-tab-data{ 
    opacity: 1; 
    display: table; 
    right: 0; 
    left: initial; 
    z-index: 20; 
} 

演示

http://codepen.io/anon/pen/QGgKEq