2

我目前正在使用带有角度材料的选择列表，但不需要选择标签动画。我将始终显示在选择输入顶部的标签是什么，就像您做出选择后一样。

我可以使用普通的文本输入来实现它

    <md-input-container class="md-input-has-placeholder">
       <label>Name</label>
       <input type="text"/>
    </md-input-container>

在此处输入图像描述

然而，这对选择列表有效（链接到选择列表的角度材料文档）。我无法让what is happening标签固定在选择输入的顶部。

这是我当前的代码

<md-input-container flex="auto" flex="50" class="md-hue-3 md-input-has-placeholder">

 <label>What is happening ?</label>

 <md-select ng-model="$ctrl.alert.effect" class="md-hue-3 ng-not-empty" name="what">
    <md-optgroup label="Select type">
            <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option>
    </md-optgroup>
  </md-select>
 </md-input-container>

动画很酷，但我只想要一个正常的输入标签。

这是我为使其工作而创建的 hack，然后涉及在 sass 中编写父选择器以进行输入活动.. 对于如此简单的事情来说，它是一团糟

<div layout="row">
    <div layout="column" layout-fill>

        <label>What is happening ?</label>

             <md-input-container flex="auto" flex="50" class="md-hue-3">

                  <md-select ng-model="$ctrl.alert.effect" class="md-hue-3" name="what" >
                        <md-optgroup label="Select alert type">
                            <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option>
                        </md-optgroup>
                  </md-select>

              </md-input-container>
       </div>
  </div>
4

3 回答 3

3

有一个简单的方法来做到这一点（如果我猜对了）

如果要禁用标签动画，只需将其添加到您的 css 中：

md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
   -webkit-transform: none;
   transform: none;
}
于 2017-03-16T07:28:53.733 回答
1

您可以使用属性外观 =“标准”将mat-select包装到mat-form-field以防止占位符和标签的动画。例如：

<mat-form-field appearance="standard">
  <mat-select placeholder="set option">
    <mat-option>Option 1</mat-option>
  </mat-select>
</mat-form-field>
于 2019-12-16T15:11:34.783 回答
0

不幸的是，没有简单的方法可以做到这一点，因为不支持此选项。参考这个错误和这篇文章

于 2016-04-25T08:31:05.753 回答