md-tab,右上角的按钮,棱角分明的材质

Question

有没有什么好的方法可以在md-tab指令的右上角找到一些按钮？

我尝试了一些与位置:绝对等但它发现有点hacky.

<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

Answer 1

是的,您可以通过在里面添加按钮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