Angular 2+ Reference > OnsSplitterSide

OnsSplitterSide Directive (ons-splitter-side)

<ons-splitter-side>要素のAngularディレクティブです。

ons-splitter-side要素は、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;
}

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
animation String
default 		アニメーションを指定します。”overlay”, “push”, “reveal”, “default”のいずれかを指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
open-threshold Number
0.3 		どのくらいスワイプすればスライディングメニューを開くかどうかの割合を指定します。0から1の間の数値を指定します。スワイプの距離がここで指定した数値掛けるこの要素の幅よりも大きければ、スワイプが終わった時にこの要素を開きます。デフォルトは0.3です。 Optional.
collapse String

左側のページを非表示にする条件を指定します。portrait, landscape、width #pxもしくはメディアクエリの指定が可能です。 portraitもしくはlandscapeを指定すると、デバイスの画面が縦向きもしくは横向きになった時に適用されます。 メディアクエリを指定すると、指定したクエリに適合している場合に適用されます。 値に何も指定しない場合には、常にcollapseモードになります。

Optional.
swipe-target-width String スワイプの判定領域をピクセル単位で指定します。画面の端から指定した距離に達するとページが表示されます。 Optional.
width String この要素の横幅を指定します。pxと%での指定が可能です。eg. 90%, 200px Optional.
side String
left 		この要素が左か右かを指定します。指定できる値は”left”か”right”のみです。 Optional.
mode String 現在のモードが設定されます。”collapse”もしくは”split”が指定されます。この属性は読み込み専用です。 Optional.
page String ons-splitter-side要素に表示するページのURLを指定します。 Optional. 初期化時のみ有効
swipeable Boolean collapseモード時にスワイプ操作を有効にする場合に指定します。 Optional.

プロパティ概要

[編集]
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’}
swipeable collapseモード時にスワイプ操作を有効にする場合に指定します。
page この要素内に表示するページを指定します。
pageLoader （翻訳中）
mode Current mode. Possible values are “split”, “collapse”, “closed”, “open” or “changing”. （翻訳中）
onSwipe Hook called whenever the user slides the splitter. It gets a decimal ratio (0-1) and an animationOptions object as arguments. （翻訳中）
isOpen Specifies whether the menu is opened. （翻訳中）

メソッド

[編集]
シグネチャ 概要
open([options]) collapseモードになっているons-splitter-side要素を開きます。
close([options]) collapseモードになっているons-splitter-side要素を閉じます。
toggle([options]) 開けている場合は要素を閉じますそして開けている場合は要素を開きます。
load(page, [options]) 指定したURLをメインページを読み込みます。
open([options]): Promise

collapseモードになっているons-splitter-side要素を開きます。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが開いた後に呼び出される関数オブジェクトを指定します。
close([options]): Promise

collapseモードになっているons-splitter-side要素を閉じます。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが閉じた後に呼び出される関数オブジェクトを指定します。
toggle([options]): Promise

開けている場合は要素を閉じますそして開けている場合は要素を開きます。

返り値:

パラメーター
名前 型 概要
options Object
load(page, [options]): Promise

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

返り値:

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

Inputs

名前 型 概要
page 表示するページコンポーネントのクラスを指定します。
page 表示するページコンポーネントのクラスを指定します。

お困りですか?

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

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

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