chore(demo): accordion classname demo (#1549)

* feat(karma config for saucelabs testing) * revert changes * fix(demo): add example of using custom css classes in accordion panel
valor-software · Jan 31, 2017 · 4981114 · 4981114
1 parent c3337f6
commit 4981114
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 3 deletions.
diff --git a/demo/src/app/api-docs/sample-box/sample-box.component.html b/demo/src/app/api-docs/sample-box/sample-box.component.html
@@ -11,6 +11,9 @@
       <tab heading="tests" *ngIf="spec">
         <pre class="prettyprint linenums lang-js">{{spec}}</pre>
       </tab>
+      <tab heading="style" *ngIf="style">
+        <pre class="prettyprint linenums lang-css">{{style}}</pre>
+      </tab>
     </tabset>
   </div>
 </div>
diff --git a/demo/src/app/api-docs/sample-box/sample-box.component.ts b/demo/src/app/api-docs/sample-box/sample-box.component.ts
@@ -8,4 +8,5 @@ export class SampleBoxComponent {
   @Input() public ts: string;
   @Input() public html: string;
   @Input() public spec: string;
+  @Input() public style: string;
 }
diff --git a/demo/src/app/components/accordion/accordion-section.component.ts b/demo/src/app/components/accordion/accordion-section.component.ts
@@ -64,7 +64,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/usage.md');
   </ng-sample-box>
                 
   <h2 routerLink="." fragment="styling" id="styling">Styling</h2>
-  <ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html">
+  <ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html" [style]="demos.styling.css">
     <demo-accordion-styling></demo-accordion-styling>
   </ng-sample-box>
                 

diff --git a/demo/src/app/components/accordion/demos/index.ts b/demo/src/app/components/accordion/demos/index.ts
@@ -33,6 +33,7 @@ export const DEMOS = {
   },
   styling: {
     component: require('!!raw-loader?lang=typescript!./styling/styling'),
-    html: require('!!raw-loader?lang=markup!./styling/styling.html')
+    html: require('!!raw-loader?lang=markup!./styling/styling.html'),
+    css: require('!!raw-loader?lang=markup!./styling/styling.css')
   }
 };
diff --git a/demo/src/app/components/accordion/demos/styling/styling.css b/demo/src/app/components/accordion/demos/styling/styling.css
@@ -0,0 +1,9 @@
+.card.customClass,
+.card.customClass .card-header,
+.panel.customClass {
+  background-color: #5bc0de;
+  color: #fff;
+}
+.panel.customClass .panel-body {
+  background-color: #337aa7;
+}
diff --git a/demo/src/app/components/accordion/demos/styling/styling.ts b/demo/src/app/components/accordion/demos/styling/styling.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'demo-accordion-styling',
-  templateUrl: './styling.html'
+  templateUrl: './styling.html',
+  styleUrls: ['./styling.css']
 })
 
 export class DemoAccordionStylingComponent {