각도 재질의 md-tab에 버튼 만 추가

Question

버튼을 추가하고 싶습니다. 탭 효과가없는 버튼 일 뿐이므로 더 많은 탭을 추가하는 데 사용합니다. 나는 지시어 문서를 읽었지만 어떻게해야 하는지를 알 수 없었다. 여기

내 코드의 조각 :

<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

Answer 1

시도가 성능이 더 잘 작동하고 경로와 직접 작동으로 Navigation Bar을 사용합니다. 이 경우에도 단추를 정의 할 수 있습니다. 다음은 필요한 예제 코드입니다.

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

여기는 working codepen입니다.