Comment le style Meteor.js loginButtons?
Les documents spécifient d'utiliser le modèle {{> loginButtons}} pour implémenter les boutons de connexion par défaut.
Quelle est la meilleure façon d'appliquer mes propres styles à cela?
- réécrire un nouveau modèle (comment cela serait-il fait?)
- Ajouter des styles à mes fichiers CSS marqués
!important - autres?
4 réponses
Il s'avère qu'une combinaison des deux idées peut être utilisée. Après avoir fouillé dans le package accounts-ui , il s'avère qu'il ne contient qu'un seul fichier .less. Le modèle réel est inclus dans comptes-ui-non stylé, qui est automatiquement inclus dans accounts-ui est ajouté à un meteor projet.
Par conséquent, le CSS peut être supprimé comme suit:
meteor remove accounts-ui
meteor add accounts-ui-unstyled
Vous êtes alors laissé avec le HTML brut , qui peut être stylé comme vous le souhaitez.
Créer vos propres modèles vous donnerait certainement plus de contrôle.
Vous créez un modèle en utilisant la balise "template":
<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>
Ou Vous pouvez vérifier les "classes" ou "id "des boutons de connexion après leur rendu sur une page Web, en utilisant" Inspect Element " sur Chrome, et utiliser ces classes comme sélecteurs CSS pour les styliser en conséquence.
Par exemple:
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;
}
Commander ce screencast EventedMind - personnalisation de connexion
Créez votre propre modèle html similaire à celui ci-dessous. Style à votre goût.
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>
Vous pouvez maintenant appeler Meteor.loginWithPassword dans l'événement template comme ceci:
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('/');
}
});
}
});
Vous pouvez également créer un autre formulaire d'inscription.
Appelez simplement Accounts.createUser(object, callback);