Navigation Drawer が閉じたときに発生するイベント。
<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>
Navigation Drawer が閉じるときに発生するイベント。
<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>
ドロワーを切り替えるときにアニメーションを有効または無効にします。デフォルトで false に設定されます。
<igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
ドロワーを利用するために、端からスワイプ/パンニングして開く、スワイプ切り替え、およびパンニング ドラッグなどのタッチ ジェスチャの使用を有効にします。
// 取得
let gesturesEnabled = this.navdrawer.enableGestures;
<!--set-->
<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>
コンポーネントの ID
// 取得
let myNavDrawerId = this.navdrawer.id;
<!--set-->
<igx-nav-drawer id='navdrawer'></igx-nav-drawer>
mini 状態でドロアーの幅。デフォルト値は 60px です。
// 取得
let navDrawerMiniWidth = this.navdrawer.miniWidth;
<!--set-->
<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
Navigation Drawer が開いたときに発生するイベント。
<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>
Navigation Drawer が開くときに発生するイベント。
<igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>
ピン固定される場合、ドロワーをコンテンツ上に配置する代わりに相対的な位置が設定されます。 追加のレイアウト スタイルが必要になる場合があります。
// 取得
let navDrawerIsPinned = this.navdrawer.pin;
<!--set-->
<igx-nav-drawer [pin]='false'></igx-nav-drawer>
TwoWay バインディングのためのピン固定状態変更の出力。
<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>
自動ピン固定を切り替えるためのデバイスの最小幅。 デフォルト値は 1024 です。この動作を無効にするには false 値に設定します。
// 取得
let navDrawerPinTreshold = this.navdrawer.pinThreshold;
<!--set-->
<igx-nav-drawer [pinTreshold]='1024'></igx-nav-drawer>
Navigation Drawer の位置。"left" (デフォルト値) または "right" です。
// 取得
let myNavDrawerPosition = this.navdrawer.position;
<!--set-->
<igx-nav-drawer [position]="'left'"></igx-nav-drawer>
開いたドロアーの幅。デフォルト値は "280px" です。
// 取得
let navDrawerWidth = this.navdrawer.width;
<!--set-->
<igx-nav-drawer [width]="'228px'"></igx-nav-drawer>
ドロワーの状態。
// 取得
let navDrawerIsOpen = this.navdrawer.isOpen;
<!--set-->
<igx-nav-drawer [isOpen]='false'></igx-nav-drawer>
双方向データ バインディング。
<!--set-->
<igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer>
ドロワーの状態。
// 取得
let navDrawerIsOpen = this.navdrawer.isOpen;
<!--set-->
<igx-nav-drawer [isOpen]='false'></igx-nav-drawer>
双方向データ バインディング。
<!--set-->
<igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer>
Navigation Drawer を閉じます。すでに閉じている場合は効果がありません。
this.navdrawer.close();
Navigation Drawer を開きます。すでに開いている場合は効果がありません。
this.navdrawer.open();
Navigation Drawer の開く状態を切り替えます。
this.navdrawer.toggle();
Ignite UI for Angular Navigation Drawer - ヘルプ
Ignite UI Navigation Drawer は Navbar と使用可能な縮小可能なサイド ナビゲーション コンテナーです。 例: