feat(card): option to hide toggle button in reveal/flip cards (#448)

akveo · May 28, 2018 · ef5ebbb · ef5ebbb
1 parent cad2246
commit ef5ebbb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/framework/theme/components/card/flip-card/flip-card.component.ts b/src/framework/theme/components/card/flip-card/flip-card.component.ts
@@ -25,13 +25,13 @@ import { Component, Input, HostBinding } from '@angular/core';
     <div class="flipcard-body">
       <div class="front-container">
         <ng-content select="nb-card-front"></ng-content>
-        <a class="flip-button" (click)="toggleFlip()">
+        <a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
           <i class="nb-arrow-dropleft" aria-hidden="true"></i>
         </a>
       </div>
       <div class="back-container">
         <ng-content select="nb-card-back"></ng-content>
-        <a class="flip-button" (click)="toggleFlip()">
+        <a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
           <i class="nb-arrow-dropleft" aria-hidden="true"></i>
         </a>
       </div>
@@ -47,7 +47,13 @@ export class NbFlipCardComponent {
   @HostBinding('class.flipped')
   flipped: boolean = false;
 
-  toggleFlip() {
+  /**
+   * Show/hide toggle button to be able to control toggle from your code
+   * @type {boolean}
+   */
+  @Input() showToggleButton = true;
+
+  toggle() {
     this.flipped = !this.flipped;
   }
 }
diff --git a/src/framework/theme/components/card/reveal-card/reveal-card.component.ts b/src/framework/theme/components/card/reveal-card/reveal-card.component.ts
@@ -26,7 +26,7 @@ import { Component, Input, HostBinding } from '@angular/core';
     <div class="second-card-container">
       <ng-content select="nb-card-back"></ng-content>
     </div>
-    <a class="reveal-button" (click)="toggleReveal()">
+    <a *ngIf="showToggleButton" class="reveal-button" (click)="toggle()">
       <i class="nb-arrow-dropdown" aria-hidden="true"></i>
     </a>
   `,
@@ -40,7 +40,13 @@ export class NbRevealCardComponent {
   @HostBinding('class.revealed')
   revealed: boolean = false;
 
-  toggleReveal() {
+  /**
+   * Show/hide toggle button to be able to control toggle from your code
+   * @type {boolean}
+   */
+  @Input() showToggleButton = true;
+
+  toggle() {
     this.revealed = !this.revealed;
   }
 }