Question

我试图通过点击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>

Answer 1

我这样离开了：

我在CSS中添加了这个：

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

这最后一个标签按钮没有填充，可以在不切换标签的情况下按下整个标签按钮。固定宽度与标签只是一个'+'的事实有关，因此它对于自动宽度来说太小了。

材料设计：更改整个标签按钮的选择操作，不仅仅是标签

1 个答案: