The <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 <ons-tabbar>. See the next section to find out how to do it.
Sometimes you may want a segment instead of the normal tabs in your tabbar.
You can connect <ons-segment> and <ons-tabbar> by providing the ID of the <ons-tabbar> you want to control as the tabbar-id attribute of <ons-segment>.
This way the tabbar will be automatically hidden and the active button of <ons-segment> will always be in sync with the active tab of <ons-tabbar>.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| modifier | String | The appearance of the segment. （翻訳中） Optional. |
| tabbar-id | String | ID of the tabbar element to “connect” to the segment. Must be inside the same page. （翻訳中） Optional. 初期化時のみ有効 |
| active-index |
Number
0 |
Index of the active button. If a tabbar is connected, this will be set to the tabbar’s active index. （翻訳中） Optional. |
| disabled | ボタンを無効化する場合は指定します。 Optional. |
| 名前 | 概要 |
|---|---|
| activeIndex | Index of the active button. If a tabbar is connected, this will be set to the tabbar’s active index. （翻訳中） |
| disabled |
無効化されている場合にtrue。
|
| Name | 概要 |
|---|---|
| material | Material Design segment （翻訳中） |
| シグネチャ | 概要 |
|---|---|
| setActiveButton(index, [options]) | Make button with the specified index active. If there is a connected tabbar it shows the corresponding tab page. In this case animations and their options can be specified by the second parameter. （翻訳中） |
| getActiveButtonIndex() | Returns button index of current active button. If active button is not found, returns -1. （翻訳中） |
Make button with the specified index active. If there is a connected tabbar it shows the corresponding tab page. In this case animations and their options can be specified by the second parameter. （翻訳中）
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| index | Number | Button index. （翻訳中） |
| options | Object |
Parameter object, works only if there is a connected tabbar. Supports the same options as ons-tabbar‘s setActiveTab method.
（翻訳中）
|
Returns button index of current active button. If active button is not found, returns -1. （翻訳中）
返り値:
| 名前 | 概要 |
|---|---|
| postchange | Fires after the active button is changed. （翻訳中） |
Fires after the active button is changed. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. （翻訳中） |
| event.index | Number | Tapped button index. （翻訳中） |
| event.segmentItem | Object | Segment item object. （翻訳中） |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。