Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting started in EJ2 TypeScript Menu control

    6 May 202515 minutes to read

    This section explains how to create a simple Menu, and configure its available functionalities in TypeScript using Essential® JS 2quickstart seed repository.

    This application is integrated with thewebpack.config.js configuration and uses the latest version of thewebpack-cli. It requires nodev14.15.0 or higher. For more information about webpack and its features, refer to thewebpack documentation.

    Dependencies

    The following list of dependencies are required to use the Menu component in your application.

    |--@syncfusion/ej2-navigations|--@syncfusion/ej2-base|--@syncfusion/ej2-data|--@syncfusion/ej2-lists|--@syncfusion/ej2-inputs|--@syncfusion/ej2-popups|--@syncfusion/ej2-buttons

    Set up development environment

    Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project fromGitHub.

    git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

    After cloning the application in theej2-quickstart folder, run the following command line to navigate to theej2-quickstart folder.

    cd ej2-quickstart

    Add Syncfusion® JavaScript packages

    Syncfusion® JavaScript (Essential® JS 2) packages are available on thenpmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single@syncfusion/ej2 package or individual packages for each control.

    The quickstart application is preconfigured with the dependent@syncfusion/ej2 package in the~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

    npm install

    Import the Syncfusion® CSS styles

    To render Menu component, need to import navigations and its dependent components styles as given below in the~/src/styles/styles.css file, as shown below:

    @import"../../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../../node_modules/@syncfusion/ej2-lists/styles/material.css";@import"../../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../../node_modules/@syncfusion/ej2-navigations/styles/material.css";

    Add Menu to the project

    Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls.

    Add the HTML UL tag with theid attribute asmenu to yourindex.html file.

    [src/index.html]

    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 - Menu</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2 - Menu"/><metaname="author"content="Syncfusion"/></head><body><divid='loader'>LOADING....</div><divid='container'><ulid="menu"></ul></div></body></html>

    Import the Menu component in yourapp.ts file and initialize it with the#menu.

    [src/app/app.ts]

    import{Menu,MenuItemModel}from'@syncfusion/ej2-navigations';import{enableRipple}from'@syncfusion/ej2-base';enableRipple(true);//Menu items definitionletmenuItems:MenuItemModel[]=[{text:'File',items:[{text:'Open'},{text:'Save'},{text:'Exit'}]},{text:'Edit',items:[{text:'Cut'},{text:'Copy'},{text:'Paste'}]},{text:'View',items:[{text:'Toolbar'},{text:'Sidebar'}]},{text:'Tools',items:[{text:'Spelling & Grammar'},{text:'Customize'},{text:'Options'}]},{text:'Go'},{text:'Help'}];// Initialize Menu component.letmenuObj:Menu=newMenu({items:menuItems},'#menu');

    Run the application

    Run the application in the browser using the following command:

    npm start

    The following example shows a basic Menu component.

    import{Menu,MenuItemModel}from'@syncfusion/ej2-navigations';import{enableRipple}from'@syncfusion/ej2-base';enableRipple(true);//Menu items definitionletmenuItems:MenuItemModel[]=[{text:'File',items:[{text:'Open'},{text:'Save'},{text:'Exit'}]},{text:'Edit',items:[{text:'Cut'},{text:'Copy'},{text:'Paste'}]},{text:'View',items:[{text:'Toolbar'},{text:'Sidebar'}]},{text:'Tools',items:[{text:'Spelling & Grammar'},{text:'Customize'},{text:'Options'}]},{text:'Go'},{text:'Help'}];// Initialize Menu component.letmenuObj:Menu=newMenu({items:menuItems},'#menu');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2"/><metaname="author"content="Syncfusion"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css"rel="stylesheet"/><!--style reference from app--><linkhref="styles.css"rel="stylesheet"/><!--system js reference and configuration--><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><divclass="control-section"><ulid="menu"></ul></div></div></body></html>

    This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to theData Source Binding section.

    Group menu items with separator

    The separators are both horizontal and vertical lines used to separate the menu items. You cannot select the separators, but you can enable separators to group the menu items using theseparator property. TheOpen andSave sub menu items are grouped using theseparator property in the following sample.

    import{Menu,MenuItemModel}from'@syncfusion/ej2-navigations';import{enableRipple}from'@syncfusion/ej2-base';enableRipple(true);//Menu items definitionletmenuItems:MenuItemModel[]=[{text:'File',items:[{text:'Open'},{text:'Save'},{separator:true},{text:'Exit'}]},{text:'Edit',items:[{text:'Cut'},{text:'Copy'},{text:'Paste'}]},{text:'View',items:[{text:'Toolbar'},{text:'Sidebar'},{text:'Full Screen'}]},{text:'Tools',items:[{text:'Spelling & Grammar'},{text:'Customize'},{text:'Options'}]},{text:'Go'},{text:'Help'}];// Initialize Menu component.letmenuObj:Menu=newMenu({items:menuItems},'#menu');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2"/><metaname="author"content="Syncfusion"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css"rel="stylesheet"/><!--style reference from app--><linkhref="styles.css"rel="stylesheet"/><!--system js reference and configuration--><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><divclass="control-section"><ulid="menu"></ul></div></div></body></html>

    Theseparator property should not be given along with the other fields in theMenuItem. You can also enable the separator to grouphorizontal menu items.

    See Also

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp