如何设置Meteor的loginButton样式不是下拉列表？

Question

我见过这个帖子 - 如何设置Meteor.js的样式loginButtons？ - 它并没有完全回答我的问题.我想保留loginButton样式,但根本不要将其作为下拉列表.

Answer 1

好问题查理!

我无法Accounts._loginButtonsSession.set('dropdownVisible', true);为我工作,所以我不得不通过CSS覆盖(这是带有bootstrap-3和accounts-ui-bootstrap-3的Meteor 0.8):

首先,我将一个ID作为loginButtons的包装器:

<div id="login-screen">
  {{> loginButtons}}
</div>

然后我把它添加到我的CSS:

/* The login menu has to be set at a specific height and I chose to center mine. */

#login-screen .dropdown-menu {
  display: block;
  position: relative;
  height: 245px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

#login-screen #login-dropdown-list {
  display: block;
}

/* Hides the toggle that you click on */

#login-screen a.dropdown-toggle {
  display: none;
}

因为我们包裹{{> loginButtons}}在一个ID的包装和覆盖为CSS 认为,正常功能{{> loginButtons}}得以保留,所以如果你用{{> loginButtons}}再别的地方在页面上没有标识包装,正常的下拉功能被保留.

Answer 2

您需要手动打开下拉菜单并隐藏其切换开关。假设login您使用的模板是{{> loginButtons}}：

Template.login.rendered = function() {
  Accounts._loginButtonsSession.set('dropdownVisible', true);
  $("#login-sign-in-link").hide();
};

注意：这是我之前在几个 Meteor 版本中使用过的技巧，它可能需要针对当前版本进行一些调整。