web-dev-qa-db-ja.com

Meteor.js loginButtonsをスタイルする方法は？

ドキュメントでは、テンプレート{{> loginButtons}}を使用してデフォルトのログインボタンを実装するように指定しています。

これに自分のスタイルを適用する最良の方法は何ですか？

  • 新しいテンプレートを書き換えます（これはどのように行われますか？）
  • !importantとマークされたCSSファイルにスタイルを追加します
  • その他？
meteor
32
Swadq

2つのアイデアを組み合わせて使用​​できることがわかりました。 accounts-uiパッケージ を詳しく調べたところ、_.lessファイル。実際のテンプレートは accounts-ui-unstyled に含まれており、accounts-uiがmeteorプロジェクトに追加されます。

したがって、CSSは次のように削除できます。

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

その後、 生のHTML が残ります。これは、選択に応じてスタイル設定できます。

41
Swadq

独自のテンプレートを作成することで、確実に制御できるようになります。

「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>

[〜＃〜] or [〜＃〜]ログインボタンの「クラス」または「id」は、Chromeの「Inspect Element」を使用してWebページに表示された後に確認できます。そして、それらのクラスをCSSセレクターとして使用して、それに応じてスタイルを設定します。

例えば：

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

このスクリーンキャストをご覧ください EventedMind-ログインのカスタマイズ

6
fraherm

以下のような独自のhtmlテンプレートを作成します。あなたの好みに合わせてスタイルを整えてください。

_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>
_

テンプレートイベントで_Meteor.loginWithPassword_を次のように呼び出すことができます。

_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('/');
            }
        });
     }
 });
_

登録用に別のフォームを作成することもできます。

Accounts.createUser(object, callback);を呼び出すだけです

1
Abk