如何在layout = row中删除下划线i md-chips

时间:2016-12-28 14:13:26

标签: angularjs angular-material

如何摆脱md-chips中的下划线 - 131,132和T下的线?

代码

<div layout="row">
  <div flex>
    <md-chips ng-model="condition.list" readonly="true" md-removable="false">
      <md-chip-template>
        <span>{{$chip.id}}</span>
      </md-chip-template>                  
    </md-chips>
  </div>
 </div>

看起来像这样 enter image description here

1 个答案:

答案 0 :(得分:7)

下划线,因为<md-chips>添加了边框底部。 您可以通过以下设置删除该行

.md-chips{
  box-shadow: 0 0px !important;
}

var app = angular.module("app", ['ngMaterial']);
app.controller("myCtrl", function($scope) {});
.md-chips{
  box-shadow: 0 0px !important;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" rel="stylesheet" />
<div layout="row" ng-app="app" ng-controller="myCtrl">
  <div flex>
    <md-chips>
      <md-chip-template>
        <span>{{chip.id}}</span>
      </md-chip-template>
    </md-chips>
  </div>
</div>