角度材料布局不一致

Question

我在设计简单表单时遇到问题。

<div layout="column" ng-cloak> 
    <md-content class="md-padding"> 
     <form name="search"> 
      <md-input-container> 
       <label>From where?</label> 
       <input name="from" ng-model="from" required> 
      </md-input-container> 
      <md-input-container> 
       <label>To where?</label> 
       <input name="to" ng-model="to" required> 
      </md-input-container> 
      <md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker> 
      <md-input-container> 
       <md-button class="md-raised md-primary">Search</md-button> 
      </md-input-container> 
     </form> 
    </md-content> 
</div> 

这就是它的样子，我不知道我做错了什么？我是这个框架的新手。我希望所有输入都对齐到同一基线，并且我不想在文本输入前添加图标。

Answer 1

你的结构只有一个md-content下layout="column"。要堆叠md-input-container和md-datepicker项目，您需要将layout="column"添加到form标记<form name="search" layout="column">，它是您要在列中堆叠的标记的父项标记。

<div layout="column" ng-cloak> 
    <md-content class="md-padding"> 
    <form name="search" layout="column"> 
     <md-input-container> 
     <label>From where?</label> 
     <input name="from" ng-model="from" required> 
     </md-input-container> 
     <md-input-container> 
     <label>To where?</label> 
     <input name="to" ng-model="to" required> 
     </md-input-container> 
     <md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker> 
     <md-input-container> 
     <md-button class="md-raised md-primary">Search</md-button> 
     </md-input-container> 
    </form> 
    </md-content> 
</div> 

Answer 2

目前已知输入对齐问题。如果你想自己对齐，你将不得不调整一些边距。

https://github.com/angular/material/issues/6636

https://github.com/angular/material/issues/6219

您可以通过指定<md-icon>得到输入容器图标。

<md-input-container class="md-icon-float md-block"> 
     <label>Name</label> 
     <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon> 
     <input ng-model="user.name" type="text"> 
</md-input-container> 

查看documentation了解更多输入示例。