Tôi đã xem chủ đề này - How to style Meteor.js loginButtons? - và nó không hoàn toàn trả lời câu hỏi của tôi. Tôi muốn giữ kiểu loginButton, nhưng đơn giản là không làm cho nó rơi xuống.Làm cách nào để tạo kiểu đăng nhập của MeteorButton không phải là một trình đơn thả xuống?
Bạn cần mở thủ công menu thả xuống và ẩn nút chuyển đổi. Giả sử login là mẫu mà bạn sử dụng {{> loginButtons}}:
Template.login.rendered = function() {
Accounts._loginButtonsSession.set('dropdownVisible', true);
$("#login-sign-in-link").hide();
};
Lưu ý: Đây là thủ thuật tôi đã sử dụng cho rằng một số phiên bản Meteor trước, nó có thể cần một số điều chỉnh cho phiên bản hiện tại.
Câu hỏi hay đấy Charlie!
tôi đã không thể có được Accounts._loginButtonsSession.set('dropdownVisible', true); làm việc đối với tôi, vì vậy tôi đã phải ghi đè lên thông qua CSS (đây là Meteor 0.8 với bootstrap-3 và các tài khoản-ui-bootstrap-3):
Đầu tiên tôi đặt ID như là một wrapper quanh loginButtons:
<div id="login-screen">
{{> loginButtons}}
</div>
Sau đó, tôi thêm này để CSS của tôi:
/* The login menu has to be set at a specific height and I chose to center mine. */
#login-screen .dropdown-menu {
display: block;
position: relative;
height: 245px;
margin-left: auto;
margin-right: auto;
float: none;
}
#login-screen #login-dropdown-list {
display: block;
}
/* Hides the toggle that you click on */
#login-screen a.dropdown-toggle {
display: none;
}
Bởi vì chúng tôi quấn {{> loginButtons}} trong một wrapper ID và overr ide CSS cho rằng, chức năng bình thường của {{> loginButtons}} được giữ nguyên, vì vậy nếu bạn sử dụng lại {{> loginButtons}} ở một nơi khác trên trang mà không có trình bao bọc ID, chức năng thả xuống bình thường sẽ được giữ nguyên.
Đây là những gì tôi đã đưa ra cho một thiết kế đáp ứng, dựa trên câu trả lời fuzzybabybunny của:
/* Truncate the username */
#login-screen #login-dropdown-list .dropdown-toggle, .user-display-name {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Full-width buttons */
#login-screen .btn {
width: 100%;
}
/* Half-width "Forgot password" and "Create account" links */
#login_screen #forgot-password-link {
width: 49%;
white-space: normal;
}
#login_screen #signup-link {
width: 49%;
white-space: normal;
text-align: right;
}
/* Remove shadow. Make width and height dynamic */
#login_screen .dropdown-menu {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
float: none;
box-shadow: none;
-webkit-box-shadow: none;
min-width: 0px;
width: 100%;
overflow: auto;
}
#login_screen #login-dropdown-list {
display: block;
}
#login_screen a.dropdown-toggle {
display: none;
}
Những gì tôi đã làm là để tạo ra mẫu của tôi (tương tự với bản gốc mẫu gói ui) nhưng không có quyền thả xuống trong đó. Sau đó thay thế mẫu của họ bằng mẫu của tôi. Điều này có vẻ là giải pháp rõ ràng hơn. Tóm tắt: 1. cài đặt https://github.com/aldeed/meteor-template-extension 2. tạo mẫu của bạn để thay thế mẫu gốc. Giống như:
<template name="My_loginButtonsLoggedOutDropdown">
<div class='container'>
<section class='panel'>
<header class="panel-heading">
<strong>Welcome</strong>
</header>
{{> _loginButtonsLoggedOutAllServices}}
</section>
</div>
</template>
thay thế các mẫu ban đầu với một bạn. Trong cuộc gọi mã java phía khách hàng của bạn:
Mẫu.My_loginButtonsLoggedOutDropdown.replaces ("_ loginButtonsLoggedOutDropdown");
Một số chi tiết ở đây: http://www.chaosstuff.com/2015/01/meteor-accounts-with-custom-login-form.html
trình trong Meteor 1.1.0.2
Tôi lấy cảm hứng với người khác câu trả lời và cập nhật nó
<div id="login-screen">
{{> loginButtons}}
</div>
phong cách của tôi để đặt nó ở trung tâm (horisontaly)
#login-screen{
display: block;
margin: 5px auto;
width: 226px;
height: 240px;
Và trong những người giúp đỡ
Template.login.rendered = function(){
Accounts._loginButtonsSession.set('dropdownVisible', true);
$(".login-close-text").hide();
}
lưu ý : "đóng" không ẩn khi bạn nhập ngay vào "/ đăng nhập" tuyến đường, để làm việc bạn phải điều hướng từ tuyến đường khác.