Noble Programming Mantra

    leaflet-cascade-buttons

    1.0.9 • Public • Published

    L.cascadeButtons

    A leaflet plugin to create cascade buttons.

    image

    DEMO


    Requirements

    • Leaflet
    • Some Font Icons

    Install

    NPM

    npm i leaflet-cascade-buttons
    

    Usage Example

    Easy way to implements buttons with cascade subgroup buttons where each one can have it functionality.

    new L.cascadeButtons([
        {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
        {icon: 'fas fa-home', items:[
            {icon: 'fas fa-home', command: () =>{console.log('hola')}},
            {icon: 'fas fa-home', command: () =>{console.log('hola')}},
            {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
        ]},
        {icon: 'fas fa-home', items: [
            {icon: 'fas fa-home', command: () =>{console.log('hola')}},
            {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
        ]},
    ], {position:'topright', direction:'horizontal'}).addTo(map);

    L.cascadeButtons receives two arguments:

    • The first is an array that contains every parent button and it children's.
    • The second is an object with control options

    Parent properties

    Property Type Default Description
    icon String null Icon class of Font Icon
    ignoreActiveState Boolean false Flag boolean to ignore clicked button style
    command Function null or (expand or collapse if button has childs) Function to execute when button is clicked
    items Child properties[] null Array of child properties

    Child properties

    Property Type Default Description
    icon String null Icon class of Font Icon
    command Function null or (expand or collapse if button has childs) Function to execute when button is clicked

    Options

    Option Type Default Description
    position String 'bottomright' Position of the control. Options: leaflet control positions
    direction String 'horizontal' Stacked direction. Options: 'Vertical' and 'Horizontal'
    className String '' className to customize control

    Font Icons

    Can be used with any font icon / custom library like:

    • font awesome
    • boostrap icons
    • primeIcons
    • custom

    Install

    npm i leaflet-cascade-buttons

    DownloadsWeekly Downloads

    35

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    9.65 kB

    Total Files

    5

    Last publish

    Collaborators

    • clavijojuan