使用 Google 按钮响应式设计登录

Question

有什么方法可以使新的“使用 Google 登录”按钮具有响应能力吗？具体来说，根据包含元素的宽度改变宽度？我真的只想将宽度设置为 100%。

我知道我可以设置 data-width 属性，但这将其设置为显式宽度，并且如果您在初始脚本加载后更改它，则不会更新 - 您必须重新加载整个脚本才能调整宽度。

Answer 1

这不是一个完美的解决方案，但它对我们有用。我们正在使用 Twitter Bootstrap。

新的 JavaScript 库有一个renderButton方法。因此，您可以使用类似这样的方法在一页上多次渲染按钮，将不同的宽度传递给每个按钮（400 是库允许的最大宽度）

private renderAllGoogleSignInButtons(): void {
  this.renderGoogleSignInButton(document.getElementById('google-signin-xs'), 400);
  this.renderGoogleSignInButton(document.getElementById('google-signin-sm'), 280);
  this.renderGoogleSignInButton(document.getElementById('google-signin-md'), 372);
  this.renderGoogleSignInButton(document.getElementById('google-signin-lg'), 400);
  this.renderGoogleSignInButton(document.getElementById('google-signin-xl'), 400);
}

private renderGoogleSignInButton(element: HTMLElement, width: number){
  const options {
    type: 'standard',
    ....
    width: width
  };

  google.accounts.id.renderButton(element, options);
}

然后，我们使用引导程序中的显示类根据大小隐藏/显示每个按钮。

    <div class="mx-auto" style="max-width: 400px">
      <div class="d-none-sm d-none-md d-none-lg d-none-xl">
        <div id="google-signin-xs"></div>
      </div>
      <div class="d-none d-none-md d-none-lg d-none-xl">
        <div id="google-signin-sm"></div>
      </div>
      <div class="d-none d-none-sm d-none-lg d-none-xl">
        <div id="google-signin-md"></div>
      </div>
      <div class="d-none d-none-sm d-none-md d-none-xl">
        <div id="google-signin-lg"></div>
      </div>
      <div class="d-none d-none-sm d-none-md d-none-lg">
        <div id="google-signin-xl"></div>
      </div>
    </div>

我们使用带有 mx-auto 和 max-width 的包装容器来将按钮居中，但您不必这样做。

我们的实际实现与上面略有不同，因为我们使用 Angular 并且按钮是一个组件，但您可以从上面得到这个想法。

此方法的唯一缺点是“个性化按钮”似乎并未针对所有呈现的按钮显示，但似乎并不影响其功能。