Menu

菜单显示临时表面选项列表。 当用户与按钮,操作或其他控件交互时,它们会出现。

使用

  1. import 'omim/menu'
  2. import 'omim/button'
  3. import 'omim/locate'
  4. import { define, WeElement, render, h } from 'omi'
  5. define('my-app', class extends WeElement {
  6. onSelected = (evt) => {
  7. console.log(evt)
  8. this.show = false
  9. this.update()
  10. }
  11. show = true
  12. onClick = () => {
  13. this.show = !this.show
  14. this.update()
  15. }
  16. render() {
  17. return <div>
  18. <m-button
  19. id='myBtn'
  20. style='position: relative;top: 100px;left: 40px;'
  21. onClick={this.onClick}>
  22. OPEN MENU
  23. </m-button>
  24. <m-locate to="#myBtn" direction='bottom-left' show={this.show}>
  25. <m-menu onSelected={this.onSelected} list={[
  26. { text: 'A Menu Item' },
  27. { text: 'A Disabled Menu Item', disabled: true },
  28. { text: 'Another Menu Item' }
  29. ]}></m-menu>
  30. </m-locate>
  31. </div>
  32. }
  33. })
  34. render(<my-app />, 'body')

API

Props

NameTypeDefaultsDetails
listobject列表内容

Events

  • select