Thématisation avec PrimeNG CSS Variables
Nous avons introduit les variables CSS dans la version 11.3.0-RC.1. Cet article explique comment utiliser les nouvelles variables CSS PrimeNG et la logique de conception. Commençons!
Configuration du projet
Créons une toute nouvelle application angulaire en utilisant angular-cli.
ng new primengColor
cd primengColor
npm install primeng primeicons primeflex
node_modules/primeicons/primeicons.css node_modules/primeng/resources/themes/saga-blue/theme.css node_modules/primeng/resources/primeng.min.css
Nous sommes prêts à utiliser PrimeNG, commençons !
Mise en œuvre
Nous allons commencer par les surfaces et les couleurs générales.
Les couleurs générales sont :
Notre projet va utiliser text-color et font-family.
Les couleurs de surface sont :
Les couleurs de surface peuvent être utiles lors de la conception des couches de surface et des séparateurs.
Chaque thème PrimeNG exporte sa propre palette de couleurs afin que toutes les couleurs soient adaptées à notre thème.
Utilisons-le dans notre style.css :
Nous pouvons maintenant créer notre application simple.
Barre du haut
p-shadow-2 et pp-2 proviennent de PrimeFlex . p-shadow-* est un assistant d'élévation . Nous pouvons l'utiliser pour spécifier la séparation entre les surfaces et les éléments le long de l'axe z. pp-* est un assistant d'espacement . pp-* donne un rembourrage aux éléments. Dans notre cas, ce rembourrage est de 0,5 rem.
Je vais utiliser la couleur primaire pour la couleur d'arrière-plan de la barre supérieure. Je veux que la couleur d'arrière-plan de la barre supérieure soit la même que la couleur du bouton (la couleur d'arrière-plan par défaut du pButton est déjà la couleur primaire).
Barre latérale et formulaire simple
Nous n'avons pas besoin de variables CSS maintenant car les composants PrimeNG utilisent déjà ! Créons des propriétés pour nos composants !
Message Service il y a pour p-toast et PrimeNGConfig il y a pour l'ondulation d'activation.
Nous allons ajouter nos composants à app.component.html !
p-fluide il y a pour la largeur d'entrée. p-formgrid, p-gird venant de PrimeFlex !
Maintenant, notre application ressemble à ceci :
Changeons le thème en bootstrap4-dark-purple :
node_modules/primeng/resources/themes/bootstrap4-dark-purple/theme.css
node_modules/primeng/resources/themes/vela-green/theme.css
Les variables seront toujours compatibles avec vos choix de thème !
Merci pour votre lecture.
Aire de jeux :
Dépôt Github :https://github.com/yigitfindikli/primeng-colors-example
Suggested posts
La révolution sans code : libérer la prospérité des entreprises avec Webflow, Framer, Bubble.io,
Embarquez pour un voyage passionnant d'innovation et de succès en exploitant le potentiel inexploité de ces surprenantes plateformes sans code. Permettez-moi de partager avec vous l'histoire de Sapna, une remarquable femme entrepreneure.
Création d'un bot Twitter Node.js pour analyser le sentiment du marché
Apprenons à créer un bot Twitter basé sur Node.js qui analyse le sentiment du marché en diffusant des tweets et en appliquant des filtres ! Introduction Twitter est une plate-forme populaire pour partager des opinions, des nouvelles et des idées.
Related posts
Le premier livre d'un enfant sur la défonce
(Attention - Ceci est une satire, destinée à être joyeusement subversive - Certainement pas pour les enfants) Vous avez vu votre mère et votre père se cacher dans la cuisine et fumer ces cigarettes malodorantes. Ils vous disent.
Pourquoi certains freelances simulent leur vie
J'étais récemment sur Linkedin, le plus grand réseau social professionnel au monde, et j'ai trouvé des messages de designers indépendants que je suis et qui ont attiré mon attention. Ils ont tous posté des photos d'avions, sur la plage avec leurs ordinateurs portables, de piscines et de bureaux avec une vue imprenable.
Comment sauver la planète et gagner de l'argent
Combien de fois avez-vous jeté une bouteille en plastique, un bocal en verre, une canette en aluminium ou un paquet d'énergie verte sans réfléchir à deux fois ? Combien de fois avez-vous souhaité pouvoir obtenir quelque chose en échange de leur recyclage ? Si vous êtes comme la plupart des gens, la réponse est probablement plusieurs fois. Le recyclage est souvent perçu comme un tracas, une corvée ou un devoir qui n'apporte aucun bénéfice immédiat ou tangible.
L'art est-il toujours apolitique ?
Hier, nous avons fermé la porte du concours Eurovision de la chanson de cette année avec une grande finale scintillante et chaotique où la chanteuse suédoise Loreen a remporté le trophée, devenant la première femme à gagner deux fois et ramenant la couronne à la Suède 50 ans après qu'ABBA a remporté le concours. avec "Waterloo". Ils sont devenus l'un des plus grands groupes du canon de la musique pop.