2017-01-19 2 views
0

md-tabs要素の最後のタブをクリックしてメニューを表示しようとしています。タブラベルをクリックするとメニューを表示できますが、タブの空のゾーンをクリックすると、通常通りに動作し、関連するタブが表示されます。マテリアルデザイン:ラベルだけでなく、タブ全体のボタンの選択アクションを変更する

ラベルの動作をタブ全体に拡張するにはどうすればよいですか。

ここでは、私はそれのうち、このように得たいくつかのコード

<md-tabs class="stretch-height" flex md-selected="mbpSelectedIndex" md-border-bottom 
    md-dynamic-height> 
    <md-tab ng-repeat="tab in mbpTabs" md-on-select="onTabSelected(tab)"> 
     <md-menu context-menu> 
     <div flex class="mbpTable" ng-right-click="$mdOpenContextMenu($event)">{{tab.title}}</div> 
     <md-menu-content> 
      <md-menu-item > 
       <md-button ng-click="showDeleteTabDialog($index, tab.title)" ng-disabled="mbpTabs.length<=1">Delete</md-button> 
      </md-menu-item> 
      <md-menu-item > 
       <md-button ng-click="renameTab($index, tab.title)">Rename</md-button> 
      </md-menu-item> 
      <md-menu-item > 
       <md-button ng-click="createTab()">New Tab</md-button> 
      </md-menu-item> 
      <md-menu-item ng-controller="watchlistsController"> 
       <md-button ng-click="showWatchLists()">Create from Wathclist...</md-button> 
      </md-menu-item> 
     </md-menu-content> 
     </md-menu> 
     <md-tab-body> 
     <div ag-grid="tab.mbpTable.table" class="ag-mbp mbpTable" id="mbpPanel"></div> 
     </md-tab-body> 
    <!-- this is the intersting tab--> 
    </md-tab> 
    <md-tab md-on-select="return"> 
     <md-menu> 
     <div flex class="mbpTable" ng-click="$mdOpenMenu($event)">+</div> 
     <md-menu-content> 
      <md-menu-item ng-repeat ="tab in mbpTabs"> 
       <md-checkbox aria-label="{{tab.title}}">{{tab.title}}</md-checkbox> 
      </md-menu-item> 
      <md-menu-divider></md-menu-divider> 
      <md-menu-item > 
       <md-button ng-click="createTab()">Create Custom Tab</md-button> 
      </md-menu-item> 
     </md-menu-content> 
     </md-menu> 
    </md-tab> 
</md-tabs> 
+0

ng-click = "$ mdOpenMenu($ event)"をdivから親要素に移動します。あなたが望む効果が得られるまで、動き続けてください。 –

+0

@AmirTalicは機能しません –

+0

次に、あなたのng-clickを上書きしている親要素に接続されている他のイベントがあるかもしれません。 –

答えて

0

です:

私はCSSでこれを追加しました:

md-tab-item:last-of-type{ 
    padding:0!important; 
    width:40px; 
} 

この最後のタブボタンはパディングを持っていませんタブを切り替えずにタブ全体のボタンを押すことができます。固定幅は、ラベルがちょうど '+'であることに関連しているため、自動幅では小さすぎます。

関連する問題