高分子纸对话框底部的空白区域

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会阻止对话关闭，但它什么都不做。关于如何让按钮关闭对话框的任何想法除非我告诉它在dart代码中这样做并且底部没有那个空白区域？ （不喜欢用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