meteor - 如何设置 Meteor.js 登录按钮的样式？

Question

文档指定使用模板{{> loginButtons}}来实现默认登录按钮。

将我自己的样式应用于此的最佳方法是什么？

• 重写一个新模板（这将如何完成？）
• 将样式添加到标记为我的 CSS 文件!important
• 其他？

Answer 1

事实证明，可以使用这两种想法的组合。在深入研究accounts-ui 包后，发现它只包含一个.less文件。实际模板包含在accounts-ui-unstyledaccounts-ui中，添加到meteor项目时会自动包含该模板。

因此，可以按如下方式删除 CSS：

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

然后留下原始的 HTML，可以根据您的选择对其进行样式设置。

Answer 2

创建自己的模板肯定会给您更多的控制权。

您可以使用“模板”标签创建模板：

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

或者您可以在登录按钮在网页上呈现后检查它们的“类”或“id”，使用 Chrome 上的“检查元素”，并将这些类用作 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;
}

Answer 3

查看此截屏视频EventedMind - 自定义登录

Answer 4

创建您自己的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);