Meteor Zurb基金会5和流星在TopBar菜单中的显示信号模式
我正在使用Meteor JS（1.2版）进行一个项目，使用for用户注册/登录Meteor Zurb基金会5和流星在TopBar菜单中的显示信号模式,meteor,navigation,zurb-foundation,zurb-foundation-5,accounts,Meteor,Navigation,Zurb Foundation,Zurb Foundation 5,Accounts,我正在使用Meteor JS（1.2版）进行一个项目，使用for用户注册/登录 我正在使用，或者至少尝试使用-Zurb基金会5（版本5.3）作为我的Pyjkt。我测试了和，两者都很好 对于帐户，我添加了 在页面上使用也很好。登录/注册表单显示正确 但在固定顶部导航栏中使用它是行不通的。它显示不正确。（请参阅下面的图片和来源。） 我在控制台中没有发现任何错误，说明某些内容加载不正确 我假设useraccounts:foundation包在导航栏中显示一个按钮/链接，然后用登录表单显示一个模式/弹出
我正在使用，或者至少尝试使用-Zurb基金会5（版本5.3）作为我的Pyjkt。我测试了和，两者都很好
对于帐户，我添加了 在页面上使用也很好。登录/注册表单显示正确 但在固定顶部导航栏中使用它是行不通的。它显示不正确。（请参阅下面的图片和来源。） 我在控制台中没有发现任何错误，说明某些内容加载不正确 我假设useraccounts:foundation包在导航栏中显示一个按钮/链接，然后用登录表单显示一个模式/弹出窗口 我的问题：是否有任何软件包损坏，或者我是否以任何方式错误地使用了它们 或者我的假设，useraccounts:foundation包应该在导航栏中显示带有模态的登录表单，这是错误的吗？如果是这样，我需要做什么才能在我的应用程序中获得所需的行为 应用程序在页面中正确显示登录表单，但在导航栏中显示错误 在移动视图中 ... 它的显示也不正确 我做了一个没有任何路由器的简单项目来测试上述软件包，来源如下： project/client/main.html<head>
<title>ZF5 Demo</title>
</head>
<body>
{{> header}}
{{> content}}
</body>
<template name="header">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1><a href="#">ZF5 Demo</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section style="left: 0%;" class="top-bar-section">
<ul class="right">
<li><a href="#">Home</a></li>
<li>{{> atForm}}</li>
</ul>
</section>
</nav>
</template>
Template.header.rendered = function () {
$(document).foundation('reflow');
}
<template name="content">
<section class="row">
<div class="large-12 columns">
<div class="panel">
<h1>Content</h1>
{{> atForm}}
</div>
</div>
</section>
</template>
内容
{{>atForm}
-
-
登录
电子邮件
密码
登录
你没有账户吗？
[…内容…]
<template name="header">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1><a href="#">ZF5 Demo</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section style="left: 0%;" class="top-bar-section">
<ul class="right">
<li><a href="#">Home</a></li>
<li>
<a data-dropdown="signin-dropdown" aria-controls="signin-dropdown" aria-expanded="false">Sign In</a>
<div id="signin-dropdown" data-dropdown-content class="f-dropdown content" aria-hidden="true">
<div>
{{> atForm}}
</div>
</div>
</li>
</ul>
</section>
</nav>
</template>
-
-
现在菜单按钮看起来更好了
。。。但登录表单呈现不正确
我还尝试了其他几种方法，但都没有成功
我认为这只是我使用基金会的一个问题，因为我对这个框架很陌生，不理解每个细节。
因此，我将继续使用如图所示的SignIn模式表单。这不仅仅是css问题吗？我不知道。我假设{{>atForm}}模板将登录表单呈现为打开模式/下拉列表的按钮。也许这只是一个CSS/HTML问题，我需要用一些标签包装表单？但我不确定该用哪一种。我还尝试将其包装为下拉列表，但它也不起作用。我将用这个结果更新我的问题。
<template name="header">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1><a href="#">ZF5 Demo</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section style="left: 0%;" class="top-bar-section">
<ul class="right">
<li><a href="#">Home</a></li>
<li>
<a data-dropdown="signin-dropdown" aria-controls="signin-dropdown" aria-expanded="false">Sign In</a>
<div id="signin-dropdown" data-dropdown-content class="f-dropdown content" aria-hidden="true">
<div>
{{> atForm}}
</div>
</div>
</li>
</ul>
</section>
</nav>
</template>