角度 - 使用PrimeNG和Bootstrap 4

Question

目前,我正在为新的Angular 2项目使用UI-Libraries.我试过Ng-Bootstrap和Material.不幸的是,他们仍处于Alpha和Beta状态.我还检查了PrimeNG.目前,PrimeNG提供了比Material和NgBootstrap更多的组件.尤其是在桌子方面.PrimeNG似乎很稳定,可以用于生产.

我对PrimeNG的网格系统并不满意.例如,不清楚如何执行列偏移.我在文档(https://www.primefaces.org/primeng/#/grid)中也找不到这个.

我开始在PrimeNG组件中使用bootstrap 4.对我来说,这还不是一个好方法.感觉就像我有两个框架在某些情况下做同样的事情.例如,如果我想创建一个按钮,我可以使用bootstrap类来执行以下操作

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

或者我可以使用PrimeNG执行以下操作

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

我是否缺少PrimeNG的一些功能,或者将Bootstrap与PrimeNG结合使用是有效的,因为它在Grid-Layout方面提供了更多功能.

Answer 1

使用它Bootstrap并没有错PrimeNG.你仍然可以使用Bootstrap的CSS好东西.但正如你所说,你只想使用Bootstrap的一些功能(比如它的网格系统),而不是你在PrimeNG框架中已有的其他功能,那么我建议自定义Bootstrap.目前还没有官方选项来自定义Bootstrap,就像在Bootstrap 3中一样.但你可以手动完成.只需下载Bootstrap的源代码(带有Sass文件),你可以在其中为Bootstrap的每个功能提供单独的文件,然后你可以注释掉你不想要的文件,如果你不需要它可以用于评论的按钮出_buttons.scss文件或_modal.scss等,将编译你的CSS文件,该文件将只包含您想要的CSS.但为此你需要掌握一些关于SASS的基本知识.

Answer 2

我目前的方法可以看出两个缺点:

• 列出团队中的其他开发人员可能不会立即意识到您正在使用两个完整的框架,并在您的上下文中使用其中一个用于"错误"目的
• 根据您的构建系统,您可能携带了大量不必要的行李.

也就是说,我认为这是一种有效的方法.但是,您可以考虑使用较小的专用库替换bootstrap以进行网格布局,或者将PrimeNG团队用于特定的网格布局相关功能,甚至只需使用普通的flex-box.