web-dev-qa-db-fra.com

Comment puis-je gauche aligner le texte dans un Angular Matériau tendu md-button?

Sans trop bricoler avec mes propres CSS, existe-t-il un attribut ou une configuration que je peux utiliser pour aligner à gauche le texte dans un bouton md qui est un peu étiré pour s'adapter à un menu, par exemple?

Ceci est ma vue actuelle

<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column">
  <md-toolbar>
    <h1 class="md-toolbar-tools">
      <a ng-href="/" layout="row" href="/">
        <div class="docs-logotype">Material Design</div>
      </a>
    </h1>
  </md-toolbar>
  <md-content flex role="navigation" layout="column">
    <md-button>Button1</md-button>
    <md-button>Button2</md-button>
  </md-content>
</md-sidenav>

<md-content flex layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <button class="md-icon-button md-button" aria-label="Settings">
        <md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
      <md-button>Button1</md-button> <!-- how to left align this text inside a stretched button -->
      <md-button>Button2</md-button>
      <span flex=""></span>
      <md-button>Right side button</md-button>
      <button class="md-icon-button md-button" aria-label="More">
        <md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
    </div>
  </md-toolbar>
  <md-content flex>
    Some content !!
  </md-content>
</md-content>

enter image description here

buttonalignmentangular-material
6
Christiaan Westerbeek

Utilisez une plage vide avec flex comme ci-dessous. Vous pouvez même spécifier la valeur flex pour obtenir un emplacement plus spécifique.

<div layout="row" layout-align="start center" flex>
  <md-button>button 1 </md-button>
  <span flex></span>
</div>

Ou si vous souhaitez simplement aligner du texte à l'intérieur d'un bouton, essayez ceci:

<md-button style="text-align:left">button </md-button>
16
nitin

Vous pouvez le faire si vous utilisez md-toolbar (Angular 4):

Html

<md-toolbar id="toolbar" color="primary" >
  <md-button>button 1 </md-button>
  <span class="spacing"></span>
  <md-button>button 2 </md-button>
</md-toolbar>

OR

<md-toolbar id="toolbar" color="primary">
  <md-button>button 1 </md-button>
  <span style="flex: 1 1 auto;"></span>
  <md-button>button 2 </md-button>
</md-toolbar>

Votre CSS si aucun style en HTML:

.spacing {
    flex: 1 1 auto;
}

J'espère que ça aide quelqu'un.

2
Amarnath Reddy Dornala