wj-tab-panel ディレクティブを使用して、 AngularJSアプリケーションにTabPanelを追加できます。 ディレクティブ名とパラメータ名は、キャメルケースではなく、小文字とダッシュの形式にする必要があります。 次に例を示します。

<wj-tab-panel>
   <wj-tab>
     <a>Tab1ヘッダー</a>
     <div>
         Tab1の内容
     </div>
   </wj-tab>
   <wj-tab is-disabled="true">
     <a>Tab2ヘッダー</a>
     <div>
         Tab2の内容
     </div>
   </wj-tab>
</wj-tab-panel>

wj-tab-panel ディレクティブは以下の属性をサポートしています。

is-animated

@タブの切り替えをフェードイン効果でアニメーション化するかどうかを決定する値。

auto-switch

@ ユーザーが方向キーを使用してタブを選択したときにコントロールがタブを自動的に切り替えるかどうかを決定する値。

control

= このディレクティブによって作成された TabPanel コントロールへの参照。

selected-index

= 現在選択されている（アクティブな）タブのインデックス。

selected-tab

= 現在選択されている Tab オブジェクト。

initialized

& このイベントは、バインディングが属性値でコントロールを初期化した後に発生します。

is-initialized

= バインディングによるコントロールの初期化が属性値を含めて完了したかどうかを示す値。

selected-index-changed

& TabPanel.selectedIndexChanged イベントハンドラ。

wj-tab-panel ディレクティブには1つ以上の wijmo.angular.nav.WjTab ディレクティブを含めることができます。