web-dev-qa-db-fra.com

Comment styliser les boutons de connexion Meteor.js?

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éécrivez un nouveau modèle (comment procéder?)
  • Ajouter des styles à mes fichiers CSS marqués !important
  • Autre?
meteor
33
Swadq

Il s'avère qu'une combinaison des deux idées peut être utilisée. Après avoir plongé dans le package accounts-ui , il s'avère qu'il ne contient qu'un seul .less fichier. Le modèle réel est inclus dans accounts-ui-unstyled , qui est automatiquement inclus lorsque accounts-ui est ajouté à un projet meteor.

Par conséquent, le CSS peut être supprimé comme suit:

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

Vous vous retrouvez alors avec le HTML brut , qui peut être stylisé comme vous le souhaitez.

41
Swadq

La création de vos propres modèles vous donnerait certainement plus de contrôle.

Vous créez un modèle en utilisant la balise "modèle":

<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 l '"id" des boutons de connexion après leur rendu sur une page Web, en utilisant "Inspecter l'élément" sur Chrome, Et utilisez 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;
}
11
Siddharth Gupta

Commander ce screencast EventedMind - Personnalisation de la connexion

6
fraherm

Créez votre propre modèle html similaire à celui ci-dessous. Portez-le à 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 modèle 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);

1
Abk