demo(accordion): add the [cardClass] usage example (#3589)

ng-bootstrap · Feb 14, 2020 · ddc4ceb · ddc4ceb
1 parent 3c65b21
commit ddc4ceb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/demo/src/app/components/accordion/demos/header/accordion-header.html b/demo/src/app/components/accordion/demos/header/accordion-header.html
@@ -37,7 +37,7 @@ <h5 class="m-0">Second panel</h5>
       labore sustainable VHS.
     </ng-template>
   </ngb-panel>
-  <ngb-panel [disabled]="disabled">
+  <ngb-panel [disabled]="disabled" [cardClass]="disabled ? 'disabled' : ''">
     <ng-template ngbPanelHeader>
       <div class="d-flex align-items-center justify-content-between">
         <button ngbPanelToggle class="btn btn-link container-fluid text-left pl-0">Third panel</button>

diff --git a/demo/src/app/components/accordion/demos/header/accordion-header.ts b/demo/src/app/components/accordion/demos/header/accordion-header.ts
@@ -1,8 +1,14 @@
-import { Component } from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'ngbd-accordion-header',
-  templateUrl: './accordion-header.html'
+  templateUrl: './accordion-header.html',
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    .card.disabled {
+      opacity: 0.5;
+    }
+  `]
 })
 export class NgbdAccordionHeader {
   disabled = false;