Question

我正在开发一个小型流星应用程序，它使用帐户ui进行用户身份验证。

我添加了无样式的包但我不知道如何使用css设置样式，甚至（如果可能的话）更改帐户ui html。

我该怎么做才能“引导它”，将其包含在导航栏中并根据自己的喜好设计样式？

问候，

JoãoBernardo

Answer 1

如果您想直接进入并更改模板，那么最简单的解决方案就是从您的软件包依赖项中删除帐户 - ui-unstyled，然后将其直接添加到您可以自由编辑的本地软件包目录中

（如果您对ui包附带的任何预制css不感兴趣，您应该使用帐户-ui-unstyled而不是account-ui，但以下步骤适用于这两个包。）

通过这样做，您将失去未来对软件包所做改进的好处，并且您的本地软件包可能会因未来的改进而中断。

首先从命令行删除帐户-ui-unstyled：

meteor remove accounts-ui-unstyled

获取包here的副本，将其重命名并包含在您的本地/包中。然后在命令行上使用meteor add your-package-name或在.meteor / packages中手动使用，你应该有一个本地副本可以自由更改。

如果方便的话，您可以使用现有的css文件放置您创建的新css。样式化与其他任何样式没有什么不同 - 挂钩到它的ID和类等，或者改变它们，因为你现在可以自由地做。

Answer 2

为登录和注册创建您自己的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);

流星帐户ui造型

2 个答案: