メインコンテンツにスキップ
バージョン: v8

構造

Ionic Frameworkは、アプリの構造化に使用できるいくつかの異なるレイアウトを提供します。単一ページレイアウトから、分割ペインビュー、モーダルまで。

利用可能な最もシンプルなレイアウトは、ヘッダーとコンテンツで構成されます。アプリのほとんどのページには、一般的にこれらの両方が含まれていますが、コンテンツを使用するためにヘッダーは必須ではありません。

ヘッダーのツールバーはコンテンツの上に表示されますが、フッターはコンテンツの下に表示されます。ヘッダーとフッターは、同じページで一緒に使用することもできます。

タブレイアウト​

水平タブで構成されるレイアウトを使用すると、ユーザーはコンテンツビューをすばやく切り替えることができます。各タブには、静的コンテンツ、またはルータアウトレットまたはnavを使用してナビゲーションスタックを含めることができます。

モバイルアプリの標準レイアウトには、ボタンをクリックするか、横からスワイプして開くことで、サイドメニューを切り替える機能が含まれています。サイドメニューは一般的にナビゲーションに使用されますが、任意のコンテンツを含めることができます。

分割ペインレイアウト​

分割ペインレイアウトは、以前のレイアウトを組み合わせることができるため、より複雑な構造になっています。ビューポートが指定されたブレークポイントを超えている場合、複数のビューを表示できます。デバイスの画面サイズが特定のサイズより小さい場合、分割ペインビューは非表示になります。

デフォルトでは、分割ペインビューは画面が `768px` より大きい場合、または `md` ブレークポイントの場合に表示されますが、 `when` プロパティを設定することで、異なるブレークポイントを使用するようにカスタマイズできます。以下は、分割ペインに `xs` 画面以上のサイズ、またはビューポートが `0px` より大きい場合に表示されるメニューが含まれている例です。これは、すべての画面サイズで分割ペインを表示します。

分割ペインによって指定された `contentId` と一致する `id` を持つ要素が、常に表示されるメインコンテンツになることに注意することが重要です。これは、nav、ルータアウトレット、タブなど、任意の要素にすることができます。

目次

このページを編集