Collapse is a custom animation to display and hide content
At any time!
import {{'{'}}Collapse{{'}'}} from 'fuel-ui';
@Component({{'{'}}
animations: [Collapse(300)]
{{'}'}})
Collapse allows you to toggle content on the page with a nice sliding animation. Import the Collapse function from 'fuel-ui', and add the function to your animations array of any component. You can optionally add a duration number as a parameter.
<div @collapse="collapsed ? 'true' : 'false'">
<h2>All of your content</h2>
<ul>
<li>That you wish</li>
<li>to be able</li>
<li>to collapse</li>
</ul>
<p>At any time!</p>
</div>
export class CollapseExample {{'{'}}
collapsed: boolean = false;
{{'}'}}