React Reference > SplitterSide Component

<SplitterSide />

使い方 

<Splitter>
    <SplitterSide
      side="left"
      width={200}
      swipeable={true}>
      <Page> Page Left </Page>
    </SplitterSide>
    <SplitterContent>
      <Page> Page Content </Page>
    </SplitterContent>
    <SplitterSide
      side="right"
      width={300}
      collapse={!this.state.showRight}
      isOpen={this.state.openRight}
      onClose={this.handleRightClose.bind(this)}
      onOpen={this.handleRightOpen.bind(this)}
      swipeable={true}>
      <Page> Page Right </Page>
    </SplitterSide>
  </Splitter>

Prop一覧

[編集]
名前 型 / デフォルト値 概要
collapse union

Specify the collapse behavior. Valid values are "portrait", "landscape" or a media query. The strings "portrait" and "landscape" means the view will collapse when device is in landscape or portrait orientation. If the value is not defined, the view always be in "collapse" mode.

（翻訳中） Optional.
swipeable bool Ennable swipe interaction on collapse mode. （翻訳中） Optional.
isOpen bool Specifies whether the menu is open. （翻訳中） Optional.
onPostOpen func Called after the menu is opened. （翻訳中） Optional.
onOpen func DEPRECATED! Use onPostOpen instead. （翻訳中） Optional.
onPostClose func Called after the menu is closed. （翻訳中） Optional.
onClose func DEPRECATED! Use onPostClose instead. （翻訳中） Optional.
side enum Specify which side of the screen the SplitterSide element is located. Possible values are "left" and "right". （翻訳中） Optional.
swipeTargetWidth number The width of swipeable area calculated from the edge (in pixels). Use this to enable swipe only when the finger touch on the screen edge. （翻訳中） Optional.
width string Specifies the width of the menu. Can be specified in either pixels or as a percentage, e.g. "90%" or "200px". （翻訳中） Optional.
animation string Specify the animation. Use one of overlay, push, reveal, or default. （翻訳中） Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. （翻訳中） Optional.
openThreshold number Specify how much the menu needs to be swiped before opening. A value between 0 and 1. （翻訳中） Optional.
onPreOpen func Called before the menu opens. （翻訳中） Optional.
onPreClose func Called before the menu closes. （翻訳中） Optional.
onModeChange func Called after the component’s mode changes. （翻訳中） Optional.

お困りですか?

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

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

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