如何使用JHipster 5+与PrimeNG 6+(How to use JHipster 5+

2019-10-29 06:45发布

我试过了:

  • 官方入门指南,PrimeNG
  • 步骤PrimeNG与JHipster集成 (对不起,如果这是一个重复的帖子,没有代表评论那里)
  • 发电机jhipster-primeng

和其他一些文章和帖子计算器上获取最新PrimeNG没有运气6+与最新JHipster 5+工作。 它主要工作,但款式都有点过-主要是好像primeicons不工作。

例如,我试过primeng过滤表例子 ,它主要是工作以外的图标,如箭头下拉列表中显示为空箱以及其他不正确显示。 我怀疑这可能与无法正确导入primeicons办?

有没有人有这个工作? 我测试使用新安装的一切,但是,如果真的需要我可以张贴代码。

Answer 1:

它的工作对我对不起你们,我刚刚使用绊倒generator-jhipster-primeng不工作的开箱。 步骤这里大多是工作,就必须包括primeicons。 我下面包括全反正方向。

然而, 布局/ CSS样式还是有点过 (也许他们有JHipster /引导冲突),你将不得不调整一些官方PrimeNG例子,比如使用<fa-icon>代替旧<i>风格图标。

步骤PrimeNG融入JHipster项目:

1.添加依赖

  • yarn add primeicons primeng @angular/animations
  • 可能需要使用方芯的相同版本的动画,以避免出现问题

2.导入CSS样式

vendor.css (或vendor.scss如果您使用的Sass)地址:

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css'; // pick whatever theme
@import '~primeng/resources/primeng.min.css'
  • 注意引导主题布局尤其是关机。 其他主题被发现在node_modules/primeng/resources/themes

3.导入模块

  • 我加BrowserAnimationsModuleapp.module.ts ,但你可以只添加需要的地方:
    • import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    • 添加BrowserAnimationsModule@NgModule进口阵列以及
  • 无论PrimeNG模块需要(遵守其实例文档)导入

就是这样! 现在,按照PrimeNG文档使用特定组件。

经测试jhipster 5.2.1primeng 6.1.2primeicons 1.0.0-beta.10



文章来源: How to use JHipster 5+ with PrimeNG 6+