Off Canvas Menu

Menu that originates from off canvas

Menu

Import


import {{'{'}}OFF_CANVAS_MENU_PROVIDERS{{'}'}} from "fuel-ui/fuel-ui"

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...