Bootstrap 4でPrimeNGを使用する
現在、私は新しいAngular 2プロジェクトのUIライブラリーをいじっています。Ng-BootstrapとMaterialを試しました。残念ながら、それらはまだアルファ版とベータ版です。PrimeNGもチェックしました。 PrimeNGは、MaterialやNgBootstrapよりもはるかに多くのコンポーネントを提供しています。特にテーブルに関しては、PrimeNGは安定しており、生産に使用する準備ができているようです。
PrimeNGのグリッドシステムにはあまり満足していません。たとえば、列オフセットの実行方法などは明確ではありません。 documentation でもこれを見つけることができませんでした。
Bootstrap 4をPrimeNG Componentsで使用し始めました。これが良い方法であるかどうかは、私には完全には明らかではありません。場合によっては、同じことをしている2つのフレームワークがあるように感じますたとえば、ボタンを作成したい場合、Bootstrapクラスを使用するだけで次のことができます。
<button class="btn btn-primary">Button with Bootstrap</button>
または私はPrimeNGを使用して次のことができます
<button pButton type="button" label="Button created with PrimeNG"></button>
PrimeNGのいくつかの機能が欠けているのですか、それとも、Grid-Layoutに関してより多くの機能を提供するので、PrimeNGと組み合わせてBootstrapを使用することは有効ですか？
BootstrapをPrimeNGと併用しても問題はありません。引き続きBootstrapのCSSを使用できます。ただし、Bootstrap（そのグリッドシステムのような）のいくつかの機能のみを使用し、PrimeNGフレームワークに既にある他の機能は使用しないことをお勧めします。Bootstrapをカスタマイズすることをお勧めします。 Bootstrap Bootstrap 3.のようにカスタマイズするための公式オプションはありません。しかし、手動で行うことができます。Bootstrap（Sassファイルを使用）Bootstrapのすべての機能に個別のファイルがあり、コメントアウトできるボタンに必要ない場合など、不要なファイルをコメントアウトできます_buttons.scssファイルまたは_modal.scssなど。必要なCSSのみを含むCSSファイルがコンパイルされます。ただし、そのためにはSASSに関する基本的な知識が必要です。
現在のアプローチには2つの欠点があります。
- チーム内の他の開発者をリストします。2つの完全なフレームワークを使用していることをすぐに認識せず、どちらか一方をコンテキスト内の「間違った」目的に使用します。
- ビルドシステムによっては、不要な荷物をたくさん運ぶ場合があります。
とはいえ、これは有効なアプローチだと思います。ただし、bootstrapをグリッドレイアウト用の小さな専用ライブラリに置き換えるか、PrimeNGチームに特定のグリッドレイアウト関連の機能を提供するか、単純なフレックスボックスを使用することも検討してください。
すべてのPrimeNGファンに大きな安心を。
PrimeNG 5.6.X以降の最新バージョンには、Bootstrapが付属しています。
コーディングをお楽しみください:-)
PrimeNGには実際には2つのグリッドシステムがあります- 古いもの Bootstrap 3グリッドシステムに似ています 新しいもの FlexGridベースのグリッドシステムです。古いものは非推奨としてリストされていますが、ユーザーベースがFlexGridをサポートしていないブラウザーを使用する可能性がある場合は、「非推奨」のグリッドを使用する必要があります。
それらのグリッドには、Bootstrapと同様に12列があり、ui-g、ui-sm-*、ui-md-*、ui-lg-*、ui-xl-*などのクラスを使用します。*は、 1〜12。Bootstrap 3が使用するクラスrowの代わりに、新しい行にui-gを使用します。
そうは言っても、Bootstrap 3とPrimeNGの両方を使用したので、なぜ2を組み合わせた方がいいのかがわかります。Bootstrapの方がはるかに使いやすいのですが、編集可能なテーブル、次にPrimeNGがBootstrapに勝ります。読み取り専用の方法でテーブルを使用している場合は、Bootstrapで問題ありません。