2017-11-15 7 views
1

私は最近angle2-materialを使用し始めました。角度flexは、矛盾した動作/混乱/複雑なドキュメント(...)で私を狂ってしまいます。今では、角度フレックスレイアウトを取り除き、ブートストラップ3.xグリッドシステムを使いたいと思っています。私はブートストラップがいくつかの角材料スタイルを上書きするかもしれないという別の質問を読んだ。だから私の質問です:(ブートストラップ3.xのグリッドシステムと組み合わせて角物質のコンポーネントを使用する)誰もこれを前にしていますか?もしそうなら、メジャーが間違っていたり、上書きされたりしていましたか?angle2-materialでangle-flex-layoutの代わりにBootstrap 3.xのグリッドシステムを使用するのは悪い考えですか?

答えて

1

そこに、それをしました。私は、フレックスレイアウトシステムがBootstrapのグリッドシステムよりも悪い/優れている理由を考えることはできませんが、私はその決定に個人的な好みを受け入れることができます。私の経験はAngular 1.xとそのマテリアルデザインコンポーネントにありましたが、私は答えはまだ立っていると思います。

グリッド/レイアウト対コンポーネント

あなたはそれがかなりよくかつ容易に作業することができます位置決めするために、次にブートストラップのグリッド設定とAMDのレイアウト設定を混在しないように十分注意している場合。ラベル、異なるタイプの入力、ボタン、ツールチップ、アイコンなどが含まれるフォームを使用する場合は、同じ時間

でブートストラップおよびAMDの両方のコンポーネントを使用して

1:さまざまなコンポーネントを使用する際に問題が上昇しますあなたは、最も予期せぬ場所でお互いを上書きし続けるCSS階層の巨大な混乱に遭うでしょう。ほんの少しの例:BS 3.xとAMDは、いくつかのケースでブラウザの互換性とアクセシビリティをやや異なったものにしています。 AMDのコンポーネントの幅と位置は、BSのグリッドシステムにある場合は100%ではない親コンテナのレイアウト設定に大きく依存します(おそらく最もブロックの問題)。無効/必須/プレースホルダ/などを想像してみてください。入力の設定:はい、それは、位置、テキストサイズ、および任意の可能な方法で巨大な混乱になります。

2. DOM重いアプローチ

両方のシステムは、DOMのレンダリングに関してはかなり重いです、今の両方を追加することを想像してみてください。大量のデータを表示する場合(数百万ではなく数百または数千)、スタイルやJSの機能を同じ要素に複数回(重なり合ったり上書きしたりして)適用すると、ブラウザに大きな負担がかかりますそれをレンダリングしようとします。これは私の経験では、いくつかのアクションボタンを含むリストに〜2k個のアイテムを表示しなければならなかったので、本当に大きな問題でした。どんな(IE10 +)ブラウザでも苦労してはいけませんでしたが、そうしました。

3.スタイリングの挙動、少なくとも最後にではなく、相互作用

は、私はそれがあまりにも多くの予期せぬ問題を作成したという意味で、それが信頼できない見つけました。 UIを作成しUXと応答性に集中しようとすると、5分ごとに小さな位置決め問題をデバッグすることができました。それは巨大な手間であり、異なる画面上の異なるブラウザで同じに見えるかどうか(少なくとも類似しているかどうかは決してわかりませんでした) UIを最適化するのは、通常は少なくとも3回かかりました。最後に、CSSとJSのスパゲッティの巨大なボウルを使ってそこに立っていました。

解決策? (種類)

MD Bootstrapは私の次のプロジェクトで良い方向に私を指摘した素晴らしいツールです。だからMaterializeです。私はこれらがあなたのすべての問題を解決し、彼らは唯一のことだと言っているわけではありませんが、彼らは私に大きな方向を指摘しました:あなたのUIには何が必要でしょうか最も多くを選択してください。グリッドのような配置をしているなら、BSを使い、CSSライブラリを使ってMDを模倣してください。あなたが角度のMVCとJSの柔軟性を必要とするなら、あなたはAMDと一緒に行くべきですが、良いレイアウト処理を考え出してください。

私の経験共有はあなたを助けたかったし、少なくとも良い方向を指摘してくれることを願っています。数ヶ月前に戻って私の研究で私を助けたいくつかのさらに読み:非常に詳細な回答のため

Using Bootstrap for Angular and Material design for Angular together

Combining angular material with twitter bootstrap without conflicts

+0

感謝。だから、私はあなたを正しく理解していれば、グリッドシステムにはブートストラップ、それ以外には角度材料を使用すればOKです。私はmd-bootstrapでUIを書き直したり、レイアウトを書き直したいという具合にしたくありません。 – user2094257

+0

システムに大量のデータが表示されておらず、それほど複雑ではない場合は、2つのシステムのオーバーラップ/上書きスタイルのためにUIの最適化にかなりの時間を費やすことになります。それは不可能ではない、それは私のプロジェクトのために終わりに働いた。 –

関連する問題