Wie kann ich den LoginButton von Meteor so einstellen, dass er kein DropDown ist?

Question

Ich habe diesen Thread gesehen - How to style Meteor.js loginButtons? - und es beantwortet nicht ganz meine Frage. Ich möchte das LoginButton-Styling behalten, aber mache es einfach nicht zum Dropdown-Menü.

Answer 1

Sie müssen das Dropdown-Menü manuell öffnen und den Schalter ausblenden. Unter der Annahme, login wird die Vorlage, in der Sie {{> loginButtons}} verwenden:

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

Hinweis: Dies ist der Trick, den ich für dass mehrere Meteor-Versionen vor verwendet haben, könnte es einige Optimierungen müssen für die aktuelle Version.

Answer 2

Gute Frage Charlie!

war ich nicht in der Lage Accounts._loginButtonsSession.set('dropdownVisible', true); zu bekommen für mich zu arbeiten, also musste ich über CSS außer Kraft zu setzen (dies ist Meteor 0.8 mit Bootstrap-3 und Konten-ui-Bootstrap-3):

Zuerst Ich habe eine ID als Wrapper um loginButtons:

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

Dann habe ich das meinem 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; 
} 

Weil wir die {{> loginButtons}} in einer ID-Wrapper und overr gewickelt Ide das CSS für dass, die normale Funktionalität von {{> loginButtons}} bleibt erhalten, also wenn Sie {{> loginButtons}} wieder woanders auf der Seite ohne den ID-Wrapper verwenden, bleibt die normale Dropdown-Funktionalität erhalten.

Answer 3

Hier ist, was ich mit für eine Responsive Design kam, basierend auf fuzzybabybunny Antwort:

/* 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 4

Was ich getan habe ist meine Vorlage (ähnlich wie das Original ui Paketvorlage), aber nicht mit dem Drop-down erstellen da drin. Dann ersetzen Sie ihre Vorlage durch meine. Dies scheint die klarere Lösung zu sein. In Kürze: 1. install https://github.com/aldeed/meteor-template-extension 2. Erstellen Sie Ihre Vorlage, um die Originalvorlage zu ersetzen. Wie:

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

3. ersetzen die ursprüngliche Vorlage, mit ihrem. In Ihrem clientseitigen Java-Code-Aufruf:

   Template.My_loginButtonsLoggedOutDropdown.replaces ("_ loginButtonsLoggedOutDropdown");

Einige hier weitere Details: http://www.chaosstuff.com/2015/01/meteor-accounts-with-custom-login-form.html

Answer 5

Arbeiten in Meteor 1.1.0.2

ich mit anderen Antworten inspiriert und aktualisieren Sie es

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

Mein Stil es in den Mittelpunkt zu stellen (horisontaly)

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

Und Helfer

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

note : "close" wird nicht ausgeblendet, wenn Sie rechts in die "/ login" Route einsteigen, von der aus Sie navigieren müssen eine andere Route.