angulaire matières 2 table d'en-tête du centre de l'alignement
Si md-sort-en-tête est ajouté dans md-tête de cellule dans md-table, il est toujours à gauche de l'alignement. Comment centrer cellules d'en-tête, par exemple "nom"?
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center">
Name
</md-header-cell>
md-header-cell se "traduit" pour un récipient avec de l'class="mat-sort-en-tête-container". En utilisant cela, vous définissez son style avec ng-profonde. Utilisation flexbox au centre de son contenu. Placez la ligne suivante dans les composants de la feuille de style:
Accepté la réponse est correcte. Cependant, ::ng-deep est amorti et peut-être tombé dans l'avenir (la documentation officielle).
L'ombre-piercing descendant du combinator est obsolète et de soutien est
retiré de grands navigateurs et outils. En tant que tel nous avons l'intention de déposer
support Angulaire (pour tous les 3 de /de profondeur/, >>>:: ng profond). Jusqu'à ce que
alors ::ng-profondeur devrait être privilégiée pour une plus large compatibilité avec les
les outils.
La bonne façon est d'utiliser ViewEncapsulation. Dans votre composant.ts, ajoutez la ligne suivante:
:ng-profonde n'est pas depricated! c'est /deep/ seulement. l'encapsulation peut affecter d'autres classes Veuillez lire la documentation: The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Je ne dis pas que votre réponse ne fonctionne pas, les OP peuvent faire face à un problème à l'avenir une fois ::ng-deep est totalement abandonnée. Merci pour la solution! Je voulais ajouter que si vous voulez uniquement sur le centre de l'un en-tête de tableau, alors vous pouvez créer votre propre classe personnalisée avec un nom comme mat-sort-header-container-centered avec les énoncés ci-dessus css et l'attribuer à votre cellulaire comme ce <md-header-cell *cdkHeaderCellDef md-sort-header class="mat-sort-header-container-centered"> oui exactement 🙂 je fais de même et éviter d'utiliser ::ng-deep.
Je pense que le des solutions à ce problème sont trop strictes dans leur approche, j'ai eu un problème similaire où j'avais besoin de changer certaines propriétés css de mat-sort-header-container , mais de façon dynamique.
J'ai fait quelque chose comme Vega réponse mais très différentes sur la façon dont les styles sont prises :
::ng-deep .mat-sort-header-container{
justify-content: inherit;
/* other inheritable properties */
}
qui ouvre des propriétés de son parent style mat-header-cell qui est dans votre code html donc quel que soit le style que vous fournissez dans mat-header-cell et dans le ng-deep qui hérite de son parent, alors que les styles et de rien d'autre que cela serait de descendre de la hiérarchie .
Mise à jour Angulaire du Matériel 5.x.x, pas besoin de ng-profondeur:
DÉMO
md-header-cell
se "traduit" pour un récipient avec de l'class="mat-sort-en-tête-container". En utilisant cela, vous définissez son style avecng-profonde
. Utilisation flexbox au centre de son contenu. Placez la ligne suivante dans les composants de la feuille de style:DÉMO
OriginalL'auteur Vega
Accepté la réponse est correcte. Cependant,
::ng-deep
est amorti et peut-être tombé dans l'avenir (la documentation officielle).La bonne façon est d'utiliser ViewEncapsulation. Dans votre composant.ts, ajoutez la ligne suivante:
et remplacer la classe de votre composant.fichier css:
Veuillez lire la documentation:
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).
Je ne dis pas que votre réponse ne fonctionne pas, les OP peuvent faire face à un problème à l'avenir une fois
::ng-deep
est totalement abandonnée.Merci pour la solution! Je voulais ajouter que si vous voulez uniquement sur le centre de l'un en-tête de tableau, alors vous pouvez créer votre propre classe personnalisée avec un nom comme
mat-sort-header-container-centered
avec les énoncés ci-dessus css et l'attribuer à votre cellulaire comme ce<md-header-cell *cdkHeaderCellDef md-sort-header class="mat-sort-header-container-centered">
oui exactement 🙂 je fais de même et éviter d'utiliser
::ng-deep
.OriginalL'auteur Faisal
OriginalL'auteur dayderluv
Je pense que le des solutions à ce problème sont trop strictes dans leur approche, j'ai eu un problème similaire où j'avais besoin de changer certaines propriétés css de
mat-sort-header-container
, mais de façon dynamique.J'ai fait quelque chose comme Vega réponse mais très différentes sur la façon dont les styles sont prises :
qui ouvre des propriétés de son parent style
mat-header-cell
qui est dans votre code html donc quel que soit le style que vous fournissez dansmat-header-cell
et dans leng-deep
qui hérite de son parent, alors que les styles et de rien d'autre que cela serait de descendre de la hiérarchie .OriginalL'auteur Aakash Uniyal