The <v-ons-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 <v-ons-tabbar>. See the next page to find out how to do it.
Sometimes you may want a segment instead of the normal tabs in your tabbar.
You can connect <v-ons-segment> and <v-ons-tabbar> by providing the ID of the <v-ons-tabbar> you want to control as the tabbar-id attribute of <v-ons-segment>.
This way the tabbar will be automatically hidden and the active button of <v-ons-segment> will always be in sync with the active tab of <v-ons-tabbar>.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| activeIndex | Number | Index of the active button. If a tabbar is connected, this will be set to the tabbar’s active index. （翻訳中） Optional. |
| disabled | Boolean | ボタンを無効化する場合は指定します。 Optional. |
| modifier | String | The appearance of the segment. （翻訳中） Optional. |
| tabbarId | String | ID of the tabbar element to “connect” to the segment. Must be inside the same page. （翻訳中） Optional. |
| Name | 概要 |
|---|---|
| material | Material Design segment （翻訳中） |
| 名前 | 概要 |
|---|---|
| postchange | Fires after the active button is changed. （翻訳中） |
| update:activeIndex |
Fired right after the active button changes. Useful to update activeIndex prop.
（翻訳中）
|
Fires after the active button is changed. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. （翻訳中） |
| event.index | Number | Tapped button index. （翻訳中） |
| event.segmentItem | Object | Segment item object. （翻訳中） |
Fired right after the active button changes. Useful to update activeIndex prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for activeIndex prop.
（翻訳中）
|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。