[英]Angular/Material mat-form-field input - Floating label issues
有什么方法可以阻止占位符作为以下代码片段的标签浮动?
<form class="search-form">
<mat-form-field class="example-full-width">
<input class="toolbar-search" type="text" matInput>
<mat-placeholder>Search</mat-placeholder>
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
我已经查看了 angular/material 的官方文档,但现在似乎不推荐使用此功能?
假设您使用的是材料 2 的最新稳定版本,
您可以使用floatLabel="never"强制标签不浮动。
这是现场工作演示
这在文档https://material.angular.io/components/form-field/api 中很清楚
<form class="search-form">
<mat-form-field class="example-full-width" appearance="standard">
<input class="toolbar-search" type="text" matInput>
<mat-placeholder>Search</mat-placeholder>
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
请将 mat-form-field 的外观设置为标准,占位符将不再像标签一样表现。
说明:默认情况下,mat-form-field 中的 mat-label 是浮动的,并且 mat-form-field 的外观是“legacy”。 这意味着如果表单字段中不存在 mat-label,那么占位符将开始表现得像标签一样,它会向上浮动。 因此,要停止此操作,您应该手动将外观更新为“标准”,这样它就不再表现得像标签一样并保持为占位符。
上面的 Praveen Soni 的回答不适用于非遗留版本,如下所示:
注意:只有旧外观支持从不选项。 never 最初添加的目的是使浮动标签模拟标准输入占位符的行为。 但是,表单字段现在支持浮动标签和占位符。 因此,在非传统外观中,已禁用 never 选项以支持仅使用占位符。
这意味着您应该简单地使用占位符而不是标签。
1.在mat-form-field中使用floatLabel="never"
<mat-form-field floatLabel="never">
</mat-form-field>
<div class="custom_autosuggestion">
<mat-form-field class="example-full-width" floatLabel="never">
<input class="custom_color_title"
aria-label="Number" matInput [formControl]="myColorControl" type="text" name="" [matAutocomplete]="auto">
<mat-placeholder class="custom_placeholder">{{templateParse.Search_Colors_by_Name_or_Code}}</mat-placeholder>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredColorOptions | async" [value]="option">
<!-- {{option}} -->
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.