<Segment />

実例

Segment

The <Segment> component allows you to have a nice button bar with only one active button at a time.

It may be useful for example for filtering lists or especially for connecting to <Tabbar>. See the next page to find out how to do it.

Connecting to <Tabbar>

Sometimes you may want a segment instead of the normal tabs in your tabbar.

You can connect <Segment> and <Tabbar> by providing the ID of the <Tabbar> you want to control as the tabbarId prop of <Segment>.

This way the tabbar will be automatically hidden and the active button of <Segment> will always be in sync with the active tab of <Tabbar>.

Prop一覧

名前 型 / デフォルト値 概要
index number The index of the button to highlight. (翻訳中) Optional.
tabbarId string ID of the <Tabbar> to “connect” to the segment. (翻訳中) Optional.
modifier string The appearance of the segment. (翻訳中) Optional.
onChange function Called when the active button changes. (翻訳中) Optional.

プリセットのmodifier

Name 概要
material Material Design segment (翻訳中)

議論

お困りですか?

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

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

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