I find accordions pretty well suited for FAQs or HowTo pages. That's why I chose one for the HowTo page of www.bookmarks.dev, which is implemented with angular material expansion panel and accordion:
This blog post presents the source code for that with a couple of notes.
The complete source code is available on Github
The source code
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<h4><i class="fas fa-xs fa-info-circle"></i> Get started</h4>
</mat-expansion-panel-header>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-howto-get-started></app-howto-get-started></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel-header></span>
<span class="nt"><h4><i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">></i></span> Save bookmarks<span class="nt"></h4></span>
<span class="nt"></mat-expansion-panel-header></span>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-howto-save></app-howto-save></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel-header></span>
<span class="nt"><h4><i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">></i></span> Search bookmarks<span class="nt"></h4></span>
<span class="nt"></mat-expansion-panel-header></span>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-howto-search></app-howto-search></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel-header></span>
<span class="nt"><h4><i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">></i></span> Bookmarklets<span class="nt"></h4></span>
<span class="nt"></mat-expansion-panel-header></span>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-howto-bookmarklets></app-howto-bookmarklets></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel></span>
<span class="nt"><mat-expansion-panel-header></span>
<span class="nt"><h4><i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">></i></span> Codelets<span class="nt"></h4></span>
<span class="nt"></mat-expansion-panel-header></span>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-howto-codelets></app-howto-codelets></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
</mat-accordion>
Notes
- the
mat-expansion-panel
components are encapsulated in anmat-accordion
element - the code itself for the several sections is encapsulated in own component, for better code readability and to access them directly
- the construct
ng-template
with thematExpansionPanelContent
attribute in the is used to defer initialization until the panel is open. By default, the expansion panel content will be initialized even when the panel is closed - by setting the input
multi="true"
(defaultfalse
) onmat-accordion
you could allow the expansions state to be set independently of each other
Top comments (0)