ons-splitter-side要素は、ons-splitter要素の子要素として利用します。
The Splitter is used to display a menu next to the main content. It can be configured to either display in column layout or as a swipeable menu. It is also possible to automatically switch between column layout and a layout with a swipeable menu based on the screen size or any arbitrary condition. In some situations it can be useful to display a column layout on large devices and hide the menu on smaller screens.
The menu is defined using the SplitterSide component. This component can either be displayed as a column next to the main content or as a swipeable menu. This behavior is controlled using the collapse property.
To enable opening and closing the menu by swiping the isSwipeable property must be defined. The side property is used to specify on which side of the screen the menu is displayed.
The menu can be opened and closed using the isOpen property. This property only works when the menu is collapsed, since in column layout it is always visible.
In the following example the menu is opened, when the user presses a button. The onClose property is called when the menu is closed and is used to control the state.
The main content of the screen is put inside the SplitterContent component. A Page component should be put as a child of this component.
<Splitter>
<SplitterContent>
<Page>
Main content
</Page>
</SplitterContent
</Splitter>
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| 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をメインページを読み込みます。 |
collapseモードになっているons-splitter-side要素を開きます。
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.callback | Function | メニューが開いた後に呼び出される関数オブジェクトを指定します。 |
collapseモードになっているons-splitter-side要素を閉じます。
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.callback | Function | メニューが閉じた後に呼び出される関数オブジェクトを指定します。 |
開けている場合は要素を閉じますそして開けている場合は要素を開きます。
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object |
指定したURLをメインページを読み込みます。
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| page | String |
pageのURLか、<template>で宣言したテンプレートのid属性の値を指定します。
|
| options | Object | |
| options.callback | Function |
| 名前 | 概要 |
|---|---|
| modechange | この要素のモードが変化した際に発火します。 |
| preopen | スライディングメニューが開く前に発火します。 |
| postopen | スライディングメニューが開いた後に発火します。 |
| preclose | スライディングメニューが閉じる前に発火します。 |
| postclose | スライディングメニューが閉じた後に発火します。 |
| swipe | Fired whenever the user slides the splitter. （翻訳中） |
この要素のモードが変化した際に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.side | Object | コンポーネントのオブジェクト。 |
| event.mode | String | 現在のモードを返します。 |
スライディングメニューが開く前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.cancel | Function | スライディングメニューが開くのをキャンセルします。 |
| event.side | Object | コンポーネントのオブジェクト。 |
スライディングメニューが開いた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.side | Object | コンポーネントのオブジェクト。 |
スライディングメニューが閉じる前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.side | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | スライディングメニューが閉じるのをキャンセルします。 |
スライディングメニューが閉じた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.side | Object | コンポーネントのオブジェクト。 |
Fired whenever the user slides the splitter. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.ratio | Object | Decimal ratio (0-1). （翻訳中） |
| event.animationOptions | Object | （翻訳中） |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。