Collapse

Collapse is a custom animation to display and hide content

All of your content

At any time!

Import


import {{'{'}}Collapse{{'}'}} from 'fuel-ui';

@Component({{'{'}}
    animations: [Collapse(300)]
{{'}'}})

Getting Started

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.

Usage


<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;
{{'}'}}

Parameters

Loading table...