如何修改流星的帳戶-UI更改類和HTML標記呈現而不重新編寫所有帳戶 - UI邏輯? 例如,我想刪除「dropdown」行爲,並直接在我的頁面中顯示錶單。 我讀this answer但它沒有詳細說明 - 它只是刪除默認的CSS。我想去深一點..流星帳戶 - 登錄表單更改HTML刪除下拉JS
回答
造型
刪除accounts-ui
meteor remove accounts-ui
添加accounts-ui-unstyled
& less
meteor add accounts-ui-unstyled
meteor add less
最後,下面的文件添加到您的項目目錄&編輯i噸至您的觀賞樂趣
https://github.com/meteor/meteor/blob/master/packages/accounts-ui/login_buttons.less
更多定製
您可以編輯帳戶-ui包和編輯HTML & JS不用從頭開始:
取出accounts-ui-unstyled
包,並添加將下面目錄中的內容(除package.js & accounts_ui_tests.js)添加到項目的client
目錄中,添加accounts-urls
並編輯它根據您的規格進行微調。
https://github.com/meteor/meteor/tree/master/packages/accounts-ui-unstyled
直到流星給了我們一個方法來指定加載順序
重命名下列文件,以便他們以正確的順序
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
我得到了一堆錯誤.. – 2013-03-17 07:46:59
Deps重新計算的異常:TypeError:無法調用未定義的方法'get' Object.Template._loginButtonsLoggedInDropdown.dropdownVisible – 2013-03-17 07:54:18
Uncaught TypeError:無法調用未定義的方法'get'login_buttons_dialogs.js:73 Template._resetPasswordDialog.inResetPasswordFlow – 2013-03-17 07:54:39
加載如果你想要做的是刪除下拉行爲,那麼只需添加accounts-ui-unstyled
包並隱藏不想看到的組件即可:例如:
.login-link-text { display: none; }
在您的CSS隱藏登錄鏈接。
這裏有你看看造型相關的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
這對於更改下拉行爲並不是很有幫助,因爲樣式和未設置的UI包動態添加下拉菜單的數據,而不是僅顯示和隱藏在適當的時刻。 – 2013-08-07 00:34:52
我想通了這一點另一個答案,但以爲我把它放在這裏,因爲它似乎是一個快速致富你想要什麼。
Template.login.rendered = function()
{
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
(Template.login應該是模板。yourTemplateWithLoginButtons)
不錯!快速和骯髒! – Squirrl 2015-09-02 06:19:37
創建類似下面這樣自己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);
您是否看到此主題? http://stackoverflow.com/questions/14621384/meteorjs-login-buttons-without-a-dropdown/14627328#14627328 – shinank 2013-03-16 11:09:33
我做了,沒有幫助。我相信這已經過時了。另外,他正在做github認證,我想做本地.. – 2013-03-16 13:12:12