diff --git a/demo/src/app/components/accordion/accordion-section.component.ts b/demo/src/app/components/accordion/accordion-section.component.ts
index a37a1df82a..c67c069a7b 100644
--- a/demo/src/app/components/accordion/accordion-section.component.ts
+++ b/demo/src/app/components/accordion/accordion-section.component.ts
@@ -16,36 +16,66 @@ let titleDoc = require('html!markdown!./docs/usage.md');
Contents
- Usage
+ Usage
- Examples
+ Examples
-
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
-
-
+ Simple accordion
+
+
-
- API Reference
-
-
+
+ Disabled
+
+
+
+
+ Dynamic accordion
+
+
+
+
+ Open only one at a time
+
+
+
+
+ Styling
+
+
+
+
+ Configuring defaults
+
+
+
+
+ API Reference
+
+
`
})
export class AccordionSectionComponent {
diff --git a/demo/src/app/components/accordion/demos/accordion-demo.component.ts b/demo/src/app/components/accordion/demos/accordion-demo.component.ts
deleted file mode 100644
index 53ab8caacf..0000000000
--- a/demo/src/app/components/accordion/demos/accordion-demo.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'accordion-demo',
- templateUrl: './accordion-demo.component.html'
-})
-export class AccordionDemoComponent {
- public oneAtATime:boolean = true;
- public items:string[] = ['Item 1', 'Item 2', 'Item 3'];
-
- public status:Object = {
- isFirstOpen: true,
- isFirstDisabled: false
- };
-
- public groups:any[] = [
- {
- title: 'Dynamic Group Header - 1',
- content: 'Dynamic Group Body - 1'
- },
- {
- title: 'Dynamic Group Header - 2',
- content: 'Dynamic Group Body - 2'
- }
- ];
-
- public addItem():void {
- this.items.push(`Items ${this.items.length + 1}`);
- }
-}
diff --git a/demo/src/app/components/accordion/demos/basic/basic.html b/demo/src/app/components/accordion/demos/basic/basic.html
new file mode 100644
index 0000000000..5f01667bb7
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/basic/basic.html
@@ -0,0 +1,19 @@
+
+
+ This content is straight in the template.
+
+
+
+ I can have markup, too!
+
+
+ This is just some content to illustrate fancy headings.
+
+
+ Content 1
+
+
+ Content 2
+
+
diff --git a/demo/src/app/components/accordion/demos/basic/basic.ts b/demo/src/app/components/accordion/demos/basic/basic.ts
new file mode 100644
index 0000000000..b3d4d45812
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/basic/basic.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-accordion-basic',
+ templateUrl: './basic.html'
+})
+export class DemoAccordionBasicComponent {
+
+}
diff --git a/demo/src/app/components/accordion/demos/config/config.html b/demo/src/app/components/accordion/demos/config/config.html
new file mode 100644
index 0000000000..4aee983ad4
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/config/config.html
@@ -0,0 +1,11 @@
+
+
+ This content is straight in the template.
+
+
+ Content 1
+
+
+ Content 2
+
+
diff --git a/demo/src/app/components/accordion/demos/config/config.ts b/demo/src/app/components/accordion/demos/config/config.ts
new file mode 100644
index 0000000000..7ebae764be
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/config/config.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { AccordionConfig } from 'ng2-bootstrap';
+
+// such override allows to keep some initial values
+
+export function getAccordionConfig(): AccordionConfig {
+ return Object.assign(new AccordionConfig(), {closeOthers: true});
+}
+
+@Component({
+ selector: 'demo-accordion-config',
+ templateUrl: './config.html',
+ providers: [{provide: AccordionConfig, useFactory: getAccordionConfig}]
+})
+export class DemoAccordionConfigComponent {
+}
diff --git a/demo/src/app/components/accordion/demos/disabled/disabled.html b/demo/src/app/components/accordion/demos/disabled/disabled.html
new file mode 100644
index 0000000000..8d8101c67c
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/disabled/disabled.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ This content is straight in the template.
+
+
+ accordion 1
+
+
+ accordion 2
+
+
diff --git a/demo/src/app/components/accordion/demos/disabled/disabled.ts b/demo/src/app/components/accordion/demos/disabled/disabled.ts
new file mode 100644
index 0000000000..17dc0cac56
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/disabled/disabled.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-accordion-disabled',
+ templateUrl: './disabled.html'
+})
+export class DemoAccordionDisabledComponent {
+ public status: Object = {
+ isFirstOpen: true,
+ isFirstDisabled: false
+ };
+}
diff --git a/demo/src/app/components/accordion/demos/accordion-demo.component.html b/demo/src/app/components/accordion/demos/dymanic/dynamic.html
similarity index 57%
rename from demo/src/app/components/accordion/demos/accordion-demo.component.html
rename to demo/src/app/components/accordion/demos/dymanic/dynamic.html
index 37aa3a2933..a351cd8f6f 100644
--- a/demo/src/app/components/accordion/demos/accordion-demo.component.html
+++ b/demo/src/app/components/accordion/demos/dymanic/dynamic.html
@@ -2,23 +2,11 @@
-
-
-
-
-
-
+
+ [isOpen]="status.isFirstOpen">
This content is straight in the template.
@@ -33,9 +21,9 @@
- I can have markup, too!
-
+ I can have markup, too!
+
This is just some content to illustrate fancy headings.
diff --git a/demo/src/app/components/accordion/demos/dymanic/dynamic.ts b/demo/src/app/components/accordion/demos/dymanic/dynamic.ts
new file mode 100644
index 0000000000..dd9a33da15
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/dymanic/dynamic.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-accordion-dynamic',
+ templateUrl: './dynamic.html'
+})
+export class DemoAccordionDynamicComponent {
+ public items: string[] = ['Item 1', 'Item 2', 'Item 3'];
+
+ public status: Object = {
+ isFirstOpen: true
+ };
+
+ public groups: any[] = [
+ {
+ title: 'Dynamic Group Header - 1',
+ content: 'Dynamic Group Body - 1'
+ },
+ {
+ title: 'Dynamic Group Header - 2',
+ content: 'Dynamic Group Body - 2'
+ }
+ ];
+
+ public addItem(): void {
+ this.items.push(`Items ${this.items.length + 1}`);
+ }
+}
diff --git a/demo/src/app/components/accordion/demos/index.ts b/demo/src/app/components/accordion/demos/index.ts
index cdd3d2d54f..932c004943 100644
--- a/demo/src/app/components/accordion/demos/index.ts
+++ b/demo/src/app/components/accordion/demos/index.ts
@@ -1,12 +1,38 @@
-import { AccordionDemoComponent } from './accordion-demo.component';
+import { DemoAccordionBasicComponent } from './basic/basic';
+import { DemoAccordionDisabledComponent } from './disabled/disabled';
+import { DemoAccordionStylingComponent } from './styling/styling';
+import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
+import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
+import { DemoAccordionConfigComponent } from './config/config';
export const DEMO_COMPONENTS = [
- AccordionDemoComponent
+ DemoAccordionBasicComponent, DemoAccordionDisabledComponent, DemoAccordionStylingComponent,
+ DemoAccordionOneAtATimeComponent, DemoAccordionDynamicComponent, DemoAccordionConfigComponent
];
export const DEMOS = {
- old: {
- component: require('!!raw?lang=typescript!./accordion-demo.component'),
- html: require('!!raw?lang=markup!./accordion-demo.component.html')
+ basic: {
+ component: require('!!raw?lang=typescript!./basic/basic'),
+ html: require('!!raw?lang=markup!./basic/basic.html')
+ },
+ disabled: {
+ component: require('!!raw?lang=typescript!./disabled/disabled'),
+ html: require('!!raw?lang=markup!./disabled/disabled.html')
+ },
+ dynamic: {
+ component: require('!!raw?lang=typescript!./dymanic/dynamic'),
+ html: require('!!raw?lang=markup!./dymanic/dynamic.html')
+ },
+ oneAtATime: {
+ component: require('!!raw?lang=typescript!./one-at-a-time/one-at-a-time'),
+ html: require('!!raw?lang=markup!./one-at-a-time/one-at-a-time.html')
+ },
+ config: {
+ component: require('!!raw?lang=typescript!./config/config'),
+ html: require('!!raw?lang=markup!./config/config.html')
+ },
+ styling: {
+ component: require('!!raw?lang=typescript!./styling/styling'),
+ html: require('!!raw?lang=markup!./styling/styling.html')
}
};
diff --git a/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.html b/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.html
new file mode 100644
index 0000000000..efce4110ad
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ This content is straight in the template.
+
+
+ Content 1
+
+
+ Content 2
+
+
diff --git a/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.ts b/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.ts
new file mode 100644
index 0000000000..67c1354cf1
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-accordion-one-time',
+ templateUrl: './one-at-a-time.html'
+})
+export class DemoAccordionOneAtATimeComponent {
+ public oneAtATime: boolean = true;
+
+}
diff --git a/demo/src/app/components/accordion/demos/styling/styling.html b/demo/src/app/components/accordion/demos/styling/styling.html
new file mode 100644
index 0000000000..1a78a356e3
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/styling/styling.html
@@ -0,0 +1,13 @@
+
+
+ This content is straight in the template.
+
+
+ accordion 1
+
+
+ accordion 2
+
+
diff --git a/demo/src/app/components/accordion/demos/styling/styling.ts b/demo/src/app/components/accordion/demos/styling/styling.ts
new file mode 100644
index 0000000000..accf101fea
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/styling/styling.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-accordion-styling',
+ templateUrl: './styling.html'
+})
+
+export class DemoAccordionStylingComponent {
+ public customClass: string = 'customClass';
+ public isFirstOpen: boolean = true;
+}
diff --git a/demo/src/assets/css/style.css b/demo/src/assets/css/style.css
index 83a8801920..bc501d9ce4 100644
--- a/demo/src/assets/css/style.css
+++ b/demo/src/assets/css/style.css
@@ -626,6 +626,16 @@ pre {
background-color: #50ff50;
}
+.card.customClass,
+.card.customClass .card-header,
+.panel.customClass {
+ background-color: #5bc0de;
+ color: #fff;
+}
+.panel.customClass .panel-body {
+ background-color: #337aa7;
+}
+
.app-footer {
padding: 3rem 2rem;
margin-top: 3rem;