0

只是想用角度材料构建一个简单的登录表单到目前为止我已经得到了这个：

<md-dialog aria-label="Login">
<form name="loginForm">
    <md-toolbar layout="row" layout-padding layout-align="center center">
        <span class="md-toolbar-item md-headline">Login</span>
    </md-toolbar>
    <md-dialog-content layout-padding>
        <md-input-container class="md-icon-float">
            <md-icon class="md-dark" aria-label="username">person</md-icon>
            <input type="text" ng-model="user.name" placeholder="Username">
        </md-input-container>
        <md-input-container class="md-icon-float">
            <md-icon class="md-dark" arial-label="password">lock</md-icon>
            <input type="text" ng-model="user.password" placeholder="Password">
        </md-input-container>
    </md-dialog-content>
    <div class="md-actions">
        <md-button aria-label="Cancel">Cancel</md-button>
        <md-button class="md-primary" aria-label="Login">Login</md-button>
    </div>
</form>

产生这个：

基本登录表单保持不变。 够好了

现在，当我激活密码输入时，小标签浮起来，它正在调整整个对话框的大小并将用户名字段向上推。我知道这是一个小小的抱怨，但它看起来一点也不好看，而且我敢肯定这一定是一件非常微不足道的事情（我的 css 目前正在进行中）

干杯

4

2 回答 2

1

这是一支笔 你可以看看

<md-dialog aria-label="Dialog Example" style="height:400px;width:400px;">
  <md-toolbar>
  <div class="md-toolbar-tools">
    <h2>Login</h2>
    <span flex></span>
    <md-button class="md-icon-button" ng-click="cancel()">
      <md-icon class="material-icons" aria-label="Close dialog">close</md-icon>
    </md-button>
  </div>
</md-toolbar>
   <form layout="row">  
     <span flex></span>
       <div layout="column">
         <div>
             <md-input-container>
               <label>UserName</label>
               <md-icon class="material-icons">person</md-icon>
               <input type="text" ng-model="somemodel" autocomplete="off">
             </md-input-container>
         </div>
         <div>
           <md-input-container>
               <label>UserName</label>
               <md-icon class="material-icons">lock</md-icon>
               <input type="password" ng-model="some">
             </md-input-container>
         </div>
         <md-button class="md-primary md-raised">
           Login
          </md-button> 
     </div>
   <span flex></span>

 </form>

于 2016-05-14T12:20:49.093 回答
0

如果有人可能面临这个问题，经过很长时间我实际上发现了这个问题：

md-input-container.md-icon-float {
    margin-top: -16px;
    transition: margin-top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

这只发生在对话框中的第二个输入容器（密码字段）上的唯一原因是

md-dialog md-dialog-content:not([layout=row]) > *:first-child:not(.md-subheader) {
    margin-top: 0;
}

所以 md-dialog-content 中的第一个元素不受影响。

我对这种过渡的必要性感到困惑（无论如何，在他们的回购中也提到了 issue 2991 ，

您可以在 md-input-container 上插入内联样式，

<md-input-container class="md-block md-icon-float md-icon-left" style="margin-top: 0;">
            <md-icon class="md-dark" arial-label="password">lock</md-icon>
            <input type="password" ng-model="user.password" placeholder="Password">
            <div class="md-errors-spacer"></div>
</md-input-container>

或将每个 md-input-container 元素放在单独的 md-dialog-content 中（不确定这是否真的是使用 md-dialog-content 的预期方式，所以我选择了第一个解决方案）

希望这对某人有所帮助，这是一个很小的问题，但可能会浪费很多时间来挑剔。

于 2016-06-17T15:48:45.467 回答