Neoclassical Philosophic Musings

    leaflet-sidenav

    0.5.2 • Public • Published

    leaflet-sidenav

    A responsive sidenav for Leaflet

    Install

    npm install leaflet-sidenav
    

    Usage

    Example code at examples/index.html

    API

    Leaflet-sidenav provides a simple API to dynamically modify the sidenav. All functions may be chained.

    Create a new nav

    var sidenav = L.control.sidenav('sidenav', {'position': 'left'}).addTo(map);

    Modify a nav

    /* add a new panel */
    var panelContent = {
        id: 'userinfo',                     // UID, used to access the panel
        tab: '<i class="fa fa-gear"></i>',  // content can be passed as HTML string,
        pane: someDomNode.innerHTML,        // DOM elements can be passed, too
        position: 'bottom'                  // vertical alignment, 'top' or 'bottom'
    };
    sidenav.addPanel(panelContent);
     
    /* remove a panel */
    sidenav.removePanel('userinfo');
     
    /* en- / disable a panel */
    sidenav.disablePanel('userinfo');
    sidenav.enablePanel('userinfo');

    open / close / show content

    /* open a panel */
    sidenav.open('userinfo');
     
    /* close the sidenav */
    sidenav.close();

    markup

    If you use the sidenav with static content only, you can predefine content in HTML:

    <div id="sidenav" class="sidenav collapsed">
        <!-- Nav tabs -->
        <div class="sidenav-tabs">
            <ul role="tablist"> <!-- top aligned tabs -->
                <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
                <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
                <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
            </ul>
     
            <ul role="tablist"> <!-- bottom aligned tabs -->
                <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
            </ul>
        </div>
     
        <!-- Tab panes -->
        <div class="sidenav-content">
            <div class="sidenav-pane" id="home">
                <h1 class="sidenav-header">
                    sidenav-v2
                    <div class="sidenav-close"><i class="fa fa-caret-left"></i></div>
                </h1>
                <p>A responsive sidenav for mapping libraries</p>
            </div>
     
            <div class="sidenav-pane" id="messages">
                <h1 class="sidenav-header">Messages<div class="sidenav-close"><i class="fa fa-caret-left"></i></div></h1>
            </div>
     
            <div class="sidenav-pane" id="profile">
                <h1 class="sidenav-header">Profile<div class="sidenav-close"><i class="fa fa-caret-left"></i></div></h1>
            </div>
        </div>
    </div>

    You still need to initialize the sidenav (see API.creation)

    Events

    The sidenav fires 3 types of events: opening, closing, and content. The latter has a payload including the id of the activated content div.

    You can listen for them like this:

    sidenav.on('content', function(e) {
        // e.id contains the id of the opened panel
    })

    License

    sidenav is free software, and may be redistributed under the MIT license.

    Install

    npm i leaflet-sidenav

    DownloadsWeekly Downloads

    0

    Version

    0.5.2

    License

    MIT

    Last publish

    Collaborators

    • jamesramm