聚合物纸对话框底部的空白区域

Question

我有一个用于登录的自定义聚合物对话框，这是我想要的样子：

这是我用来实现的代码：

<polymer-element name="login-dialog">
  <template>
    <paper-dialog heading="XYZ Login" vertical autoCloseDisabled="true" transition="paper-transition-center" opened="true">
      <p>{{feedback}}</p>
      <paper-input floatingLabel label="Username" inputValue="{{username}}" type="text"></paper-input>
      <paper-input floatingLabel label="Password" inputValue="{{password}}" type="password"></paper-input>

      <paper-button role="button" on-click="{{reset}}" class="noink" affirmative>
        Reset Password
      </paper-button>           
      <paper-button role="button" on-click="{{login}}" class="ink" affirmative>
        Login
      </paper-button>
    </paper-dialog>
  </template>
  <script type="application/dart" src="login-dialog.dart"></script>
</polymer-element>

我不希望按钮关闭对话框，所以我从纸质按钮中删除了肯定，这样如果填写了正确的登录详细信息，我就可以自己关闭对话框。 当我删除肯定时，对话框底部会出现一个大空白：

在飞镖代码中，我现在有以下内容：

  login(event, detail, target) {
    print("Clicked Login");

    return false;
  }

  reset(event, detail, target) {
    print("Clicked Reset");

    return false;
  }

如果我使用肯定，我希望返回 false 会阻止对话框关闭，但它什么也没做。关于如何让按钮不关闭对话框的任何想法，除非我在飞镖代码中告诉它这样做并且底部没有那个空白？ （不热衷于用 css 破解它）

Answer 1

返回 false 不会做任何事情。您需要在活动中致电preventDefault()。

login(event, detail, target) {
    print("Clicked Login");

    event.preventDefault();
    // event.stopPropagation();
  }

  reset(event, detail, target) {
    print("Clicked Reset");

    event.preventDefault();
    // event.stopPropagation();
  }

<paper-dialog> 具有禁用自动关闭的特定选项，因此您可以 affirmative 仅用于布局。

<paper-dialog closeSelector="" ....

另见Prevent paper-dialog from automatically closing