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

【问题标题】：Material design: change select action for the whole tab button, not only for the label材料设计：更改整个选项卡按钮的选择操作，而不仅仅是标签
【发布时间】：2017-01-19 08:35:42
【问题描述】：

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

【问题讨论】：

将 ng-click="$mdOpenMenu($event)" 从 div 移动到父元素。继续往上走，直到达到你想要的效果。
@AmirTalic 不起作用
那么你可能有一些其他事件连接到覆盖你的 ng-click 的父元素
我知道很难覆盖 md-tab 默认行为，因为“有一些事件已连接”，但我正在寻找一种方法来克服它......
您还没有在这里发布很多可以帮助我们的代码，但只需查看您的 HTML，将 md-on-select 替换为 ng-click="$mdOpenMenu($event)" 应该可以工作......如果您可以在 jsfiddle 上发布您的代码，那就太好了。

标签： javascript html css angularjs material-design

【解决方案1】：

我是这样摆脱的：

我在我的 CSS 中添加了这个：

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

这个最后一个tab按钮没有padding，整个tab按钮都可以在不切换tab的情况下按下。固定宽度与标签只是一个'+'有关，所以它会与自动宽度太小。

【讨论】：