Question

是否有办法在<md-button>中加入可点击图标，而无需将<md-button>调整为全宽。

在我的情况下，我想在我的按钮右侧添加一个关闭图标，当用户点击此图标（位于按钮内）时，将执行一个操作，但不会执行与该按钮关联的操作。按钮。

<md-button ng-click="customFilter('global')" class="md-raised md-primary">
    Global<md-icon md-svg-src='style/images/icons/ic_close_24px.svg'  
    style="color: red; width: 5%; height: 5%"></md-icon>
</md-button>

这会在按钮内添加图标，但按钮会占据整个宽度。

理想情况下，按钮和图标:hover之间的突出显示会有所不同，但这还不是我的担忧。

Answer 1

是的，您可以获得此功能。要为md-icon设置样式，请使用＆＃34; vw＆＃34;，这将确保您的图标根据视口获得宽度。 1vw =视口宽度的1％

详细了解vw here

更新您的代码，如下所示

<md-button ng-click="customFilter('global')" class="md-raised md-primary">
    Global
   <md-icon md-svg-src='style/images/icons/ic_close_24px.svg'  
       ng-click="action($event)" style="width:1.5vw"
   </md-icon>
</md-button>

在控制器内部，您需要停止传播到父级md按钮的md-icon点击事件。

$scope.action = function($event){
  //do your action 
  $event.preventDefault();
  $event.stopPropagation();
}

md-button

1 个答案: