v-ons-splitter-side

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

実例

Splitter

The VOnsSplitter component 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 VOnsSplitterSide component. This component can either be displayed as a column next to the main content or as a swipeable menu. This behavior is controlled by using the collapse prop.

To enable opening and closing the menu by swiping, the swipable prop must be defined. The side prop is used to specify on which side of the screen the menu is displayed.

The open prop allows to assign a boolean variable to the menu in order to open or close it. This only works when the menu is collapsed, since in column layout it is always visible. An update:open event is fired whenever the user interacts with the menu and allows to synchronize the open prop (sync modifier can be used as a shortcut):

<v-ons-splitter-side :open.sync="isOpen">

In order to open or close the menu from a button, we must pass a method that modifies open prop down to the right place.

Main content

The main content of the screen is located inside the VOnsSplitterContent component. A VOnsPage component should always be the child of this component.

<v-ons-splitter>
  <v-ons-splitter-content>
    <v-ons-page>
      Main content
    </v-ons-page>
  </v-ons-splitter-content
</v-ons-splitter>

In order to change its content, we can simply switch its children with Vue is prop or any other way. This also works for VOnsSplitterSide component.

If you want to show core transition animations between pages or need a more complex routing, consider nesting VOnsNavigator inside VOnsSplitterContent.

関連情報

Prop一覧

名前 型 / デフォルト値 概要
collapse String

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

Optional.
mode String 現在のモードが設定されます。”collapse”もしくは”split”が指定されます。この属性は読み込み専用です。 Optional.
open Boolean If exists, the menu will be opened accordingly. Must be modified on update:open event. (翻訳中) Optional.
open-threshold Number どのくらいスワイプすればスライディングメニューを開くかどうかの割合を指定します。0から1の間の数値を指定します。スワイプの距離がここで指定した数値掛けるこの要素の幅よりも大きければ、スワイプが終わった時にこの要素を開きます。デフォルトは0.3です。 Optional.
options.animation String アニメーションを指定します。”overlay”, “push”, “reveal”, “default”のいずれかを指定できます。 Optional.
options.animationOptions Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
side String この要素が左か右かを指定します。指定できる値は”left”か”right”のみです。 Optional.
swipe-target-width String スワイプの判定領域をピクセル単位で指定します。画面の端から指定した距離に達するとページが表示されます。 Optional.
swipeable Boolean collapseモード時にスワイプ操作を有効にする場合に指定します。 Optional.
width String この要素の横幅を指定します。pxと%での指定が可能です。eg. 90%, 200px Optional.

イベント

名前 概要
modechange この要素のモードが変化した際に発火します。
preopen スライディングメニューが開く前に発火します。
postopen スライディングメニューが開いた後に発火します。
preclose スライディングメニューが閉じる前に発火します。
postclose スライディングメニューが閉じた後に発火します。
update:open Fired right after user interaction. Useful to update open prop. (翻訳中)
modechange

この要素のモードが変化した際に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
event.mode String 現在のモードを返します。
preopen

スライディングメニューが開く前に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.cancel Function スライディングメニューが開くのをキャンセルします。
event.side Object コンポーネントのオブジェクト。
postopen

スライディングメニューが開いた後に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
preclose

スライディングメニューが閉じる前に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
event.cancel Function スライディングメニューが閉じるのをキャンセルします。
postclose

スライディングメニューが閉じた後に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
update:open

Fired right after user interaction. Useful to update open prop. (翻訳中)

パラメーター
名前 概要
event Number New value for open prop. (翻訳中)

お困りですか?

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

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

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