在当前 page/template 上将 raised = true 设置为 ember 按钮

Question

   <div class="flex">
      <div class="layout-row layout-align-end-center">
        {{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
        {{#paper-button href="incomes"}}Incomes{{/paper-button}}
        {{#paper-button href="expenses"}}Expenses{{/paper-button}}
        {{#paper-button href="settings"}}Settings{{/paper-button}}
      </div>
    </div>

所以我试图在某些 page/template 上设置 raised=true。上面的代码来自我的申请模板。有什么方法可以使用 JS/Ember 来做到这一点，还是我应该在每个模板中手动完成？

Answer 1

我认为最好的方法是编写自定义组件包装 paper-button。 ember-route-helpers 为您提供好帮手：

{{#paper-button
  onclick={{transition-to @route)
  href=(url-for @route)
  raised=(is-active @route)
  primary=(is-active @route)
}}
  {{yield}}
{{/paper-button}}

然后您可以将该组件与 {{#your-component route="settings"}}Settings{{/your-component}} 一起使用。

了解您应该通过和和 href 这两个操作很重要。因为当人们点击按钮时，它会进行转换并且不会重新加载整个页面，但右击->打开和屏幕阅读器不会损坏。

在当前 page/template 上将 raised = true 设置为 ember 按钮

Setting raised = true to an ember button when on current page/template

javascript

ember.js