Accordion is a custom component to display a list of collapsable items
The body of the accordion group expands as the content grows
The body of the accordion group expands as the content grows
The class styles from the example Accordion above are added with Fuel-UI's CSS bundle, so feel free to use the HTML below!
import {{'{'}}ACCORDION_PROVIDERS{{'}'}} from 'fuel-ui/fuel-ui';
Accordion is a custom element to show a list of collapsable items. The Accordion component makes use of the Collapse directive to make a highly customizable interface.
<accordion [closeOthers]="oneAtATime" [duration]="duration">
<accordion-item heading="Static Header 1"
[(open)]="firstOpen"
[disabled]="firstDisabled">
This content is showing on start
</accordion-item>
<accordion-item #item [(open)]="lastOpen">
<accordion-heading>
<a (click)="$event.preventDefault" class="fuel-ui-clickable">Markup Here!</a>
<i class="pull-right fa"
[ngClass]="{{'{'}}'fa-chevron-down': item?.open, 'fa-chevron-right': !item || !item.open{{'}'}}"></i>
</accordion-heading>
What amazing content!
</accordion-item>
</accordion>
<accordion [closeOthers]="oneAtATime" [duration]="duration">
<div accordion-item class="fuel-ui-accordion"
[(open)]="firstOpen"
[disabled]="firstDisabled">
<div accordion-heading class="fuel-ui-accordion-heading fuel-ui-clickable"
[ngClass]="{{'{'}}'text-muted': firstDisabled{{'}'}}">
Static Header 1
</div>
<div class="fuel-ui-accordion-body">
This content is showing on start
</div>
</div>
<div accordion-item class="fuel-ui-accordion" #itemStyled [(open)]="lastOpen">
<div accordion-heading class="fuel-ui-accordion-heading fuel-ui-clickable">
<a (click)="$event.preventDefault">Markup Here!</a>
<i class="pull-right fa"
[ngClass]="{{'{'}}'fa-chevron-down': itemStyled?.open, 'fa-chevron-right': !itemStyled || !itemStyled.open{{'}'}}"></i>
</div>
<div class="fuel-ui-accordion-body">
What amazing content!
</div>
</div>
</accordion>
/*
* This is added in Fuel-UI's CSS bundle already!
* Feel free to use this as base for your own styles!
*/
.fuel-ui-accordion {{'{'}}
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
.fuel-ui-accordion-heading {{'{'}}
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #333;
padding: 10px 15px;
&.text-muted {{'{'}}
color: #818a91 !important;
{{'}'}}
{{'}'}}
.fuel-ui-accordion-body {{'{'}}
padding: 15px;
{{'}'}}
{{'}'}}
export class AccordionExample {{'{'}}
oneAtATime:boolean = true;
duration:number = 250;
firstOpen:boolean = true;
firstDisabled:boolean = false;
lastOpen:boolean = false;
{{'{'}}