英文:
Conditional Position Property of Navbar Component not Working in Tailwind
问题
我正在尝试根据变量的值是true还是false来显示和隐藏导航栏。我能够实现导航栏的显示/隐藏，但当我尝试将导航栏设置为在大屏幕断点下始终显示时，出现问题。
换句话说，我希望导航栏在大屏幕断点及以上始终显示，即使控制导航栏的变量设置为false也是如此。然而，这并没有发生。我无法弄清楚我的代码有什么问题。有人可以帮帮我吗？
我的代码如下：
<div className={`lg:!relative z-50 ${showNavBar ? "absolute" : "hidden"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
请注意，我保留了您的代码中的代码部分，只翻译了注释和问题描述。
英文:
I am trying to show and hide a navbar based on whether a variable is set to true or false. I am able to get the Navbar to show/hide however, my problem happens when I try to set the Navbar to always show at the large breakpoint.
In other words, I want the navbar to be constantly showing at the large breakpoint and above even if the variable controlling the navbar is set to false. However, this does not happen. I can't figure out what is wrong with my code. Can someone please help me?
My code is here:
<div className={`lg:!relative z-50 ${showNavBar ? "absolute" : "hidden"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
答案1
得分: 0
你需要使用display工具来覆盖hidden在showNavBar为假时应用的display: none：
function Navbar() {
return (
<React.Fragment>
Foo
</React.Fragment>
);
}
const showNavBar = false;
const handleNavBar = null;
ReactDOM.createRoot(document.getElementById('app')).render(
<div className={`lg:!relative lg:block z-50 ${showNavBar ? "absolute" : "hidden"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div id="app"></div>
英文:
You need to override the display: none applied by hidden when showNavBar is falsy by using a display utility, like block for display: block:
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
function Navbar() {
return (
<React.Fragment>
Foo
</React.Fragment>
);
}
const showNavBar = false;
const handleNavBar = null;
ReactDOM.createRoot(document.getElementById('app')).render(
<div className={`lg:!relative lg:block z-50 ${showNavBar ? "absolute" : "hidden"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div id="app"></div>
<!-- end snippet -->
答案2
得分: 0
你可以在方括号内的变量前加上 "max-lg"，这样它们只会在大屏幕断点以下生效：
<div class={`lg:absolute ${showNavBar ? "max-lg:hidden" : "max-lg:absolute"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
英文:
You can prefix the variables inside the brackets with "max-lg" so they only apply below the large breakpoint:
<div class={`lg:absolute ${showNavBar ? "max-lg:hidden" : "max-lg:absolute"} `}>
<Navbar showNavBar={showNavBar} handleNavBar={handleNavBar} />
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论