feat(collapse): add demo with inline display (#4630)

fixes #2473
valor-software · Oct 12, 2018 · 0ec4c70 · 0ec4c70
1 parent 436a2e8
commit 0ec4c70
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/demo/src/app/components/+collapse/collapse-section.list.ts b/demo/src/app/components/+collapse/collapse-section.list.ts
@@ -7,6 +7,7 @@ import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
 import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
+import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';
 
 import { NgApiDocComponent } from '../../docs/api-docs';
 
@@ -47,6 +48,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/toggle-manual/toggle-manual.html'),
         outlet: ToggleManualDemoComponent
       },
+      {
+        title: 'Inline display',
+        anchor: 'inline-display',
+        component: require('!!raw-loader?lang=typescript!./demos/inline-display/inline-display'),
+        html: require('!!raw-loader?lang=markup!./demos/inline-display/inline-display.html'),
+        outlet: InlineDisplayDemoComponent
+      },
       {
         title: 'Accessibility',
         anchor: 'accessibility',

diff --git a/demo/src/app/components/+collapse/demos/index.ts b/demo/src/app/components/+collapse/demos/index.ts
@@ -2,10 +2,12 @@ import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
 import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
+import { InlineDisplayDemoComponent } from './inline-display/inline-display';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
   CollapseDemoEventsComponent,
   ToggleManualDemoComponent,
-  DemoAccessibilityComponent
+  DemoAccessibilityComponent,
+  InlineDisplayDemoComponent
 ];
diff --git a/demo/src/app/components/+collapse/demos/inline-display/inline-display.html b/demo/src/app/components/+collapse/demos/inline-display/inline-display.html
@@ -0,0 +1,10 @@
+<button type="button" class="btn btn-success" (click)="collapse.display='inline-block'"
+        aria-controls="collapseBasic">Inline-block
+</button>
+<button type="button" class="btn btn-primary" (click)="collapse.display='none'"
+        aria-controls="collapseBasic">None
+</button>
+<hr>
+<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse" class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>
diff --git a/demo/src/app/components/+collapse/demos/inline-display/inline-display.ts b/demo/src/app/components/+collapse/demos/inline-display/inline-display.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'inline-display-demo',
+  templateUrl: './inline-display.html'
+})
+export class InlineDisplayDemoComponent {
+  isCollapsed = false;
+}