web-dev-qa-db-fra.com

Styling saisie de champs et de formes en Angular/Material

Je souhaite ajouter un style personnalisé à un champ de formulaire contenant des entrées, mais je ne trouve aucune documentation à ce sujet sur le site Web officiel de Angular Material.

Mon objectif final est de:

  • Changer la couleur de soulignement après la sélection de la zone de saisie
  • Supprimez l’étiquette flottante (si possible - je sais que c’était une fonctionnalité, mais elle est maintenant obsolète).

Je ne suis pas encore le plus habile avec Angular, mais si les choses doivent changer dans JS, je peux toujours donner le meilleur de moi-même.

J'ai juste besoin d'un peu d'aide.

Code actuel:

<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>

CSS en cours:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}
javascripthtmlcssangularangular-material2
7
physicsboy

À ma connaissance, les deux fonctionnalités semblent être dans MatFormField.

  1. floatPlaceholder est obsolète, car il s'agit maintenant de [floatLabel] pour FloatLabelType ('never', 'always', 'auto'), appliqué à l'aide de input 
  2. Vous pouvez modifier la couleur du soulignement à l'aide de l'entrée [color]. Toutefois, vous ne pouvez sélectionner que les couleurs de votre thème ('primary', 'accent', 'warn'). Pour plus d'informations sur la configuration du thème, rendez-vous sur leur site Web ici , 


<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>
5
Iancovici

Vous pouvez utiliser le sélecteur css que vous utilisez ci-dessous:

/deep/ .mat-input-underline {
   background-color: white;
}

Le combinateur/deep/est destiné à être déconseillé dans Angular , il est donc préférable de s'en passer. Malheureusement, le .mat-input-underline de Angular Material est hautement spécifié, ce qui rend très difficile le remplacement sans utiliser/deep /.

Le meilleur moyen que j'ai trouvé est d'utiliser un identifiant, ce qui vous permet une spécificité supérieure à celle des styles Matériau angulaire par défaut. 

 <form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <mat-placeholder class="placeholder">Search</mat-placeholder>
      <input type="text" class="toolbar-search" matInput formControlName="search">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

Ensuite, votre identifiant de "formulaire de recherche" peut être utilisé pour cibler l'entrée. Vous ne pouvez pas cibler le soulignement mat-formulaire-champ-dans le composant.scss sans rompre votre encapsulation de vue. Il est plus facile de faire cela au niveau mondial en ajoutant ceci à votre global.scss

global.scss: 

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

J'espère que l'équipe de Angular Material retirera leur spécificité à l'avenir, car il n'existe actuellement aucun moyen facile de remplacer leurs valeurs par défaut. 

3
drinck

Pour changer les styles des entrées de matériaux avec scss:

La norme:

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

Focused: (lorsque sélectionné)

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

Invalide:

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

DEMO

vous pouvez également utiliser ViewEncapsulation.None pour éviter ::ng-deep qui est obsolète:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})
2
A. Morel