purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 19:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Documentation) Updated the FuseDrawer documentation and example

Browse Source
This commit is contained in:
Sercan Yemen 2022-03-29 16:38:49 +03:00
parent e6ad547d27
commit cdc54ab05e
2 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html
View File

@ -241,7 +241,7 @@
<button <button
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="toggleDrawerMode('leftDrawer');"> (click)="toggleDrawerMode();">
Toggle drawer mode Toggle drawer mode
</button> </button>
@ -249,7 +249,7 @@
class="ml-4" class="ml-4"
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="toggleDrawerOpen('leftDrawer');"> (click)="toggleDrawerOpen();">
Toggle drawer open Toggle drawer open
</button> </button>
@ -257,12 +257,12 @@
<fuse-drawer <fuse-drawer
[name]="'leftDrawer'" [name]="'leftDrawer'"
[opened]="true" [opened]="drawerOpened"
[mode]="'side'" [mode]="drawerMode"
#drawer> (openedChanged)="drawerOpenedChanged($event)">
<div class="p-4"> <div class="p-4">
Left drawer Left drawer
<div>Current mode: {{drawer.mode}}</div> <div>Current mode: {{drawerMode}}</div>
</div> </div>
</fuse-drawer> </fuse-drawer>
@ -285,7 +285,7 @@
<button <button
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="toggleDrawerMode('leftDrawer');"> (click)="toggleDrawerMode();">
Toggle drawer mode Toggle drawer mode
</button> </button>
@ -293,15 +293,15 @@
class="ml-4" class="ml-4"
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="toggleDrawerOpen('leftDrawer');"> (click)="toggleDrawerOpen();">
Toggle drawer open Toggle drawer open
</button> </button>
<div class="relative flex overflow-hidden border mt-8 min-h-80"> <div class="relative flex overflow-hidden border mt-8 min-h-80">
<fuse-drawer <fuse-drawer
[name]="'leftDrawer'" [name]="'leftDrawer'"
[opened]="true" [opened]="drawerOpened"
[mode]="'side'"> [mode]="drawerMode">
<div class="p-4"> <div class="p-4">
Left drawer Left drawer
</div> </div>
@ -310,6 +310,20 @@
<div class="flex-auto bg-gray-100 p-4"> <div class="flex-auto bg-gray-100 p-4">
Some content Some content
</div> </div>
<!-- Right drawer must be positioned after the content
<fuse-drawer
[name]="'leftDrawer'"
[opened]="true"
[position]="'right'"
[mode]="'side'">
<div class="p-4">
Right drawer
</div>
</fuse-drawer>
-->
</div> </div>
</textarea> </textarea>
<!-- @formatter:on --> <!-- @formatter:on -->
@ -322,26 +336,34 @@
<textarea fuse-highlight <textarea fuse-highlight
[lang]="'typescript'"> [lang]="'typescript'">
// Set the defaults
this.drawerMode = 'side';
this.drawerOpened = true;
/** /**
* Toggle the drawer mode * Toggle the drawer mode
*
* @param drawerName
*/ */
toggleDrawerMode(drawerName): void toggleDrawerMode(): void
{ {
const drawer = this._fuseDrawerService.getComponent(drawerName); this.drawerMode = this.drawerMode === 'side' ? 'over' : 'side';
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
} }
/** /**
* Toggle the drawer open * Toggle the drawer open
*
* @param drawerName
*/ */
toggleDrawerOpen(drawerName): void toggleDrawerOpen(): void
{ {
const drawer = this._fuseDrawerService.getComponent(drawerName); this.drawerOpened = !this.drawerOpened;
drawer.toggle(); }
/**
* Drawer opened changed
*
* @param opened
*/
drawerOpenedChanged(opened: boolean): void
{
this.drawerOpened = opened;
} }
</textarea> </textarea>

35
src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FuseDrawerMode, FuseDrawerService } from '@fuse/components/drawer'; import { FuseDrawerMode } from '@fuse/components/drawer';
import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component'; import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
@Component({ @Component({
@ -9,17 +9,18 @@ import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fu
export class DrawerComponent export class DrawerComponent
{ {
drawerMode: FuseDrawerMode; drawerMode: FuseDrawerMode;
drawerOpened: boolean;
/** /**
* Constructor * Constructor
*/ */
constructor( constructor(
private _fuseDrawerService: FuseDrawerService,
private _fuseComponentsComponent: FuseComponentsComponent private _fuseComponentsComponent: FuseComponentsComponent
) )
{ {
// Set the defaults // Set the defaults
this.drawerMode = 'side'; this.drawerMode = 'side';
this.drawerOpened = true;
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -28,32 +29,28 @@ export class DrawerComponent
/** /**
* Toggle the drawer mode * Toggle the drawer mode
*
* @param name
*/ */
toggleDrawerMode(name: string): void toggleDrawerMode(): void
{ {
const drawer = this._fuseDrawerService.getComponent(name); this.drawerMode = this.drawerMode === 'side' ? 'over' : 'side';
if ( drawer )
{
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
}
} }
/** /**
* Toggle the drawer open * Toggle the drawer open
*
* @param name
*/ */
toggleDrawerOpen(name: string): void toggleDrawerOpen(): void
{ {
const drawer = this._fuseDrawerService.getComponent(name); this.drawerOpened = !this.drawerOpened;
}
if ( drawer ) /**
{ * Drawer opened changed
drawer.toggle(); *
} * @param opened
*/
drawerOpenedChanged(opened: boolean): void
{
this.drawerOpened = opened;
} }
/** /**