remove - Cómo estilo Meteor.js loginButtons?

meteor user methods

Question

Los documentos especifican que se use la plantilla {{> loginButtons}} para implementar los botones de inicio de sesión predeterminados.

¿Cuál es la mejor manera de aplicar mis propios estilos a esto?

• Reescribir una nueva plantilla (¿cómo se haría esto?)
• Agregar estilos a mis archivos CSS marcados !important
• ¿Otro?

Answer 1

Crear sus propias plantillas definitivamente le daría más control.

Usted crea una plantilla usando la etiqueta "plantilla":

<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
<span class="wins"> {{wins}} </span>
<span class="losses"> {{loss}} </span>
</div>
</template>

O BIEN Puede verificar las "clases" o el "id" de los botones de inicio de sesión después de que se procesen en una página web, usando "Inspeccionar elemento" en Chrome, y use esas clases como selectores de CSS para darles el estilo correspondiente.

Por ejemplo:

HTML:

//The login button has a class of loginButton
<button class="loginButton"> Login! </button>

CSS:

#Then you can Have a style for the login button as:
.loginButton{
width: 100px;
background-color: cyan;
}

Answer 2

Cree su propia plantilla html similar a la siguiente. Ajústelo a su gusto.

meteor add accounts-password accounts-ui

 <template name="login">
<form class="login-form">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-danger btn-lg">Login</button>
</div>
</div>
</form>
</template>

Ahora puede llamar a Meteor.loginWithPassword en el evento de plantilla de esta manera:

Template.login.events({
''submit .login-form'': function(e) {
e.preventDefault();
var email = e.target.email.value;
var password = e.target.password.value;
Meteor.loginWithPassword(email, password,function(error){
if(error) {
//do something if error occurred or
}else{
FlowRouter.go(''/'');
}
});
}
});

Puede crear otro formulario para registrarse también.

Simplemente llame a Accounts.createUser(object, callback);

Answer 3

Resulta que se puede usar una combinación de las dos ideas. Después de profundizar en el paquete accounts-ui , resulta que contiene solo un archivo .less . La plantilla real se incluye en accounts-ui-unstyled , que se incluye automáticamente cuando accounts-ui se agrega a un proyecto de meteor .

Por lo tanto, el CSS se puede eliminar de la siguiente manera:

meteor remove accounts-ui
meteor add accounts-ui-unstyled

A continuación, se queda con el HTML sin procesar , que se puede diseñar como lo desee.

Answer 4

Verifique este screencast EventedMind - Personalizar inicio de sesión