Polymer Paper 菜单介绍

Polymer Paper 菜单是一个基于Web组件技术的应用程序开发框架。可以方便的创建菜单和面板。Polymer是谷歌大脑项目中HTML、CSS和Javascript的组合构成的一套Web组件框架，使用Polymer可以更加简单的创建一个优雅的、可维护的、高效的、精致的Web应用程序。Polymer框架是建立在Google Chrome的新一代WebKit引擎之上。

Polymer Paper 菜单在创建项目时，和其他Polymer元素一样，你可以使用<link rel="import" href="path/to/paper-menu.html">语句来导入。然后通过<paper-menu>标签创建你的菜单。

基本使用

Polymer Paper 菜单提供了一组基本标签和属性来创建菜单和面板，以下是基本的使用方式：

<paper-menu>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
  <paper-item>Item 3</paper-item>
</paper-menu>

使用<paper-menu>标签包含多个<paper-item>子元素，即可创建一个基本的菜单。其中<paper-item>子元素用于显示可选项。

属性

Polymer Paper 菜单提供了一系列属性来自定义菜单的行为和样式。

| 属性 | 默认值 | 描述 | |------|--------|------| | selected | null | 当前选中的菜单项。 | | vertical-align | top | 菜单对齐方式。可选值为top、bottom、middle。 | | horizontal-align | left | 菜单对齐方式。可选值为left、right、center。 | | no-ink | false | 禁用墨水效果。 | | no-animation | false | 禁用动画效果。 | | no-animations | false | 禁用所有动画效果。 | | autoclose | true | 点击菜单项后自动关闭菜单。 | | dropdown-content | false | 设置菜单项为下拉菜单。 |

以下代码演示了如何使用属性：

<paper-menu selected="2" vertical-align="middle" horizontal-align="center" no-ink no-animations>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
  <paper-item>Item 3</paper-item>
</paper-menu>

事件

当菜单项被选中时，会触发iron-select事件。你可以在菜单中监听此事件并根据选中的菜单项做出相应的操作。

以下代码演示了如何监听iron-select事件：

<paper-menu on-iron-select="menuItemSelectedHandler">
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
  <paper-item>Item 3</paper-item>
</paper-menu>

总结

Polymer Paper 菜单是一个基于Web组件技术的应用程序开发框架，可以方便的创建菜单和面板。在创建项目时可以使用标准HTML和JavaScript语法，结合丰富的属性和事件来实现复杂的功能。如果你正在寻找一个高效的、可维护的、优雅的Web框架，那么Polymer Paper 菜单将是一个很好的选择。