Angular Material: 如何将matInput的占位符右对齐？

Question

Angular Material: 如何将matInput的占位符右对齐？

14

我有这个简单的代码：

<body style="direction: rtl; text-align: right">
    <mat-form-field>        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

但无论我尝试什么，占位符始终会从左到右。有没有办法将它对齐到右边？

但是，无论我尝试什么，占位符始终是从左往右排列的。是否有任何方法可以将它对齐到右侧？

- Aharon Ohayon

3个回答

3

一段时间后，我发现了mat-form-field的sass，并发现如果mat-form-field的父元素带有dir="rtl"属性，它会以从右到左的方式显示:

<body dir="rtl">
   <mat-form-field>        
       <input matInput placeholder="I am rtl" />
   </mat-form-field>
</body>

- Aharon Ohayon

1

使用CDK中的双向性模块：

import {BidiModule} from '@angular/cdk/bidi';

...

<body dir="rtl">
    <mat-form-field>        
        <input matInput placeholder="I am RTL" />
    </mat-form-field>
</body>

- G. Tranter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Narm · Accepted Answer

在表单字段上使用text-align将起作用：请参见工作示例StackBlitz example

此解决方案将把占位符和输入文本都对齐到右侧：

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

结果：

如果您只想将占位符向右对齐，并保持输入文本向左对齐，则可按照下面所示添加style="text-align: left"到输入框中。

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" style="text-align: left"/>
    </mat-form-field>
</body>

结果：