Material Design: Ändern Sie die Aktion für die gesamte Registerkarte, nicht nur für das Etikett

Ich versuche, ein Menü anzuzeigen, indem Sie auf die letzte Registerkarte eines Elements md-Tabs klicken. Ich kann das Menü anzeigen, wenn ich auf die Registerkarte Beschriftung klicke, aber wenn ich auf eine leere Zone der Registerkarte klicke, verhält es sich wie gewohnt und zeigt die zugehörige Registerkarte an.Material Design: Ändern Sie die Aktion für die gesamte Registerkarte, nicht nur für das Etikett

Wie kann ich das Label-Verhalten auf die gesamte Registerkarte erweitern ?.

Hier ist es ein Code

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

Quelle

2017-01-19 Igino Boffa

Verschieben ng-click = "$ mdOpenMenu ($ event)" von div zum übergeordneten Element. Bewegen Sie sich weiter, bis Sie den gewünschten Effekt erzielen. –

@AmirTalic funktioniert nicht –

Dann haben Sie wahrscheinlich ein anderes Ereignis verdrahtet mit dem Elternelement, das Ihre NG-Klick überschreibt –

ich auf diese Weise aus ihm heraus:

Ich habe in meinem CSS:

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

Dies ist die letzte Tab-Taste keine Polsterung und die gesamte Tabulatortaste kann gedrückt werden, ohne die Tabulatortaste zu wechseln. Die feste Breite hängt damit zusammen, dass das Label nur ein '+' ist, also wäre es mit der Auto-Breite zu klein.

Quelle

2017-02-21 14:29:46

Material Design: Ändern Sie die Aktion für die gesamte Registerkarte, nicht nur für das Etikett

Antwort

Verwandte Themen