L.cascadeButtons
A leaflet plugin to create cascade buttons.
!
image
$3
-----------------------------------------------------------------------------------
Requirements
Install
$3
``
npm i leaflet-cascade-buttons
`
Usage Example
Easy way to implements buttons with cascade subgroup buttons where each one can have it functionality.
`
javascript
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
$3
| 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 |
$3
| 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 |
$3
| 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