- Notifications
You must be signed in to change notification settings - Fork3
Sidebar/Flyout/Sidenav Component For Angular 6 and Greater
License
NotificationsYou must be signed in to change notification settings
jspanchal/ngx-flyout
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
No Drama Sidebar/Flyout/Sidenav Component For Angular 6 and greater.
npm i ngx-flyout --save
See thereleases page on GitHub.
AddFlyoutModule to your app module:
import{FlyoutModule}from'ngx-flyout';@NgModule({declarations:[AppComponent],imports:[BrowserModule,FlyoutModule],bootstrap:[AppComponent],})classAppModule{}
In your app component, simply use add a<ngx-flyout> wrapper, then place the content you want in your flyout within it.
@Component({selector:'app',template:` <!-- Container for sidebar(s) + page content --> <ngx-flyout [(open)]="openFlyout"> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> </ngx-flyout> <button (click)="toggleSidebar"> Toggle Flyout </button> `})classAppComponent{privateopenFlyout:boolean=false;privatetoggleSidebar(){this.openFlyout=!this.openFlyout;}}
| Property name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Controls the open state of the flyout. This should be two-way bound. |
| position | 'left','right','top','bottom' | 'right' | What side the flyout should open. |
| showCloseButton | showCloseButton: boolean | true | Controls visibility of close button. |
| flyoutClasses | flyoutClasses: string[] | Additional styling classes for flyout. | |
| showBackdrop | showBackdrop: boolean | true | Controls visiblity of backdrop. |
| hideOnBackdropClick | hideOnBackdropClick: boolean | true | If clicking on backdrop closes the flyout or not. |
| backdropClasses | backdropClasses: string[] | Additional styling classes for backdrop |
| Property name | Callback arguments | Description |
|---|---|---|
| flyoutOpened | Emitted when flyout is opened. | |
| flyoutClosed | Emitted when flyout is closed. | |
| openChange | open: boolean | Emitted whenopen is modified. This allows to do "two-way binding" |
About
Sidebar/Flyout/Sidenav Component For Angular 6 and Greater
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.