javascript - Meteor アカウント - ログインフォームは HTML を変更し、ドロップダウン JS を削除します

Question

すべての accounts-ui ロジックを書き直さずにレンダリングされるクラスと html タグを変更するには、Meteor の Accounts-ui を変更するにはどうすればよいですか? たとえば、「ドロップダウン」動作を削除して、フォームをページに直接表示したいと思います。この回答を読みましたが、詳細には触れていません。デフォルトの CSS を削除するだけです。もう少し深入りしたい..

Answer 1

私は別の答えのためにこれを考え出しましたが、あなたが望むものを手に入れるためのより速い方法のように思えるので、ここに入れたいと思いました.

Template.login.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};

(Template.login は Template. yourTemplateWithLoginButtonsである必要があります)

Answer 2

スタイリング

削除する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

より多くのカスタマイズ

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

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

Answer 3

ドロップダウン動作を削除するだけの場合は、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