options

Description

specifies a set of options for Menu Bar

Type

array

Example

<script>
    const options = [
    { 
        id: "file", 
        text: "File", 
        data: [
            { id: "file-new", text: "New document", icon: "wxi wxi-file" },
            { 
            id: "file-export", 
            text: "Export", 
            icon: "wxi wxi-download", 
            data: [
                { id: "export-pdf", text: "PDF" },
                { id: "export-txt", text: "TXT" }
            ]  
            },
            { id: "file-print", text: "Print" } 
        ],
    },
    { 
        id: "edit", 
        text: "Edit", 
        data: [
            { id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },
            { id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },
            { id: "edit-paste", text: "Paste", icon: "wxi wxi-content-paste" },
        ],
    },
    { 
        id: "view", 
        text: "View", 
        data: [
            { id: "view-fullscreen", text: "Fullscreen" },
            { id: "view-option", text: "..." }
        ], 
    },
];
</script>

<MenuBar {options} on:click={clicked}></MenuBar>

Details

Properties of an item object

A menu item object in the options array may contain a set of properties. The list of available properties is given below:

• id - the id of a menu item
• text - the text of a menu item
• subtext - a dimmed text displayed to the right of the main item's text, such as a hot key or other additional info
• icon - the name of an icon displayed before the text. It converts to adding <i class={item.icon}>, so any icons with the wxi- prefix can be used here, e.g ".wxi-plus" or any customer icons defined on the page. Read more about the usage of icons
• css - the name of a CSS class that will be applied to an item
• data - an array of sub items for a menu item
• handler - a click handler function, takes an item object as a parameter

Related article: Loading options

Related sample: Menu bar