Difference between revisions of "Menu Examples"

From MSX - Wiki
Jump to navigation Jump to search
Line 170: Line 170:
 
=== Demo ===
 
=== Demo ===
 
* Load via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/data/example_menu_2.json
 
* Load via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/data/example_menu_2.json
* Load via Editor: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/data/example_menu_2.json
+
* Load via Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/data/example_menu_2.json

Revision as of 13:49, 12 January 2021

Example Menu 1[edit]

Screenshot[edit]

Menu.png

Code[edit]

{
    "headline": "Test Menu",
    "menu": [{
            "label": "Default Menu Item"
        }, {
            "type": "separator"
        }, {
            "icon": "home",
            "label": "Menu Item With Icon"
        }, {
            "icon": "person",
            "label": "Menu Item With Icon & Extension Label",
            "extensionLabel": "123"
        }, {
            "icon": "star",
            "label": "Menu Item With Icon & Extension Icon",
            "extensionIcon": "music-note"
        }, {
            "type": "separator",
            "label": "Separator With Label"
        }, {            
            "label": "Menu Item With Background",
            "background": "http://msx.benzac.de/img/bg1.jpg"
        }, {            
            "label": "Menu Item With Data Link",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {            
            "label": "Menu Item With Data Object",
            "data": {               
                "pages": [{  
                        "items": [{
                                "layout": "0,0,12,6",
                                "color": "msx-glass",
                                "headline": "Content Placeholder",
                                "text": "This is just a placeholder."
                            }]
                    }]
            }
        }]
}

Demo[edit]

Example Menu 2[edit]

Screenshot[edit]

Menu2.png

Code[edit]

{
    "headline": "Menu Headline",
    "menu": [{
            "type": "separator",
            "label": "Default Menu Items"
        }, {
            "label": "Item 1.1",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "label": "Item 1.2",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "label": "Item 1.3",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "type": "separator",
            "label": "Menu Items With Icons"
        }, {
            "icon": "home",
            "label": "Item 2.1",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "person",
            "label": "Item 2.2",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "star",
            "label": "Item 2.3",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "type": "separator",
            "label": "Menu Items With Icons & Extensions"
        }, {
            "icon": "home",
            "label": "Item 3.1",
            "extensionLabel": "123",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "person",
            "label": "Item 3.2",
            "extensionIcon": "music-note",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "star",
            "label": "Item 3.3",
            "extensionLabel": "{ico:favorite}{ico:favorite}{ico:favorite}",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "type": "separator",
            "label": "Colored Menu Items"
        }, {
            "icon": "msx-red:home",
            "label": "{txt:msx-red:Item 4.1}",
            "extensionLabel": "{txt:msx-blue:123}",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "msx-green:person",
            "label": "{txt:msx-green:Item 4.2}",
            "extensionIcon": "msx-blue:music-note",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "icon": "msx-yellow:star",
            "label": "{txt:msx-yellow:Item 4.3}",
            "extensionLabel": "{ico:msx-blue:favorite}{ico:msx-blue:favorite}{ico:msx-blue:favorite}",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "type": "separator",            
            "label": "Menu Items With Backgrounds"
        }, {
            "label": "Item 5.1",          
            "background": "http://msx.benzac.de/img/bg1.jpg",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "label": "Item 5.2",          
            "background": "http://msx.benzac.de/img/bg2.jpg",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "label": "Item 5.3",          
            "background": "http://msx.benzac.de/img/bg3.jpg",
            "data": "http://msx.benzac.de/info/data/content_placeholder.json"
        }, {
            "type": "separator"
        }, {            
            "label": "Item 6",
            "data": {               
                "pages": [{  
                        "items": [{
                                "type": "button",
                                "icon": "list",
                                "layout": "0,0,3,3",                                            
                                "label": "Menu",
                                "action": "menu:http://msx.benzac.de/info/data/example_menu_1.json"
                            }, {
                                "type": "button",
                                "icon": "apps",
                                "layout": "3,0,3,3",                          
                                "label": "Content",
                                "action": "content:http://msx.benzac.de/info/data/content_placeholder.json"
                            }, {
                                "type": "button",
                                "icon": "web-asset",
                                "layout": "6,0,3,3",                          
                                "label": "Panel",
                                "action": "panel:http://msx.benzac.de/info/data/panel_placeholder.json"
                            }]
                    }]
            }
        }]
}

Demo[edit]