Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled'
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
#### 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!
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia individuando l’integrazione MatFormField/MatInput che attualmente riflette la classe mat-form-field-disabled e verifica come viene esposto lo stato readonly di MatInput. Conferma il comportamento previsto per gli input readonly, quindi assicurati che MatFormField lo rifletta con mat-form-field-readonly, in modo da poter personalizzare lo stile dei relativi elementi figli.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100