Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add accordion demos and overview #4481

Merged
merged 3 commits into from
Mar 21, 2023
Merged

Add accordion demos and overview #4481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4cff6d0
refactor(accordion): `ngbAccordionHeader` toggles '.collapsed' class
maxokorokov Mar 21, 2023
1362252
demo(accordion): refactor demos to use directives
maxokorokov Mar 20, 2023
e8ffd8c
docs(accordion): add an overview
maxokorokov Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 16 additions & 15 deletions demo/src/app/components/accordion/accordion.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapp
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
import { NgbdAccordionBasic } from './demos/basic/accordion-basic';
import { NgbdAccordionBasicDirective } from './demos/directive/accordion-basic';
import { NgbdAccordionConfig } from './demos/config/accordion-config';
import { NgbdAccordionHeader } from './demos/header/accordion-header';
import { NgbdAccordionPreventchange } from './demos/preventchange/accordion-preventchange';
import { NgbdAccordionStatic } from './demos/static/accordion-static';
import { NgbdAccordionToggle } from './demos/toggle/accordion-toggle';
import { NgbdAccordionKeepContent } from './demos/keep-content/accordion-keep-content';
import { Routes } from '@angular/router';
import { NgbdDemoListService } from '../../services/demo-list.service';
import { NgbdAccordionOverviewComponent } from './overview/accordion-overview.component';

const OVERVIEW = {
'basic-usage': 'Basic Usage',
features: 'Features',
customization: 'Customization',
};

const DEMOS = {
directive: {
title: 'Directive',
code: require('!raw-loader!./demos/directive/accordion-basic').default,
markup: require('!raw-loader!./demos/directive/accordion-basic.html').default,
type: NgbdAccordionBasicDirective,
},
basic: {
title: 'Accordion',
code: require('!raw-loader!./demos/basic/accordion-basic').default,
Expand All @@ -44,11 +44,11 @@ const DEMOS = {
markup: require('!!raw-loader!./demos/header/accordion-header.html').default,
type: NgbdAccordionHeader,
},
preventchange: {
title: 'Prevent panel toggle',
code: require('!!raw-loader!./demos/preventchange/accordion-preventchange').default,
markup: require('!!raw-loader!./demos/preventchange/accordion-preventchange.html').default,
type: NgbdAccordionPreventchange,
'keep-content': {
title: 'Keep content',
code: require('!raw-loader!./demos/keep-content/accordion-keep-content').default,
markup: require('!raw-loader!./demos/keep-content/accordion-keep-content.html').default,
type: NgbdAccordionKeepContent,
},
config: {
title: 'Global configuration of accordions',
Expand All @@ -59,7 +59,7 @@ const DEMOS = {
};

export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'examples' },
{ path: '', pathMatch: 'full', redirectTo: 'overview' },
{
path: '',
component: ComponentWrapper,
Expand All @@ -70,10 +70,11 @@ export const ROUTES: Routes = [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => inject(NgbdDemoListService).register('accordion', DEMOS),
useValue: () => inject(NgbdDemoListService).register('accordion', DEMOS, OVERVIEW),
},
],
children: [
{ path: 'overview', component: NgbdAccordionOverviewComponent },
{ path: 'examples', component: NgbdExamplesPage },
{ path: 'api', component: NgbdApiPage },
],
Expand Down
90 changes: 55 additions & 35 deletions demo/src/app/components/accordion/demos/basic/accordion-basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,55 @@
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
<ngb-panel title="Simple">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</ng-template>
</ngb-panel>
<ngb-panel>
<ng-template ngbPanelTitle>
<span>&#9733; <b>Fancy</b> title &#9733;</span>
</ng-template>
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</ng-template>
</ngb-panel>
<ngb-panel title="Disabled" [disabled]="true">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</ng-template>
</ngb-panel>
</ngb-accordion>
<div ngbAccordion>
<div ngbAccordionItem [collapsed]="false">
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Simple</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus labore sustainable VHS.
</ng-template>
</div>
</div>
</div>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>
<span>&#9733; <b>Fancy</b> title &#9733;</span>
</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus labore sustainable VHS.
</ng-template>
</div>
</div>
</div>
<div ngbAccordionItem [disabled]="true">
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Disabled</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus labore sustainable VHS.
</ng-template>
</div>
</div>
</div>
</div>
1 change: 0 additions & 1 deletion demo/src/app/components/accordion/demos/config/accordion-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,5 @@ export class NgbdAccordionConfig {
constructor(config: NgbAccordionConfig) {
// customize default values of accordions used by this component tree
config.closeOthers = true;
config.type = 'info';
}
}
84 changes: 0 additions & 84 deletions demo/src/app/components/accordion/demos/directive/accordion-basic.html
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions demo/src/app/components/accordion/demos/directive/accordion-basic.ts
View file
Open in desktop

This file was deleted.