Navigation drawers provide access to destinations in your app. Drawer is a slide-out panel from the edge of the screen. The Drawer is mainly used to organize navigation between top-level sections of our application.

If you have more than 4 top-level sections, then Drawer is the perfect solution to navigate inside your app. You can also combine it with Menu component and get fast ready to use.


Basic usage

The component consists from 3 parts:

  1. FGX.DrawerLayout.TfgDrawerLayout - special container, which controlls pulling drawer.
  2. FGX.DrawerLayout.TfgDrawer - sliding container.
  3. FGX.DrawerLayout.TfgMainContent - The main content of the screen, on top of which the drawer slides.

When you put TfgDrawerLayout it automatically creates nested TfgDrawer and TfgMainContent.


Automatically Open/Close with button

TfgDrawerLayout supports automatic opening and closing by other control. You can bind TfgDrawerLayout to other control via ToggleControl.

For example if you specify TfgNavigationBar as ToggleControl, when user tap at the Navigation icon on the TfgNavigationBar it will automatically toggles drawer.


Open/Close

You can use methods Open and Close for manual opening and closing drawer panel in time, when you needed..


Disabling

If you don't want to allow user to pull drawer, you can disable it via Enabled.


Tracking a drawer sliding

TfgDrawerLayout provides a lot of different kinds events, which allow you to control all stages of drawer sliding:

  1. Controlling of end stages: OnBeginOpen, OnOpened, OnBeginClose, OnClosed, OnStateChanged
  2. The tracking process of the panel shift: OnSlideChanged