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

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

1 个答案: