Skip to content

Commit 191e5b4

Browse files
DomainvDomainv
authored
feat(common): add animation for collapse and accordion components (#5146)
* feat(common): add animation to collapse and accordion
1 parent f5be2db commit 191e5b4

25 files changed

+295
-72
lines changed

‎demo/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
55
import { RouterModule } from '@angular/router';
66
import { NgxPageScrollModule } from 'ngx-page-scroll';
77
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
8+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
89

910
import { environment } from '../environments/environment';
1011
import { ngdoc } from '../ng-api-doc';
@@ -21,6 +22,7 @@ import { ThemeStorage } from './theme/theme-storage';
2122
@NgModule({
2223
declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent],
2324
imports: [
25+
BrowserAnimationsModule,
2426
DocsModule,
2527
FormsModule,
2628
HttpClientModule,

‎demo/src/app/components/+accordion/accordion-section.list.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
import { DemoAccordionAnimatedComponent } from './demos/animated/animated';
12
import { DemoAccordionBasicComponent } from './demos/basic/basic';
3+
import { DemoAccordionConfigComponent } from './demos/config/config';
4+
import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
25
import { DemoAccordionDisabledComponent } from './demos/disabled/disabled';
36
import { DemoAccordionDynamicComponent } from './demos/dymanic/dynamic';
7+
import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
48
import { DemoAccordionOneAtATimeComponent } from './demos/one-at-a-time/one-at-a-time';
5-
import { DemoAccordionStylingComponent } from './demos/styling/styling';
6-
import { DemoAccordionConfigComponent } from './demos/config/config';
79
import { DemoAccordionOpenEventComponent } from './demos/open-event/open-event';
8-
import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
9-
import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
10+
import { DemoAccordionStylingComponent } from './demos/styling/styling';
1011

1112
import { ContentSection } from '../../docs/models/content-section.model';
1213
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -43,6 +44,14 @@ export const demoComponentContent: ContentSection[] = [
4344
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
4445
outlet: DemoAccordionBasicComponent
4546
},
47+
{
48+
title: 'With animation',
49+
anchor: 'animated-accordion',
50+
description: `<p>Use input property or config property <code>isAnimated</code> to enable/disable animation</p>`,
51+
component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
52+
html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
53+
outlet: DemoAccordionAnimatedComponent
54+
},
4655
{
4756
title: 'Group opening event',
4857
anchor: 'open-event',

‎demo/src/app/components/+accordion/demos/animated/animated.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<accordion [isAnimated]="true">
2+
<accordion-group heading="Static Header">
3+
This content is straight in the template.
4+
</accordion-group>
5+
<accordion-group heading="Another group">
6+
<p>Some content</p>
7+
</accordion-group>
8+
<accordion-group heading="Another group">
9+
<p>Some content</p>
10+
</accordion-group>
11+
<accordion-group heading="Another group">
12+
<p>Some content</p>
13+
</accordion-group>
14+
</accordion>

‎demo/src/app/components/+accordion/demos/animated/animated.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'demo-accordion-animation',
5+
templateUrl: './animated.html'
6+
})
7+
export class DemoAccordionAnimatedComponent {}

‎demo/src/app/components/+accordion/demos/config/config.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<accordion>
1+
<accordion [isAnimated]="true">
22
<accordion-group heading="Header">
33
This content is straight in the template.
44
</accordion-group>

‎demo/src/app/components/+accordion/demos/index.ts

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1+
import { DemoAccordionAnimatedComponent } from './animated/animated';
12
import { DemoAccordionBasicComponent } from './basic/basic';
2-
import { DemoAccordionDisabledComponent } from './disabled/disabled';
3-
import { DemoAccordionStylingComponent } from './styling/styling';
4-
import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
5-
import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
63
import { DemoAccordionConfigComponent } from './config/config';
7-
import { DemoAccordionOpenEventComponent } from './open-event/open-event';
84
import { DemoAccordionCustomHTMLComponent } from './custom-html/custom-html';
9-
import { DemoAccordionOpenedComponent } from './opened/opened';
10-
import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
5+
import { DemoAccordionDisabledComponent } from './disabled/disabled';
116
import { DemoAccordionDynamicBodyComponent } from './dynamic-body/dynamic-body';
7+
import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
8+
import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
9+
import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
10+
import { DemoAccordionOpenedComponent } from './opened/opened';
11+
import { DemoAccordionOpenEventComponent } from './open-event/open-event';
12+
import { DemoAccordionStylingComponent } from './styling/styling';
1213

1314
export const DEMO_COMPONENTS = [
15+
DemoAccordionAnimatedComponent,
1416
DemoAccordionBasicComponent,
15-
DemoAccordionDisabledComponent,
16-
DemoAccordionStylingComponent,
17-
DemoAccordionOneAtATimeComponent,
18-
DemoAccordionDynamicComponent,
1917
DemoAccordionConfigComponent,
20-
DemoAccordionOpenEventComponent,
2118
DemoAccordionCustomHTMLComponent,
22-
DemoAccordionOpenedComponent,
19+
DemoAccordionDisabledComponent,
20+
DemoAccordionDynamicBodyComponent,
21+
DemoAccordionDynamicComponent,
2322
DemoAccordionManualToggleComponent,
24-
DemoAccordionDynamicBodyComponent
23+
DemoAccordionOneAtATimeComponent,
24+
DemoAccordionOpenedComponent,
25+
DemoAccordionOpenEventComponent,
26+
DemoAccordionStylingComponent
2527
];

‎demo/src/app/components/+collapse/collapse-section.list.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
2+
import { CollapseDemoAnimatedComponent } from './demos/animated/animated';
13
import { CollapseDemoComponent } from './demos/basic/basic';
2-
import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
34
import { CollapseDemoEventsComponent } from './demos/events/events';
4-
55
import { ContentSection } from '../../docs/models/content-section.model';
6+
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
67
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
78
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
8-
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
9-
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
109
import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';
10+
import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
1111

1212
import { NgApiDocComponent } from '../../docs/api-docs';
1313

@@ -32,13 +32,23 @@ export const demoComponentContent: ContentSection[] = [
3232
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
3333
outlet: CollapseDemoComponent
3434
},
35+
{
36+
title: 'With animation',
37+
anchor: 'animated',
38+
component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
39+
html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
40+
description: `You can enable animation via <code>isAnimated</code> input option`,
41+
outlet: CollapseDemoAnimatedComponent
42+
},
3543
{
3644
title: 'Events',
3745
anchor: 'events',
3846
component: require('!!raw-loader?lang=typescript!./demos/events/events'),
3947
html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
40-
description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden,
41-
and <code>expanded</code>, that fires when a content was shown`,
48+
description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (aniamtion start),
49+
<code>collapsed</code>, that fires when a content was hidden (aniamtion finished),
50+
<code>expands</code>, that fires when a expansion was triggered (animation start)
51+
and <code>expanded</code>, that fires when a content was shown\`, and <code>expanded</code>, that fires when a content was shown`,
4252
outlet: CollapseDemoEventsComponent
4353
},
4454
{

‎demo/src/app/components/+collapse/demos/animated/animated.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
2+
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
3+
</button>
4+
<hr>
5+
<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
6+
<div class="well well-lg card card-block card-header">Some content</div>
7+
</div>

‎demo/src/app/components/+collapse/demos/animated/animated.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'collapse-demo-animation',
5+
templateUrl: './animated.html'
6+
})
7+
export class CollapseDemoAnimatedComponent {
8+
isCollapsed = false;
9+
}

‎demo/src/app/components/+collapse/demos/basic/basic.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
33
</button>
44
<hr>
5-
<div id="collapseBasic" [collapse]="isCollapsed" class="card card-block card-header">
6-
<div class="well well-lg">Some content</div>
5+
<div id="collapseBasic" [collapse]="isCollapsed">
6+
<div class="well well-lg card card-block card-header">Some content</div>
77
</div>

0 commit comments

Comments
 (0)