md-tab, buttons in right top corner, angular material

Question

Is there any good way of getting some buttons in the right corner of the md-tab directive?

I tried some with position:absolute etc but it find kinda 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

Yes, you can do that by adding buttons inside md-tabs, and editing md-tab-data in your stylesheet.

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;
}

Demo

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