Thematisierung mit PrimeNG CSS-Variablen
Wir haben CSS-Variablen in Version 11.3.0-RC.1 eingeführt. In diesem Artikel wird erklärt, wie Sie die neuen CSS-Variablen und die Designlogik von PrimeNG verwenden. Lasst uns beginnen!
Projektaufbau
Lassen Sie uns eine brandneue Angular-Anwendung mit Angular-Cli erstellen.
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
Wir sind bereit für die Verwendung von PrimeNG, fangen wir an!
Implementierung
Wir beginnen mit Oberflächen und allgemeinen Farben.
Allgemeine Farben sind:
Unser Projekt wird Textfarbe und Schriftfamilie verwenden.
Oberflächenfarben sind:
Oberflächenfarben können bei der Gestaltung der Oberflächenschichten und Separatoren nützlich sein.
Jedes PrimeNG-Design exportiert seine eigene Farbpalette, sodass alle Farben an unser Design angepasst werden.
Lass es uns in unserer style.css verwenden:
Jetzt können wir unsere einfache Anwendung erstellen.
Obere Leiste
p-shadow-2 und pp-2 stammen von PrimeFlex . p-shadow-* ist ein Elevationshelfer . Wir können damit den Abstand zwischen Flächen und Elementen entlang der z-Achse spezifizieren. pp-* ist ein Abstandshelfer . pp-* füllt Elemente auf. In unserem Fall beträgt diese Polsterung 0,5 rem.
Ich werde die Primärfarbe für die Hintergrundfarbe der oberen Leiste verwenden. Ich möchte, dass die Hintergrundfarbe der oberen Leiste der Farbe der Schaltfläche entspricht (die Standardhintergrundfarbe der pButton ist bereits die Primärfarbe).
Seitenleiste und einfaches Formular
Wir brauchen jetzt keine CSS-Variablen, weil PrimeNG-Komponenten bereits verwendet werden! Lassen Sie uns Eigenschaften für unsere Komponenten erstellen!
Message Service gibt es für p-toast und PrimeNGConfig gibt es für die Aktivierung von Ripple.
Wir werden unsere Komponenten zu app.component.html hinzufügen!
p-fluid gibt es für eingangsbreite's. p-formgrid, p-grid kommen von PrimeFlex !
Jetzt sieht unsere App so aus:
Ändern wir das Design in bootstrap4-dark-purple:
node_modules/primeng/resources/themes/bootstrap4-dark-purple/theme.css
node_modules/primeng/resources/themes/vela-green/theme.css
Variablen sind immer mit Ihrer Themenauswahl kompatibel!
Vielen Dank für Ihre Lektüre.
Spielplatz :
Github-Repository:https://github.com/yigitfindikli/primeng-colors-example
Suggested posts
Die No-Code-Revolution: Mit Webflow, Framer, Bubble.io den Geschäftserfolg entfesseln
Begeben Sie sich auf eine spannende Reise voller Innovation und Erfolg und erschließen Sie das ungenutzte Potenzial dieser überraschenden No-Code-Plattformen. Lassen Sie mich eine Geschichte über Sapna erzählen, eine bemerkenswerte Unternehmerin.
Erstellen eines Node.js-Twitter-Bots zur Analyse der Marktstimmung
Erfahren Sie, wie Sie einen Node.js-basierten Twitter-Bot erstellen, der die Marktstimmung analysiert, indem er Tweets streamt und Filter anwendet! Einführung Twitter ist eine beliebte Plattform zum Austausch von Meinungen, Neuigkeiten und Ideen.
Related posts
Informationen zu Domänennamen finden
Ein Auszug aus Small, Sharp Software Tools von Brian P. Hogan
Wenn Sie eine Anfrage an facebook.com stellen, sucht Ihr Computer nach dem Domänennamen, um diesen in eine IP-Adresse zu übersetzen, damit Ihr Computer diese Verbindung herstellen kann.
Die Verfolgung von Christen: Das Hassverbrechen, über das wir nicht sprechen
Vergessen Sie Islamophobie: Christen (und Juden) sind die Hauptopfer religiöser Hassverbrechen.
Jeder rational denkende Mensch weiß, dass die politischen und medialen Kreise von der Linken dominiert werden, sogar von der extremen Linken, ein Zustand, der zu einem Ungleichgewicht im politischen Diskurs führt. Im Bereich der Religion ist dieses Ungleichgewicht deutlich sichtbar: Linke Zeitungen und Netzwerke beeilen sich nicht, den christlichen Glauben zu verteidigen.
Die Workplace-Revolution: Top-Experten diskutieren über Hybrid- und Remote-Arbeit
In der sich schnell entwickelnden Geschäftslandschaft von heute hat das Konzept der Hybrid- und Remote-Arbeit eine beispiellose Dynamik erlangt. Während sich Unternehmen weiterhin an die sich verändernden Bedürfnisse und Erwartungen ihrer Mitarbeiter anpassen, sind Experten aus verschiedenen Bereichen zusammengekommen, um die Vorteile, Herausforderungen und die Zukunft dieser transformativen Arbeitsweise zu diskutieren.
Wie man den Planeten rettet und Geld verdient
Wie oft haben Sie ohne nachzudenken eine Plastikflasche, ein Glas, eine Aluminiumdose oder ein Öko-Energiepaket weggeworfen? Wie oft haben Sie sich gewünscht, dass Sie für das Recycling etwas zurückbekommen könnten? Wenn Sie wie die meisten Menschen sind, lautet die Antwort wahrscheinlich „vielfach“. Recycling wird oft als Ärger, lästige Pflicht oder Pflicht angesehen, die keinen unmittelbaren oder greifbaren Nutzen bringt.