クラス IgxNavigationDrawerComponent

Ignite UI for Angular Navigation Drawer - ヘルプ

Ignite UI Navigation Drawer は Navbar と使用可能な縮小可能なサイド ナビゲーション コンテナです。 例:

<igx-nav-drawer id="navigation" [isOpen]="true">
  <ng-template igxDrawer>
    <nav>
      <span igxDrawerItem [isHeader]="true">Email</span>
      <span igxDrawerItem igxRipple>Inbox</span>
      <span igxDrawerItem igxRipple>Deleted</span>
      <span igxDrawerItem igxRipple>Sent</span>
    </nav>
  </ng-template>
</igx-nav-drawer>

階層

  • IgxNavigationDrawerComponent

実装

  • IToggleView
  • OnInit
  • AfterContentInit
  • OnDestroy
  • OnChanges

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

closed

closed: EventEmitter<any> = new EventEmitter()

Navigation Drawer が閉じたときに発生するイベント。

<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>

closing

closing: EventEmitter<any> = new EventEmitter()

Navigation Drawer が閉じるときに発生するイベント。

<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>

enableGestures

enableGestures: boolean = true

ドロワーを利用するために、端からスワイプ/パンニングして開く、スワイプ切り替え、およびパンニング ドラッグなどのタッチ ジェスチャの使用を有効にします。

// 取得
let gesturesEnabled = this.navdrawer.enableGestures;
<!--set-->
<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>

id

id: string = `igx-nav-drawer-${NEXT_ID++}`

コンポーネントの ID

// 取得
let myNavDrawerId = this.navdrawer.id;
<!--set-->
 <igx-nav-drawer id='navdrawer'></igx-nav-drawer>

miniWidth

miniWidth: string = "68px"

mini 状態でドロアーの幅。デフォルト値は 60px です。

// 取得
let navDrawerMiniWidth = this.navdrawer.miniWidth;
<!--set-->
<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>

opened

opened: EventEmitter<any> = new EventEmitter()

Navigation Drawer が開いたときに発生するイベント。

<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>

opening

opening: EventEmitter<any> = new EventEmitter()

Navigation Drawer が開くときに発生するイベント。

 <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>

pin

pin: boolean = false

ピン固定される場合、ドロワーをコンテンツ上に配置する代わりに相対的な位置が設定されます。 追加のレイアウト スタイルが必要になる場合があります。

// 取得
let navDrawerIsPinned = this.navdrawer.pin;
<!--set-->
<igx-nav-drawer [pin]='false'></igx-nav-drawer>

pinChange

pinChange: EventEmitter<boolean> = new EventEmitter<boolean>(true)

TwoWay バインディングのためのピン固定状態変更の出力。

<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>

pinThreshold

pinThreshold: number = 1024

自動ピン固定を切り替えるためのデバイスの最小幅。 デフォルト値は 1024 です。この動作を無効にするには falsy 値に設定します。

// 取得
let navDrawerPinTreshold = this.navdrawer.pinThreshold;
<!--set-->
<igx-nav-drawer [pinTreshold]='1024'></igx-nav-drawer>

position

position: string = "left"

Navigation Drawer の位置。"left" (デフォルト値) または "right" です。

// 取得
let myNavDrawerPosition = this.navdrawer.position;
<!--set-->
<igx-nav-drawer [position]="'left'"></igx-nav-drawer>

width

width: string = "280px"

開いたドロアーの幅。デフォルト値は "280px" です。

// 取得
let navDrawerWidth = this.navdrawer.width;
<!--set-->
<igx-nav-drawer [width]="'228px'"></igx-nav-drawer>

アクセサー

isOpen

  • get isOpen(): boolean
  • set isOpen(value: boolean): void

メソッド

close

  • close(): void

open

  • open(): void

toggle

  • toggle(): void