13

更新 1：发现这个问题与 pull request似乎正在解决 Polymer 中的这个问题。

更新 2：决定基于使用 page.js 而不是 app-router 的Polymer Starter Kit重构我的布局，并且似乎运行良好，尽管他们不在 paper-menu 中使用 paper-item 而是使用自定义锚元素.

搜索所有文档，但我找不到这个（尽管stackoverflow上有另一个问题几乎相同的标题，不是同一件事）

TLDR：我需要整个文件都可以点击链接。不仅仅是文字本身。为清楚起见，请参见下图，这是实时代码。

在此处输入图像描述.

我有类似下面的代码。我将链接标签与应用路由器路由结合使用，效果很好。唯一的问题是：我希望整个纸质菜单项都可以通过链接标签进行点击。

当我使用下面的代码时，直接单击链接 tekst 本身时会检索到正确的页面，但这不会创建“选定”状态。当我单击按钮（就在文本之外）时，按钮被选中，但页面没有被检索到，因为我没有单击链接......

必须有一个简单的方法来做到这一点吗？我的意思是，我可以通过覆盖所有 CSS 来强制执行此操作，但在我看来，纸张菜单中的纸张项目中的链接将是一件非常常见的事情，应该自动执行此操作，或者使用属性或其他东西？

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

我检查了有关纸质项目、纸质菜单和其他文件的文档，但那些从不使用带有链接的示例。

4

2 回答 2

1

IMO，最干净的方法是完全删除链接并添加点击事件。

（您也可以在菜单中使用dom-repeat ）

<paper-menu class="list">
  <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
  <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>

我假设您<a>因为app-router而使用标签。

来自应用路由器文档：

go(path, options) - 您可以从 Javascript 调用路由器以命令式导航。

然后您可以简单地编写自己的选项卡处理程序并在每个处理程序上使用自定义属性（mypath）<paper-item> 

Polymer({
    is: 'your-menu',
    menuSelected: function (e) {
        var mypath = e.currentTarget.getAttribute('mypath'); 
        document.querySelector('app-router').go(mypath);
    },
})();
于 2015-06-18T14:22:20.033 回答
0

添加class="flex"到每个锚标记。

于 2015-06-19T19:39:58.387 回答