purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 03:25: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
mat-flat-button
[color]="'primary'"
(click)="toggleDrawerMode('leftDrawer');">
(click)="toggleDrawerMode();">
Toggle drawer mode
</button>
@ -249,7 +249,7 @@
class="ml-4"
mat-flat-button
[color]="'primary'"
(click)="toggleDrawerOpen('leftDrawer');">
(click)="toggleDrawerOpen();">
Toggle drawer open
</button>
@ -257,12 +257,12 @@
<fuse-drawer
[name]="'leftDrawer'"
[opened]="true"
[mode]="'side'"
#drawer>
[opened]="drawerOpened"
[mode]="drawerMode"
(openedChanged)="drawerOpenedChanged($event)">
<div class="p-4">
Left drawer
<div>Current mode: {{drawer.mode}}</div>
<div>Current mode: {{drawerMode}}</div>
</div>
</fuse-drawer>
@ -285,7 +285,7 @@
<button
mat-flat-button
[color]="'primary'"
(click)="toggleDrawerMode('leftDrawer');">
(click)="toggleDrawerMode();">
Toggle drawer mode
</button>
@ -293,15 +293,15 @@
class="ml-4"
mat-flat-button
[color]="'primary'"
(click)="toggleDrawerOpen('leftDrawer');">
(click)="toggleDrawerOpen();">
Toggle drawer open
</button>
<div class="relative flex overflow-hidden border mt-8 min-h-80">
<fuse-drawer
[name]="'leftDrawer'"
[opened]="true"
[mode]="'side'">
[opened]="drawerOpened"
[mode]="drawerMode">
<div class="p-4">
Left drawer
</div>
@ -310,6 +310,20 @@
<div class="flex-auto bg-gray-100 p-4">
Some content
</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>
</textarea>
<!-- @formatter:on -->
@ -322,26 +336,34 @@
<textarea fuse-highlight
[lang]="'typescript'">
// Set the defaults
this.drawerMode = 'side';
this.drawerOpened = true;
/**
* Toggle the drawer mode
*
* @param drawerName
*/
toggleDrawerMode(drawerName): void
toggleDrawerMode(): void
{
const drawer = this._fuseDrawerService.getComponent(drawerName);
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
this.drawerMode = this.drawerMode === 'side' ? 'over' : 'side';
}
/**
* Toggle the drawer open
*
* @param drawerName
*/
toggleDrawerOpen(drawerName): void
toggleDrawerOpen(): void
{
const drawer = this._fuseDrawerService.getComponent(drawerName);
drawer.toggle();
this.drawerOpened = !this.drawerOpened;
}
/**
* Drawer opened changed
*
* @param opened
*/
drawerOpenedChanged(opened: boolean): void
{
this.drawerOpened = opened;
}
</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 { FuseDrawerMode, FuseDrawerService } from '@fuse/components/drawer';
import { FuseDrawerMode } from '@fuse/components/drawer';
import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
@Component({
@ -9,17 +9,18 @@ import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fu
export class DrawerComponent
{
drawerMode: FuseDrawerMode;
drawerOpened: boolean;
/**
* Constructor
*/
constructor(
private _fuseDrawerService: FuseDrawerService,
private _fuseComponentsComponent: FuseComponentsComponent
)
{
// Set the defaults
this.drawerMode = 'side';
this.drawerOpened = true;
}
// -----------------------------------------------------------------------------------------------------
@ -28,32 +29,28 @@ export class DrawerComponent
/**
* Toggle the drawer mode
*
* @param name
*/
toggleDrawerMode(name: string): void
toggleDrawerMode(): void
{
const drawer = this._fuseDrawerService.getComponent(name);
if ( drawer )
{
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
}
this.drawerMode = this.drawerMode === 'side' ? 'over' : 'side';
}
/**
* 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.toggle();
}
/**
* Drawer opened changed
*
* @param opened
*/
drawerOpenedChanged(opened: boolean): void
{
this.drawerOpened = opened;
}
/**