React Reference > Tabbar Component

<Tabbar />

使い方 

<Page>
    <Tabbar
      onPreChange={({index}) => this.setState(index)}
      onPostChange={() => console.log('postChange')}
      onReactive={() => console.log('postChange')}
      position='bottom'
      index={this.state.index}
      renderTabs={(activeIndex, tabbar) => [
        {
          content: <TabPage title="Home" active={activeIndex === 0} tabbar={tabbar} />,
          tab: <Tab label="Home" icon="md-home" />
        },
        {
          content: <TabPage title="Settings" active={activeIndex === 1} tabbar={tabbar} />,
          tab: <Tab label="Settings" icon="md-settings" />
        }]
      }
    />
  </Page>

Prop一覧

[編集]
名前 型 / デフォルト値 概要
activeIndex number The index of the tab to highlight. （翻訳中） Optional.
index number DEPRECATED! Use activeIndex instead. （翻訳中） Optional.
renderTabs func Function that returns an array of objects with the keys content and tab. （翻訳中） 必須
position string Tabbar’s position. Available values are "bottom" and "top". Use "auto" to choose position depending on platform (iOS bottom, Android top). （翻訳中） Optional.
swipeable bool Enable swipe interaction. （翻訳中） Optional.
ignoreEdgeWidth number Distance in pixels from both edges. Swiping on these areas will prioritize parent components such as Splitter or Navigator. （翻訳中） Optional.
animation enum If this attribute is set to "none" the transitions will not be animated. （翻訳中） Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. （翻訳中） Optional.
tabBorder bool If true, the tabs show a dynamic bottom border. Only works for iOS since the border is always visible in Material Design. （翻訳中） Optional.
onPreChange func Called just before the tab is changed. （翻訳中） Optional.
onPostChange func Called just after the tab is changed. （翻訳中） Optional.
onReactive func Called if the already open tab is tapped again. （翻訳中） Optional.
onSwipe func Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. （翻訳中） Optional.
visible bool If true, the tabbar is not shown on the screen. Otherwise, the tabbar is shown. （翻訳中） Optional.
visible bool DEPRECATED! Use hideTabs instead. （翻訳中） Optional.
modifier string The appearance of the tabbar. （翻訳中） Optional.

プリセットのmodifier

[編集]
Name 概要
material A tabbar in Material Design. （翻訳中）
autogrow Tabs automatically grow depending on their content instead of having a fixed width. （翻訳中）
top-border Shows a static border-bottom in tabs for iOS top tabbars. （翻訳中）

お困りですか?

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

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

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