2016-11-23 8 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

関連する問題