adjustment examples in spa with drawer positions

criar-art · Oct 17, 2024 · 17bd96a · 17bd96a
1 parent a720b5e
commit 17bd96a
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 0 deletions.
diff --git a/src/app/examples/mode/mode.component.html b/src/app/examples/mode/mode.component.html
@@ -162,3 +162,84 @@ <h2 class="fullscreen-subtitle">Additional Tips for Fullscreen Mode</h2>
     </up-window-angular>
   </div>
 </div>
+
+<div class="content">
+  <h2 class="content-title">Drawer</h2>
+  <div class="examples">
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-left')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5c4; </span> Left
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-right')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5c8; </span> Right
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-top')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5d8; </span> Top
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-bottom')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5db; </span> Bottom
+    </button>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerTop"
+      title="Top Drawer"
+      subtitle="This is a top drawer."
+      [drawer]="drawerPosition"
+      animation="slide-down"
+    >
+      Content for top drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerBottom"
+      title="Bottom Drawer"
+      subtitle="This is a bottom drawer."
+      [drawer]="drawerPosition"
+      animation="slide-up"
+    >
+      Content for bottom drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerLeft"
+      title="Left Drawer"
+      subtitle="This is a left drawer."
+      [drawer]="drawerPosition"
+      animation="slide-left"
+    >
+      Content for left drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerRight"
+      title="Right Drawer"
+      subtitle="This is a right drawer."
+      [drawer]="drawerPosition"
+      animation="slide-right"
+    >
+      Content for right drawer!
+    </up-window-angular>
+  </div>
+</div>
diff --git a/src/app/examples/mode/mode.component.ts b/src/app/examples/mode/mode.component.ts
@@ -14,13 +14,23 @@ export class ModeComponent {
   isWindowOpenBlur: WritableSignal<boolean> = signal(false);
   isWindowOpenGrayscale: WritableSignal<boolean> = signal(false);
   isWindowOpenBlurGrayscale: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerBottom: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerTop: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerLeft: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerRight: WritableSignal<boolean> = signal(false);
+  drawerPosition: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+
 
   openWindowExample(type: string) {
     this.isWindowOpenRestrict.set(false);
     this.isWindowOpenFullScreen.set(false);
     this.isWindowOpenBlur.set(false);
     this.isWindowOpenGrayscale.set(false);
     this.isWindowOpenBlurGrayscale.set(false);
+    this.isWindowOpenDrawerBottom.set(false);
+    this.isWindowOpenDrawerTop.set(false);
+    this.isWindowOpenDrawerLeft.set(false);
+    this.isWindowOpenDrawerRight.set(false);
 
     switch (type) {
       case 'restrict':
@@ -38,6 +48,22 @@ export class ModeComponent {
       case 'blurGrayscale':
         this.isWindowOpenBlurGrayscale.set(true);
         break;
+      case 'drawer-left':
+        this.drawerPosition = 'left';
+        this.isWindowOpenDrawerLeft.set(true);
+        break;
+      case 'drawer-right':
+        this.drawerPosition = 'right';
+        this.isWindowOpenDrawerRight.set(true);
+        break;
+      case 'drawer-top':
+        this.drawerPosition = 'top';
+        this.isWindowOpenDrawerTop.set(true);
+        break;
+      case 'drawer-bottom':
+        this.drawerPosition = 'bottom';
+        this.isWindowOpenDrawerBottom.set(true);
+        break;
     }
   }
 }