Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled'
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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!
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par localiser l’intégration MatFormField/MatInput qui reflète actuellement la classe mat-form-field-disabled et examinez comment l’état readonly de MatInput est exposé. Confirmez le comportement attendu pour les inputs readonly, puis assurez-vous que MatFormField le reflète avec mat-form-field-readonly afin que le style de ses éléments enfants puisse être personnalisé.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100