CODEWITHSUNDEEP
htmlangularjsangular-material
Sanfelice
Sanfelice

Reputation: 123

Add button-only to md-tab with Angular Material

I'd like to add a button to that will be a button only, without the tab effects, that I would use to add more tabs. I read the and directive documentation but couldn't find how to do this.

Here a snippet of my code:

<div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="MyApp">
  <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
      <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
        <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
          <div ng-bind="tab.content"></div>
          <br>
          <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
        </div>
      </md-tab>
      <md-tab > 
        <md-tab-label>
          <md-icon>add_box</md-icon>
        </md-tab-label>
     </md-tab>
    </md-tabs>
  </md-content>

  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
    <div layout="row" layout-sm="column">
      <div flex="" style="position: relative;">
        <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
      </div>
      <md-input-container>
        <label for="label">Label</label>
        <input type="text" id="label" ng-model="tTitle">
      </md-input-container>
      <md-input-container>
        <label for="content">Content</label>
        <input type="text" id="content" ng-model="tContent">
      </md-input-container>
      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
    </div>
  </form>
</div>

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

Upvotes: 2

Views: 2520

Answers (1)

nextt1
nextt1

Reputation: 3988

Try to use Navigation Bar as it works better in performance and works directly with routes. You can define buttons as you required in that case too. Here is the example code as you needed.

<md-content class="md-padding">
 <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
  <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
  <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
  <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
  <span flex></span>
  <md-button class='md-primary md-raised'>Button</md-button>
</md-nav-bar>
 <div class="ext-content">
  External content for `<span>{{currentNavItem}}</span>
 </div>
</md-content>

Here is the working codepen.

Upvotes: 2

Related Questions