Ionic 2を使用して携帯電話とタブレットのレイアウトを変更することはできますか？

Question

Ionic 2の応答グリッドシステムがありますが、それはグリッドスタイルのレイアウトを作成できるように見えます。

私は、タブレットに一方向のビューと電話でもう一方のビューを表示できるようなものを探しています。この具体的な例では、私は仕事のリストを持っています。タブレットの場合は、リストの右側に地図を表示してそれらをプロットしたいと思います。どのように私は理解マップを作るが、どのように彼らが使用していると正しいUIを表示すると言うのですか？

Answer 1

あなたはレイアウトがplatform informationを使用することによって示されようとしている方法を決めることができました：

Platform Name Description 
android on a device running Android. 
cordova on a device running Cordova. 
core on a desktop device. 
ios on a device running iOS. 
ipad on an iPad device. 
iphone on an iPhone device. 
mobile on a mobile device. 
mobileweb in a browser on a mobile device. 
phablet on a phablet device. 
tablet on a tablet device. 
windows on a device running Windows. 

基礎となるplatform情報を使用することによりそのtablet（またはipad）場合はあなただけで物事を表示または非表示にでき単純にやって：

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad'); 

そして*ngIfまたは何でも、あなたのビューで必要なを使用して、またはマップ0を初期化するかどうかを決定することisTabletOrIpadプロパティを使用して、 rはありません。

Answer 2

@sebaferrerasと似ていますが、Platform Nameに記載されている名前を使用できますが、showWhen属性と組み合わせて使用​​することをお勧めします。

showWhen属性には、プラットフォームを表す文字列、または の画面方向が使用されます。属性が追加される要素は、そのプラットフォームまたは画面の向きがアクティブなときに表示されるのは です。

このアプローチでは、Platform.classファイルに何もする必要がないという意味で、HTMLで心配する必要があるのは唯一のコードだけです。

例

あなたはより多くの情報のためのSeのみ

<div showWhen="tablet"> 
    All content inside here will be visible on tablet devices 
</div> 

タブレット画面上に表示され ShowWhenドキュメントに特定のコードをしたい場合。また、 HideWhen属性も提供しています。

注

• 下のコメントで述べたように

  showWhenアプローチはちょうどまだの種類に関係なく をレンダリングされますあなたのHTMLを意味要素にdisplay: none;プロパティ を適用しますデバイス。

• *ngIfのアプローチをとった場合、それが規則を満たしていれば のHTMLコンテンツのみを読み込みます。賢い*ngIf

パフォーマンスが（私は他の読者のために、このジェネリックを維持しようとしている）がより有利かもしれshowWhen他のシナリオでは、あなたのためのより良いオプションかもしれません。