React EasyUI 菜單

2020-06-24 12:09 更新

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

屬性列表

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

事件列表

名稱 參數(shù) 作用描述
onItemClick value 單擊菜單項(xiàng)時(shí)觸發(fā)。
onShow none 菜單顯示時(shí)觸發(fā)。
onHide none 菜單隱藏時(shí)觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
hide none void 隱藏菜單組件。
show left, top void 顯示菜單組件。
showContextMenu left, top void 將菜單組件顯示為contextmenu。
showAt target,  align void 顯示菜單組件并對(duì)齊到指定的元素?!癮lign”參數(shù)值可以是 'left', 'right'。

注:
- 繼承: LocaleBase 。

使用方法

<Menu inline onItemClick={this.handleItemClick.bind(this)}>
  <MenuItem value="new" text="New"></MenuItem>
  <MenuItem text="Open">
    <SubMenu>
      <MenuItem value="word" text="Word"></MenuItem>
      <MenuItem value="excel" text="Excel"></MenuItem>
      <MenuItem value="ppt" text="PowerPoint"></MenuItem>
    </SubMenu>
  </MenuItem>
  <MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
  <MenuItem value="print" text="Print" iconCls="icon-print" disabled></MenuItem>
  <MenuSep></MenuSep>
  <MenuItem value="exit" text="Exit"></MenuItem>
</Menu>

子菜單( SubMenu )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
menuCls string 菜單樣式類。 null
menuStyle Object 菜單內(nèi)聯(lián)樣式。 null
menuWidth any 菜單寬度。 null

注:
- 繼承: LocaleBase 。

菜單項(xiàng)( MenuItem )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
value any 綁定到菜單項(xiàng)的值。 null
text string 菜單項(xiàng)文本。 null
disabled boolean 是否禁用菜單項(xiàng)。 false
iconCls string 用于在菜單項(xiàng)上顯示16x16圖標(biāo)的CSS類。 null

注:
- 繼承: LocaleBase 。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)