web-dev-qa-db-ja.com

Angular 4マテリアルはブートストラップのように反応しますか？

私はAngular 4で新しいプロジェクトを始めており、応答性が高く快適なユーザーインターフェイスを作成する必要があります。

  • ブートストラップにより応答性は向上しますが、質感はありません
  • 角張った素材が素敵なUIエクスペリエンスを提供します https://material.angular.io

bootstrapを知っていて以前のAngularJSアプリで使用していましたが、angularマテリアルは私にとって新しいものです。ドキュメントに従うのは簡単に思えますが、応答性のサポートが見つかりません。

それらを混在させたくはありませんが、bootstrapが提供するモバイルサポートの列の応答性を見つけることができませんでした。

何か不足していますか？ angularマテリアルは同様の応答性をサポートしていますか、それともアプリで両方を使用する必要がありますか？

angularresponsive-designangular-material2
26
Brian

最新のangularアプリにレスポンシブネスを追加するには、 Flex-layout を使用できます。これは material2 とは完全に分離されているため、アプリ。

flex-layout は Flexbox CSS に基づいているため、 古いブラウザではサポートされていない であることを忘れないでください。

ここにいくつかあります 例

また、新しい ngAirエピソード について話しているエピソード Flex-Layout もチェックしてください。

更新：

6.0.0-beta.16 から始まる flex-layout に、 CSSグリッドをサポートするAPI が追加されました。 pr＃712 をチェックすると、詳細を確認できます。

26
Kuncevič

2つの異なるAngularプロジェクトを使用してAngularマテリアルをテストしようとしており、1つはAngular CLIでビルドし、2つ目はVisual StudioのAspnetコア2.0テンプレートでテストしました。両方とも、私は簡単なページから始めるのに成功していません。サーバーの実行を開始する前に回避策を経験するのは非常にイライラする経験でした。まず、npmが@ angular/materialをインストールすると、Angularバージョンを5.0.0にアップグレードするように求められます。私がやったとき、それはそれが5.0.0だったときにCLIが2.3.1以上ではないことについて不平を言いました。私はいくつかの回避策をしなければなりませんでした。 1つのチュートリアルでは、mdInputを使用して必要なフォームを実装するためにフォローしていました。しかし、それは文句を言い、それが今matInputであることがわかります。今日は私の3日目であり、成功することはありません。来週の火曜日までに、コンポーネントまたはフォームを使用した簡単なサンプルページを作成したいと考えています。一方、Bootstrapで問題は発生していません。常に安定しています。しかし、私は他のオプションを見たかった。また、PrimeNGで問題が発生したため、Angular Materialを試してみました。誰も同じことを経験していますか？

1
Manuel Hernandez

少し遅れましたが、マテリアル5とAngular 5を含むレスポンシブレイアウトの例と、いくつかの簡単なルーティングを示すスターターテンプレートを作成しました。 https://github.com/kenji-1996/material-sidenav-responsive-starter

MaterialとFlexを使用し、外部ライブラリは使用しません

0
Cacoon