Кнопка очистки в md-входе

Question

Есть ли кнопка очистки, включенная в md-ввод типа Поиск? Я знаю, что я могу просто добавить четкую кнопку снаружи или компонент ввода для поиска, но я бы предпочел получить его как часть поля ввода.

Answer 1

Это невозможно с существующей версией углового материала (v0.9.0), но предназначено для v0.10.0. См. Дополнительную информацию здесь: https://github.com/angular/material/issues/2802#issuecomment-101764802

Однако существует директива Angular, которая может использоваться в качестве обходного пути. https://github.com/dcohenb/angular-clear-input

Answer 2

я решить ее с помощью отрицательного margin-right

.search { 
 
    md-content.md-default-theme { 
 
     overflow: visible; 
 
    } 
 
    .search-cancel { 
 
     color: white !important; 
 
     fill: white; 
 
     border: none; 
 
     width: 16px; 
 
     height: 16px; 
 
     margin: 8px 0 0 -36px; 
 
     overflow: visible; 
 
     cursor: pointer; 
 
     border-radius: 50%; 
 
     transition: background 0.15s linear; 
 
     background: rgba(0, 0, 0, 0.3); 
 
     &:hover { 
 
      background: rgba(255, 0, 0, 0.8) !important; 
 
     } 
 
    } 
 
}

  <div layout="row" class="search"> 
 
       <md-content flex="90" layout-padding> 
 
        <md-input-container md-no-float> 
 
         <md-icon md-svg-icon="search" class="name"></md-icon> 
 
         <input ng-model="search" type="search" title="Search" placeholder="Search"> 
 
        </md-input-container> 
 
       </md-content> 
 
       <md-content flex layout-padding> 
 
        <md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel" 
 
          ng-click="search=''"></md-icon> 
 
       </md-content> 
 
      </div>

md-content Содержащий также нуждается overflow-visible так, чтобы значок не обрезается.