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;
}