Off Canvas Menu

Menu that originates from off canvas

Menu

Import


import {{'{'}}FuiOffCanvasMenuModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}OffCanvasMenu, OffCanvasMenuClose{{'}'}} from 'fuel-ui'; //class

Getting Started

The off canvas menu provides a way to extend content from off screen

Usage


<off-canvas-menu [origin]="origin" [width]="width" [height]="height"
    (close)="onClose()" (open)="onOpen()" #menu>
    <div class="p-a-1">
        <h3>Menu</h3>
        <button class="btn btn-info off-canvas-menu-close">Close Menu with Class</button>
        <button class="btn btn-primary" offCanvasMenuClose>Close Menu with Directive</button>
    </div>
</off-canvas-menu>


export class OffCanvasMenuExample {{'{'}}
    origin = "left";
    width = "25%";
    height = "25%";

    onClose(){{'{'}}
        console.log("Menu has been closed!");
    {{'}'}}
    onOpen(){{'{'}}
        console.log("Menu has been opened!");
    {{'}'}}
{{'}'}}

Attributes

Loading table...

Events

Loading table...