angular - mit PrimeNG mit Bootstrap 4

Question

Momentan spiele ich mit UI-Libraries für ein neues Angular 2 Project. Ich habe Ng-Bootstrap und Material ausprobiert. Leider sind sie immer noch in Alpha und Beta. Ich habe auch PrimeNG überprüft. Momentan bietet PrimeNG wesentlich mehr Komponenten als Material und NgBootstrap. Vor allem, wenn es um Tische geht. PrimeNG scheint stabil und bereit für die Produktion zu sein.

Ich bin nicht wirklich zufrieden mit dem Grid-System von PrimeNG. Zum Beispiel ist nicht klar, wie man zum Beispiel einen Spaltenoffset durchführt. Ich konnte dies weder in der Dokumentation (https://www.primefaces.org/primeng/#/grid) noch finden.

Ich fing an, Bootstrap 4 mit PrimeNG-Komponenten zu verwenden. Mir ist nicht ganz klar, ob das ein guter Weg ist. Es fühlt sich an, als hätte ich zwei Frameworks, die in einigen Fällen dasselbe tun. Zum Beispiel, wenn ich will eine Schaltfläche erstellen, ich folgenden nur mit Bootstrap-Klassen tun könnte

<button class="btn btn-primary">Button with Bootstrap</button>

oder ich könnte die folgende Verwendung PrimeNG

<button pButton type="button" label="Button created with PrimeNG"></button> 

Bin ich fehle einige Funktionen von PrimeNG tun oder ist es möglich, Bootstrap in Verbindung mit PrimeNG zu verwenden, da es mehr Funktionen bietet, wenn es um Grid-Layout geht.

Answer 1

Es ist nichts falsch mit Bootstrap zusammen mit PrimeNG zu verwenden. Sie können weiterhin die CSS-Extras von Bootstrap verwenden. Aber wie du schon sagtest, du willst nur einige Features von Bootstrap (wie sein Grid-System) und nicht die anderen, die du bereits im PrimeNG-Framework hast, dann empfehle ich, den Bootstrap anzupassen. Momentan gibt es keine offizielle Möglichkeit, Bootstrap so anzupassen, wie es in Bootstrap 3 ist. Aber Sie können es manuell tun. Laden Sie einfach die Bootstrap-Quelle (mit Sass-Dateien) herunter, wo Sie separate Dateien für jede Funktion von Bootstrap haben, dann können Sie die Dateien, die Sie nicht möchten, auskommentieren, wenn Sie sie nicht für Schaltflächen brauchen, die Sie kommentieren können aus der _buttons.scss Datei oder _modal.scss usw. Es wird für Sie die CSS-Datei kompilieren, die nur das CSS enthält, das Sie wollen. Dafür benötigen Sie Grundkenntnisse über SASS.

Answer 2

ich zwei Nachteile mit Ihrem aktuellen Ansatz sehen:

• Liste andere Entwickler in Ihrem Team möglicherweise nicht erkennen sofort, dass Sie zwei komplette Frameworks verwenden und verwenden entweder ein für den ‚falschen‘ Zweck in Ihrem Kontext
• Je nach Ihrem Build-System können Sie viel unnötiges Gepäck tragen.

Das sagte, ich denke, es ist ein gültiger Ansatz. Sie sollten jedoch Bootstrap durch eine kleinere dedizierte Bibliothek für Rasterlayouts ersetzen oder das PrimeNG-Team für bestimmte Grid-Layout-Funktionen oder einfach nur Flex-Box verwenden.