[]
        
(Showing Draft Content)

Wijmo_Nav.Tabpanel

TabPanel クラス

TabPanel を使用すると、ビュー、データセット、またはアプリケーションの機能面を切り替えるなどのような高度なレベルでコンテンツを整理できます。

タブは、関連する内容の上側に1行で表示されます。 タブヘッダーは、タブ内の内容を簡潔に記述します。

タブは、マウスまたはキーボードで選択でき、現在の選択内容を反映するように内容を自動的に更新することができます。

次の例では、TabPanel を使用して内容をページに整理する方法を示しています。

階層

  • any
    • TabPanel

コンストラクタ

constructor

  • new TabPanel(element: any, options?: any, keepChildren?: boolean): TabPanel
  • TabPanel クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    • オプション keepChildren: boolean

      子要素を保持するかどうか。 trueに設定した場合、呼び出し元はDOMに基づいてtabs の配列に値を設定します。

    戻り値 TabPanel

プロパティ

autoSwitch

autoSwitch: boolean

ユーザーが矢印キーを使用してタブを選択したときにコントロールがタブを自動的に切り替えるかどうかを決定する値を取得または設定します。

autoSwitch がtrue(デフォルト値)に設定されている場合、矢印キーを押すとタブが自動的に切り替わります。 タブキーを押すと、選択されていないタブヘッダーは除外され、タブ順序の次の要素が選択されます。

autoSwitch がfalseに設定されている場合、矢印キーまたはTabキーを押すと、フォーカスが次のタブヘッダーまたは前のタブヘッダーに移動しますが、 タブは切り替わりません。フォーカスがあるタブをアクティブにするには、EnterキーまたはSpaceキーを押す必要があります。

ほとんどの場合、デフォルト値は適切な(アクセス可能な)動作を提供しますが、 autoSwitch をfalseに設定したいユーザーも存在するかもしれません。 このトピックの詳細については、以下をご参考ください。 W3C ARIA practicesSimplyAccessible

isAnimated

isAnimated: boolean

タブの変更をフェードイン効果でアニメーション化するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

selectedIndex

selectedIndex: number

現在選択されている(アクティブな)タブのインデックスを取得または設定します。

selectedTab

selectedTab: Tab

現在選択されているTab を取得または設定します。

tabs

Tab.headerTab.pane プロパティがTabPanel コントロールの内容を決定するTab オブジェクトの配列を取得します。

静的 controlTemplate

controlTemplate: string

TabPanel コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

getTab

  • getTab(id: string): Tab
  • IDまたはヘッダの内容によってTab を取得します。

    引数

    • id: string

      取得するTab のID。

    戻り値 Tab

onSelectedIndexChanged

  • onSelectedIndexChanged(e?: EventArgs): void

イベント

selectedIndexChanged

selectedIndexChanged: Event

selectedIndex プロパティの値が変更されたときに発生します。