Angular 2+ Reference > ons-splitter-content

ons-splitter-content

ons-splitter-content要素は、ons-splitter要素の子要素として利用します。

実例

Splitter

縦に分割する画面を作ったり、横からスワイプで表示するスライディングメニューを作るには、ons-splitter要素とons-splitter-content要素とOnsSplitterSideディレクティブやOnsSplitterContentディレクティブを使って利用します。

[page]バインディングを使って指定します。

@Component({
  selector: 'app',
  template: `
  <ons-splitter>
    <ons-splitter-side [page]="sidePage" side="left" width="200px" style="border-right: 1px solid #ccc">
    </ons-splitter-side>

    <ons-splitter-content [page]="contentPage">
    </ons-splitter-content>
  </ons-splitter>
  `
})
export class AppComponent {
  sidePage = SidePageComponent;
  contentPage = ContentPageComponent;
}

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
page String ons-splitter-content要素に表示するページのURLを指定します。 Optional.

プロパティ概要

[編集]
名前 概要
page この要素内に表示するページを指定します。
pageLoader この要素内に表示するページを指定します。

メソッド

[編集]
シグネチャ 概要
load(page, [options]) 指定したURLをメインページを読み込みます。
load(page, [options]): Promise

指定したURLをメインページを読み込みます。

返り値: <ons-page>要素を解決するPromiseオブジェクトを返します。

パラメーター
名前 型 概要
page, String pageのURLか、<template>で宣言したテンプレートのid属性の値を指定します。
options Object
options.callback Function

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。