angularjs – md-tab,右上角的按钮,角度材料

发布时间：2020-12-17 17:54:31 所属栏目：安全来源：网络整理

导读：有没有什么好方法可以在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.to

有没有什么好方法可以在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

解决方法

是的,您可以通过在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!