web-dev-qa-db-fra.com

angular - utilisation de PrimeNG avec Bootstrap 4

Actuellement, je joue avec UI-Libraries pour un nouveau projet Angular 2. J'ai essayé Ng-Bootstrap and Material. Malheureusement, ils sont toujours en Alpha et Beta. J'ai aussi vérifié PrimeNG. PrimeNG offre actuellement beaucoup plus de composants que Material et NgBootstrap. Surtout quand il s'agit de tables. PrimeNG semble être stable et prêt à être utilisé pour la production.

Je ne suis pas vraiment satisfait du système de grille de PrimeNG. Par exemple, il n'est pas clair comment effectuer un décalage de colonne, par exemple. Je ne pouvais pas trouver cela dans la documentation ( https://www.primefaces.org/primeng/#/grid ) non plus. 

J'ai commencé à utiliser bootstrap 4 avec les composants PrimeNG. Pour moi, il n’est pas clair si c’est une bonne façon de faire. J'ai l'impression que deux cadres font la même chose dans certains cas. Par exemple, si je veux créer un bouton, je pourrais faire ce qui suit simplement en utilisant des classes bootstrap

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

ou je pourrais faire ce qui suit en utilisant PrimeNG

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

Me manque-t-il certaines fonctionnalités de PrimeNG ou est-il valide d'utiliser Bootstrap en combinaison avec PrimeNG car il offre davantage de fonctionnalités en ce qui concerne Grid-Layout.

twitter-bootstrapangularprimeng
7
Trafalgar

Il n'y a rien de mal à utiliser Bootstrap avec PrimeNG. Vous pouvez toujours utiliser les goodies CSS de Bootstrap. Mais comme vous l'avez dit, vous ne souhaitez utiliser que quelques fonctionnalités de Bootstrap (comme son système de grille) et pas les autres que vous avez déjà dans la structure PrimeNG, il est donc recommandé de personnaliser Bootstrap. Pour le moment, il n’existe pas d’option officielle permettant de personnaliser Bootstrap comme dans Bootstrap 3. Mais vous pouvez le faire manuellement. Il suffit de télécharger la source de Bootstrap (avec les fichiers Sass) où vous aurez des fichiers séparés pour chaque fonction de Bootstrap. Vous pourrez ensuite commenter les fichiers que vous ne souhaitez pas utiliser si vous n'en avez pas besoin pour les boutons le fichier _buttons.scss ou _modal.scss etc. Il compilera pour vous le fichier CSS qui ne contiendra que le CSS que vous souhaitez. Mais pour cela, vous devez avoir des connaissances de base sur le SASS.

7
Ali Shahzad

Je peux voir deux inconvénients avec votre approche actuelle: 

  • La liste des autres développeurs de votre équipe peut ne pas reconnaître immédiatement que vous utilisez deux frameworks complets et utiliser l'un ou l'autre à des fins "erronées" dans votre contexte.
  • en fonction de votre système de construction, vous pouvez transporter beaucoup de bagages inutiles.

Cela dit, je pense que c'est une approche valable. Cependant, vous pouvez envisager de remplacer bootstrap par une bibliothèque dédiée plus petite pour les dispositions de grille ou de harceler l’équipe PrimeNG pour des fonctionnalités spécifiques liées à la disposition de grille ou même d’utiliser simplement un simple flex-box.

5
Jens Habegger

Un grand soulagement pour tous les fans de PrimeNG. 

La dernière version de PrimeNG 5.6.X et des versions ultérieures est fournie avec Bootstrap.

Profitez du codage :-) 

2
Karthik H