Question

我见过这个帖子 - How to style Meteor.js loginButtons? - 它并没有完全回答我的问题。我想保留loginButton样式，但不要将其作为下拉列表。

Answer 1

好问题查理！

我无法让Accounts._loginButtonsSession.set('dropdownVisible', true);为我工作，所以我不得不通过CSS覆盖（这是Meteor 0.8 with bootstrap-3 and accounts-ui-bootstrap-3）：

首先，我将一个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}}的正常功能，因此如果您使用{{1}再次在没有ID包装器的页面上的其他地方，保留了正常的下拉功能。

Answer 2

我所做的是创建我的模板（类似于原始的ui包模板），但没有在那里下拉。然后用我的模板替换他们的模板。这似乎是更清晰的解决方案。简而言之： 1.安装https://github.com/aldeed/meteor-template-extension 2.创建模板以替换原始模板。像：

<template name="My_loginButtonsLoggedOutDropdown">
    <div class='container'>
    <section class='panel'>
        <header class="panel-heading">
            <strong>Welcome</strong> 
        </header>
        {{> _loginButtonsLoggedOutAllServices}}
    </section>
    </div>
</template>

用您的模板替换原始模板。在客户端java代码调用：

Template.My_loginButtonsLoggedOutDropdown.replaces（ “_ loginButtonsLoggedOutDropdown”）;

这里有更多细节： http://www.chaosstuff.com/2015/01/meteor-accounts-with-custom-login-form.html

Answer 3

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

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

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

Answer 4

基于fuzzybabybunny的回答，这就是我想出的响应式设计：

/* Truncate the username */    
#login-screen #login-dropdown-list .dropdown-toggle, .user-display-name {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full-width buttons */
#login-screen .btn {
    width: 100%;
}

/* Half-width "Forgot password" and "Create account" links */
#login_screen #forgot-password-link {
    width: 49%;
    white-space: normal;
}

#login_screen #signup-link {
    width: 49%;
    white-space: normal;
    text-align: right;
}

/* Remove shadow. Make width and height dynamic */
#login_screen .dropdown-menu {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    min-width: 0px;
    width: 100%;
    overflow: auto;
}

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

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

Answer 5

适用于 Meteor 1.1.0.2

我启发了其他人的答案并更新了

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

我的风格把它放在中心（horisontaly）

#login-screen{
    display: block;
    margin: 5px auto;
    width: 226px;
    height: 240px;

在佣人中

Template.login.rendered = function(){
    Accounts._loginButtonsSession.set('dropdownVisible', true);
    $(".login-close-text").hide();      
}

注意：＆＃34;关闭＆＃34;当你进入＆＃34; / login＆＃34;时，我不会隐藏路线，工作你必须从另一条路线导航。

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

5 个答案: