为啥我的 React + Tailwind 汉堡菜单没有关闭?
Posted
技术标签:
【中文标题】为啥我的 React + Tailwind 汉堡菜单没有关闭?【英文标题】:Why Is My React + Tailwind Hamburger Menu Not Closing?为什么我的 React + Tailwind 汉堡菜单没有关闭? 【发布时间】:2020-07-08 07:38:06 【问题描述】:我正在使用 React 和 TailwindCSS 构建一个汉堡菜单。单击“X”按钮时,我将状态 isOpen
更改为 false
。包装菜单的div
类对状态变化做出反应,但菜单不会滑出。我在这里错过了什么?
Sidebar.js:
const Sidebar = () =>
const [isOpen, toggleSidebar] = React.useState(true);
return (
<div className="h-screen flex">
<div
className=`fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r overflow-auto lg:static lg:inset-auto lg:translate-x-0 $
isOpen
? "translate-x-0 ease-out transition-medium"
: "-translate-x-full ease-in transition-medium"
`
>
<div className="-mx-3 pl-3 pr-1 flex items-center justify-between">
<span>
<p className="h-10 w-10">Logo</p>
</span>
<button
onClick=() => toggleSidebar(false)
className="text-gray-700 lg:hidden"
>
<svg fill="none" viewBox="0 0 24 24" className="h-6 w-6">
<path
d="M6 18L18 6M6 6L18 18"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke="currentColor"
/>
</svg>
</button>
</div>
<nav className="mt-8">
<h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wide">
STUFF
</h3>
<button className="mt-2 -ml-1 flex items-center text-sm font-medium text-gray-600">
<svg
className="h-5 w-5 text-gray-500"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 7v10m5-5H7"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
<span className="ml-1">Add Stuff</span>
</button>
</nav>
</div>
</div>
);
;
ReactDOM.render(<Sidebar />, document.getElementById("root"));
This 是我的脚本的代码笔,如果有帮助的话:
【问题讨论】:
【参考方案1】:根据 Tailwind 文档,您需要添加 transform
实用程序。https://tailwindcss.com/docs/translate/#usage
首先通过变换启用变换来翻译元素 实用程序,然后使用指定平移方向和距离 translate-x-amount 和 translate-y-amount 实用程序。
所以在类中添加transform
。
className=`
fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r
overflow-auto lg:static lg:inset-auto lg:translate-x-0
?
transform $
isOpen
? "translate-x-0 ease-out transition-medium"
: "-translate-x-full ease-in transition-medium"
`
【讨论】:
谢谢!这解决了它,我已经为此困惑了好几天。我实际上是在关注 Adam Wathan 的一个直播,他似乎没有添加transform
类。也许他正在开发未发布的 Tailwind 版本?
不客气@IA-09GR。我最近也开始了 Tailwind,尽管整体内容有效,但大约 2017~2018 年的一些视频有点不同。所以你可能想经常查看文档:)以上是关于为啥我的 React + Tailwind 汉堡菜单没有关闭?的主要内容,如果未能解决你的问题,请参考以下文章
为啥我的 phongap 应用程序在 android 状态栏中显示一个汉堡包图标?