web-dev-qa-db-fra.com

Matériau angulaire: groupe d'entrées et boutons md sur la même ligne

Je ne parviens pas à inclure un groupe d'entrées et quelques boutons sur la même ligne avec angular-material.

La structure HTML suivante produit le résultat que vous pouvez voir sur l'image ci-dessous, ce qui n'est pas ce que je veux:

<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

Cependant, si j'essaie d'inclure tous les éléments dans le même layout="row", le input-group finit par occuper tout l'espace et enfonce les boutons du div parent:

<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

Existe-t-il une bonne façon d’avoir un groupe de saisie et quelques boutons sur la même ligne avec angular-material ou dois-je créer mes propres styles?

cssangularangular-material
7
Tiago

Essayez le code suivant: 

<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>

voir un exemple dans le lien suivant http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

27
基米王

Voudrait apporter une réponse contemporaine à cette question populaire.

1. Utilisez [matSuffix] sur le bouton

Angular Material vous permet de revenir sur celui-ci et fournit la directive matSuffix pour placer un élément à la fin du champ de formulaire.

Par conséquent, votre solution ressemblerait à ceci:

  <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>

Voir le code complet de l'exemple à https://stackblitz.com/edit/angular-mvndsv .

2. Créer un champ pour remplir la largeur 

Pour remplir la largeur de l'élément parent, modifiez le style de mat-form-field:

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

3. Utilisez les propriétés 'flex' CSS, et non les directives @angular/flex-layout

Pour les gros projets, je vous conseillerais d'utiliser flex les propriétés CSS et d'éviter d'utiliser les directives flex de @ angular/flex-layout package.

Au premier abord, il peut sembler utile de définir une directive flex plutôt que d'écrire des styles CSS, mais cela se retournera contre des projets plus importants une fois que le projet commence à se développer et que vous construisez vos classes CSS Et mixins et que vous les étendez les composants:

  1. Les directives 'flex' apporteraient une ambiguïté sur le lieu d'application des propriétés de style.
  2. Les problèmes de débogage nécessitent la compréhension des propriétés CSS flex réelles, telles que vous les voyez/les manipulez dans les outils de développement du navigateur. Donc, en utilisant les directives 'flex':
    • nécessiterait que les développeurs comprennent comment les propriétés de la directive sont converties en CSS;
    • et une fois que CSS est opérationnel, ils doivent le convertir manuellement en directives, ce qui introduit un autre point d'échec.
2
Alex Klaus