OnsSegment Directive (ons-segment)

<ons-segment>要素のAngularディレクティブです。

実例

Segment

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.

関連情報

属性

名前 型 / デフォルト値 概要
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 first active button, only works if there is no connected tabbar (in which case the active tab sets the active button). (翻訳中) Optional. 初期化時のみ有効
disabled ボタンを無効化する場合は指定します。 Optional.

プロパティ概要

名前 概要
disabled 無効化されている場合にtrue

プリセットのmodifier

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. (翻訳中)
setActiveButton(index, [options]): Promise

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. (翻訳中)
getActiveButtonIndex(): Number

Returns button index of current active button. If active button is not found, returns -1. (翻訳中)

返り値:

Inputs

名前 概要
activeIndex {number} アクティブなボタンのインデックスを設定します。
tabbar {Type<any>} このセグメントに紐づけるタブバーを指定します。タブバーはセグメントと同一ページ内に存在する必要があります。初期化時にのみ動作します。

Outputs

名前 概要
postchange ons-segment要素のアクティブなボタンのインデックスが変わった時に呼び出されます。
activeIndexChange {number} アクティブなボタンのインデックスが変化した時に発火します。

お困りですか?

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

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

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