Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled'
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### Please describe the feature you would like to request.
The MatFormField component reflects a disabled MatInput directive via a dynamic css class 'mat-form-field-disabled'.
I suggest to implement a dynamic css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled' which reflects the readonly state of the MatInput directive.
#### What is the use-case or motivation for this proposal?
My proposal would support better css styling. Eg. styling the child 'mat-form-field-underline' of the MatFormField (which is not a dom child of the MatInput directive).
#### Is there anything else we should know?
No special css styling is required to be implemented by you. Only the possibility to implement one by myself.
#### Temporary Workaround
Helper directive (ts):
```
import { Directive, Input, HostBinding } from '@angular/core';
import { MatFormField, MatInput } from '@angular/material';
/* Workaround to provide css class 'mat-form-field-readonly' similiar to 'mat-form-field-disabled'.
* Example Usage:
*
*
*
*/
@Directive({
selector: 'mat-form-field[provideReadonly]',
host: {
'[class.mat-form-field-readonly]': 'isReadonlyInput()'
}
})
export class ProvideMatFormFieldReadonlyDirective {
constructor(private _matFormField: MatFormField) { }
public isReadonlyInput(): boolean {
const ctrl = this._matFormField._control;
if (ctrl instanceof MatInput) {
return ctrl.readonly;
}
return false;
}
}
```
The directive must be assigned explicitly (html):
```
```
Which can be styled for example (css):
```
/* mat-form-field / matInput - readonly support */
.mat-form-field-appearance-legacy.mat-form-field-readonly .mat-form-field-underline {
background-color: rgba(127, 127, 127, 0.25);
}
```
Thank You!
コントリビューションガイド
調査の方向性
まず、現在 mat-form-field-disabled クラスを反映している MatFormField/MatInput の統合箇所を見つけ、MatInput の readonly 状態がどのように公開されているかを確認します。readonly input に対して期待される動作を確認し、そのうえで、子要素のスタイルをカスタマイズできるように、MatFormField が mat-form-field-readonly でそれを反映することを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100