如何修改Meteor的Accounts-ui来改变类和呈现的html标签而不重写所有的Accounts-ui逻辑?例如，我想删除"下拉"的行为，只是在我的页面直接显示表单。我读了这个答案，但它没有详细说明-它只是删除了默认的CSS。我想再深入一点……
我想出了另一个答案，但我认为我把它放在这里，因为它似乎是一个更快的方式来得到你想要的。
Template.login.rendered = function()
{
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
(模板。login应该是Template.yourTemplateWithLoginButtons)
样式
删除accounts-ui
meteor remove accounts-ui
添加accounts-ui-unstyled &less
meteor add accounts-ui-unstyled
meteor add less
最后，将以下文件添加到您的项目目录&编辑到你的观看乐趣
https://github.com/meteor/meteor/blob/master/packages/accounts-ui/login_buttons.less<更多定制/strong>
你可以编辑accounts-ui包和html &
删除accounts-ui-unstyled包并添加以下目录中的内容(除了package.js &accounts_ui_tests.js)到项目的client目录，添加accounts-urls并编辑它以微调到您的规范。
直到meteor提供了一种指定加载顺序的方法
重命名以下文件，以便它们以正确的顺序加载
1accounts_ui.js
2login_buttons.html
3login_buttons_single.html
4login_buttons_dropdown.html
5login_buttons_dialogs.html
6login_buttons_session.js
7login_buttons.js
8login_buttons_single.js
9login_buttons_dropdown.js
login_buttons_dialogs.js
如果你想做的只是删除下拉行为，那么它将足以添加accounts-ui-unstyled包和隐藏组件，你不希望可见:例如:
.login-link-text { display: none; }
隐藏Sign in链接。
这里是相关的id和类，您可以查看样式:
#forgot-password-link
#login-buttons
#login-buttons-password
#login-dropdown-list
#login-email
#login-email-label
#login-email-label-and-input
#login-password
#login-password-label
#login-password-label-and-input
#login-sign-in-link
#signup-link
.accounts-dialog
.additional-link
.additional-link-container
.login-button
.login-button-form-submit
.login-buttons-dropdown-align-left
.login-close-text-clear
.login-close-textClose
.login-form
.login-form-sign-in
.login-link-and-dropdown-list
.login-link-text
.login-password-form
创建您自己的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);
这个答案来得有点晚，但可能会有所帮助。
创建您自己的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);