Angular EasyUI 菜單

2020-06-24 17:28 更新

菜單（ MenuComponent ）通常用于上下文菜單。 菜單（ MenuComponent ）是創(chuàng)建其他菜單組件的基礎(chǔ)組件。 菜單（ MenuComponent ）也能用于導航和執(zhí)行命令。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認值
menuCls string 菜單樣式類。 null
menuStyle Object 菜單內(nèi)聯(lián)樣式。 null
menuWidth any 菜單寬度。 null
inline boolean 為True時,保留在其父元素中，false時位于所有元素之上。 false
noline boolean 是否在菜單上顯示垂直線。 false
duration number 以毫秒為單位定義持續(xù)時間，在鼠標離開菜單時隱藏。 100
left number 菜單左側(cè)位置。 null
top number 菜單頂部位置。 null
closed boolean 是否關(guān)閉菜單。 true

字段列表

名稱 類型 作用描述
subItems QueryList<MenuItemComponent> 所有子菜單項。

事件列表

名稱 參數(shù) 作用描述
itemClick value:any 單擊菜單項時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
findItem value:any MenuItemComponent 細選項菜單組件。
show left:number,top:number void 顯示菜單組件。
showContextMenu left:number,top:number void 將菜單組件顯示為contextmenu。
showAt target:HTMLElement, align:string='left' void 顯示菜單組件并對齊到指定的元素。“align”參數(shù)值可以是 'left', 'right'。

注：
- 繼承： None 。
- 選擇器： eui-menu 。

使用方法

<eui-menu [inline]="true" (itemClick)="onItemClick($event)">
    <eui-menu-item value="new" text="New"></eui-menu-item>
    <eui-menu-item text="Open">
        <eui-submenu>
            <eui-menu-item value="word" text="Word"></eui-menu-item>
            <eui-menu-item value="excel" text="Excel"></eui-menu-item>
            <eui-menu-item value="ppt" text="PowerPoint"></eui-menu-item>
        </eui-submenu>
    </eui-menu-item>
    <eui-menu-item value="save" text="Save" iconCls="icon-save"></eui-menu-item>
    <eui-menu-item value="print" text="Print" iconCls="icon-print" [disabled]="true"></eui-menu-item>
    <eui-menu-sep></eui-menu-sep>
    <eui-menu-item value="exit" text="Exit"></eui-menu-item>
</eui-menu>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號