it-swarm.com.ru

Angular-material: группа ввода и md-кнопки на одной линии

У меня возникли проблемы при попытке включить группу ввода и пару кнопок в одной строке, используя angular-material.

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

<section layout-align="end center" layout-padding flex>
    <div layout="row" layout-align="start center" flex>
        <div class="input-group">
            <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
            <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
        </div>
    </div>
    <section layout-padding>
        <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
        <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
    </section>
</section>

enter image description here

Однако, если я попытаюсь включить все элементы в один и тот же layout="row", input-group в конечном итоге займет все пространство и вытолкнет кнопки из родительского div:

<section class="no-print" layout-align="end center" layout-padding flex>
    <div layout="row" layout-align="start center" flex>
        <div class="input-group">
            <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
            <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
        </div>
        <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
        <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
    </div>
</section>

enter image description here

Есть ли правильный способ размещения группы ввода и нескольких кнопок на одной строке, используя angular-material, или мне нужно создавать свои собственные стили?

7
Tiago

Попробуйте следующий код: 

<form layout layout-align="center" layout-padding>
    <div layout="row" flex>
        <md-input-container flex class="md-icon-float md-block md-title">
            <label>Your font number</label>
            <!-- below is the material icons -->
            <md-icon class="material-icons">phone</md-icon>
            <input type="text">
        </md-input-container>
        <div>
            <md-button class="md-raised">
            <!-- below is the material icons -->
                <md-icon class="material-icons">search</md-icon>
            </md-button>
        </div>
    </div>  
</form>

см. образец по следующей ссылке http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

27
基米王

Хотел бы дать современный ответ на этот популярный вопрос.

1. Используйте [matSuffix] на кнопке

Angular Material вернул вас к этому и предоставил директиву matSuffix , чтобы поместить элемент в конец поля формы.

Следовательно, ваше решение будет выглядеть так:

  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <input matInput type="search">
      <button mat-button matSuffix mat-stroked-button aria-label="search">
        <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>

См. Полный код примера по адресу https://stackblitz.com/edit/angular-mvndsv .

2. Сделайте mat-form-field, чтобы заполнить ширину 

Чтобы соответствовать ширине родительского элемента, измените стиль mat-form-field:

mat-form-field.mat-form-field {
  width: 100%;
}

3. Используйте CSS 'flex' свойства, а не @angular/flex-layout директивы

Для большого проекта я бы рекомендовал использовать flex CSS свойства и избегать использования директив flex из @ angular/flex-layout package.

Хотя на первый взгляд может показаться удобным поместить директиву flex вместо написания стилей CSS, это приведет к негативным последствиям для более крупных проектов, как только проект начнет расти, и вы создадите свои классы CSS .__ и миксины и начнете расширять их в компоненты:

  1. Директивы 'flex' привели бы к неоднозначности того, откуда применяются свойства стиля.
  2. Проблемы отладки требуют понимания фактических CSS flex-свойств, как вы видите/манипулируете ими в инструментах разработчика браузера. Итак, используя директивы 'flex':
    • потребовалось бы разработчикам понять, как свойства директивы конвертируются в CSS;
    • и когда у них есть работающий CSS, им приходится вручную преобразовывать его в директивы, что вводит другую точку отказа.
2
Alex Klaus