-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(accordion): create documentation for accordion (#1474)
- Loading branch information
1 parent
1309cea
commit 8f1ed89
Showing
16 changed files
with
257 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 0 additions & 30 deletions
30
demo/src/app/components/accordion/demos/accordion-demo.component.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <accordion> | ||
| <accordion-group heading="Static Header, initially expanded"> | ||
| This content is straight in the template. | ||
| </accordion-group> | ||
| <accordion-group #group> | ||
| <div accordion-heading> | ||
| I can have markup, too! | ||
| <i class="pull-right float-xs-right glyphicon" | ||
| [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i> | ||
| </div> | ||
| This is just some content to illustrate fancy headings. | ||
| </accordion-group> | ||
| <accordion-group heading="Content 1"> | ||
| <p>Content 1</p> | ||
| </accordion-group> | ||
| <accordion-group heading="Content 2"> | ||
| <p>Content 2</p> | ||
| </accordion-group> | ||
| </accordion> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'demo-accordion-basic', | ||
| templateUrl: './basic.html' | ||
| }) | ||
| export class DemoAccordionBasicComponent { | ||
|
|
||
| } |
11 changes: 11 additions & 0 deletions
11
demo/src/app/components/accordion/demos/config/config.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <accordion> | ||
| <accordion-group heading="Header"> | ||
| This content is straight in the template. | ||
| </accordion-group> | ||
| <accordion-group heading="Content 1"> | ||
| <p>Content 1</p> | ||
| </accordion-group> | ||
| <accordion-group heading="Content 2"> | ||
| <p>Content 2</p> | ||
| </accordion-group> | ||
| </accordion> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
| } |
19 changes: 19 additions & 0 deletions
19
demo/src/app/components/accordion/demos/disabled/disabled.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <p> | ||
| <button type="button" class="btn btn-primary btn-sm" (click)="status.isFirstDisabled = ! status.isFirstDisabled"> | ||
| Enable / Disable first panel | ||
| </button> | ||
| </p> | ||
|
|
||
| <accordion> | ||
| <accordion-group heading="Static Header, initially expanded" | ||
| [isOpen]="status.isFirstOpen" | ||
| [isDisabled]="status.isFirstDisabled"> | ||
| This content is straight in the template. | ||
| </accordion-group> | ||
| <accordion-group heading="Content 1"> | ||
| <p>accordion 1</p> | ||
| </accordion-group> | ||
| <accordion-group heading="Content 2"> | ||
| <p>accordion 2</p> | ||
| </accordion-group> | ||
| </accordion> |
12 changes: 12 additions & 0 deletions
12
demo/src/app/components/accordion/demos/disabled/disabled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
demo/src/app/components/accordion/demos/dymanic/dynamic.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}`); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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') | ||
| } | ||
| }; |
18 changes: 18 additions & 0 deletions
18
demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <div class="checkbox"> | ||
| <label> | ||
| <input type="checkbox" [(ngModel)]="oneAtATime"> | ||
| Open only one at a time | ||
| </label> | ||
| </div> | ||
|
|
||
| <accordion [closeOthers]="oneAtATime"> | ||
| <accordion-group heading="Header"> | ||
| This content is straight in the template. | ||
| </accordion-group> | ||
| <accordion-group heading="Content 1"> | ||
| <p>Content 1</p> | ||
| </accordion-group> | ||
| <accordion-group heading="Content 2"> | ||
| <p>Content 2</p> | ||
| </accordion-group> | ||
| </accordion> |
10 changes: 10 additions & 0 deletions
10
demo/src/app/components/accordion/demos/one-at-a-time/one-at-a-time.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
|
||
| } |
13 changes: 13 additions & 0 deletions
13
demo/src/app/components/accordion/demos/styling/styling.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <accordion> | ||
| <accordion-group heading="Static Header, initially expanded" | ||
| [panelClass]="customClass" | ||
| [isOpen]="isFirstOpen"> | ||
| This content is straight in the template. | ||
| </accordion-group> | ||
| <accordion-group heading="Content 1"> | ||
| <p>accordion 1</p> | ||
| </accordion-group> | ||
| <accordion-group heading="Content 2" panelClass="customClass"> | ||
| <p>accordion 2</p> | ||
| </accordion-group> | ||
| </accordion> |
11 changes: 11 additions & 0 deletions
11
demo/src/app/components/accordion/demos/styling/styling.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters