クラス IgxBottomNavComponent

Ignite UI for Angular Tab Bar - ヘルプ

Ignite UI Tab Bar は、単一ビューで表示される複数のコンテンツ パネル間での移動を可能にします。 例:

<igx-bottom-nav>
  <igx-tab-panel label="Tab 1">Tab 1 Content</igx-tab-panel>
  <igx-tab-panel label="Tab 2">Tab 2 Content</igx-tab-panel>
  <igx-tab-panel label="Tab 3">Tab 3 Content</igx-tab-panel>
</igx-bottom-nav>

階層

  • IgxBottomNavComponent

実装

  • AfterViewInit
  • OnDestroy

コンストラクタ

constructor

プロパティ

contentTabs

contentTabs: QueryList<IgxTabComponent>

コンテンツ子として定義されている Tab Bar コンポーネントの IgxTabComponent 要素を取得します。

let tabs: QueryList<IgxTabComponent> =  this.tabBar.contentTabs;
@次のメンバー:

IgxBottomNavComponent

id

id: string = `igx-bottom-nav-${this._currentBottomNavId}`

タブ バーの id を取得または設定します。 設定されない場合、最初のタブ バー コンポーネントの id"igx-bottom-nav-0" になります。

<igx-bottom-nav id = "my-first-tab-bar"></igx-bottom-nav>
let tabBarId =  this.tabBar.id;
@次のメンバー:

IgxBottomNavComponent

onTabDeselected

onTabDeselected: EventEmitter<ISelectTabEventArgs> = new EventEmitter<ISelectTabEventArgs>()

タブが選択解除されたときにイベントを発生します。 イベント引数として IgxTabComponent および IgxTabPanelComponent への参照を提供します。

<igx-bottom-nav (onTabDeselected) = "onTabDeselected($event)"><igx-bottom-nav>
@次のメンバー:

IgxBottomNavComponent

onTabSelected

onTabSelected: EventEmitter<ISelectTabEventArgs> = new EventEmitter<ISelectTabEventArgs>()

新しいタブが選択されたときにイベントを発生します。 イベント引数として IgxTabComponent および IgxTabPanelComponent への参照を提供します。

<igx-bottom-nav (onTableSelected) = "onTabSelected($event)"><igx-bottom-nav>
@次のメンバー:

IgxBottomNavComponent

panels

panels: QueryList<IgxTabPanelComponent>

タブ バー コンポーネントで IgxTabPanelComponent 要素を取得します。

let tabPanels: QueryList<IgxTabPanelComponent> = this.tabBar.panels;
@次のメンバー:

IgxBottomNavComponent

selectedIndex

selectedIndex: number = -1

各コレクションの選択済みのタブまたはパネルの index を取得します。

let index =  this.tabBar.selectedIndex;
@次のメンバー:

IgxBottomNavComponent

viewTabs

viewTabs: QueryList<IgxTabComponent>

提供されたパネルに基づいて作成されたタブバー コンポーネントの IgxTabComponent 要素を取得します。

let tabs: QueryList<IgxTabComponent> =  this.tabBar.viewTabs;
@次のメンバー:

IgxBottomNavComponent

アクセサー

itemStyle

  • get itemStyle(): string

selectedTab

tabs

  • この下部のナビゲーション コンポーネントの IgxTabComponent 要素を取得します。 最初にコンテンツの子として取得します。使用できない場合は、ビューの子として取得します。

    let tabs: QueryList<IgxTabComponent> =  this.tabBar.tabs;
    @次のメンバー:

    IgxBottomNavComponent

    返却 QueryList<IgxTabComponent>