<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.
onOpen func Called after the menu is opened. (翻訳中) Optional.
onClose func Called after the menu is closed. (翻訳中) Optional.
side enum Specify which side of the screen the SplitterSide element is located. Possible values are "left" and "right". (翻訳中) Optional.
swipeTargetWidth union Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). (翻訳中) Optional.
width union Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). (翻訳中) 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.
mode enum Current mode. Possible values are "collapse" or "split". This attribute is read only. (翻訳中) 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に記載をお願いいたします。

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