Угловой материал Md-панель инструментов Ввод

Есть ли способ добавить md-input-container на панель md-toolbar, как это? введите здесь описание изображения


person Flash    schedule 12.01.2017    source источник


Ответы (1)


Это довольно просто. Просто добавьте md-input-container на панель инструментов.

<md-toolbar class="myCustomClass">
  <div class="md-toolbar-tools">
    <md-input-container class="md-block" flex-gt-sm>
      <label>Search for item</label> 
      <input ng-model="searchPhrase" name="searchPhrase">
    </md-input-container>
  </div>
</md-toolbar>

Возможно, вам придется настроить вертикальное выравнивание, если окно поиска расположено высоко. Вы можете сделать это, добавив следующий css:

.myCustomClass md-input-container .md-errors-spacer{
  min-height: 0px !important;
}

Очевидно, что правильным способом было бы создать пользовательский класс для ввода на панели инструментов и применить указанный выше стиль, чтобы вы не переопределяли стили по умолчанию других тегов ввода.

person Hooligancat    schedule 12.01.2017
comment
Спасибо, я пропустил часть «ввод» под ярлыком. Как бы вы создали пользовательский класс, о котором вы говорили? - person Flash; 13.01.2017
comment
@Flash - обновил мой ответ. Просто добавьте пользовательский класс в тег md-toolbar, а затем убедитесь, что вы обновили CSS, чтобы использовать это наследование. - person Hooligancat; 13.01.2017