小编M7m*_*Dev的帖子

Tailwindcss 显示/隐藏过渡

我正在制作一个反应应用程序tailwindcss,我想制作一个隐藏的移动导航栏,当用户单击该图标时它就会出现。

所以我想在菜单出现时进行转换。

我用:

  • 反应
  • 顺风CSS
  • 海德莱苏伊

我的代码:

移动菜单.js:

function MobileMenu() {
  return (
    <div className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700">
      <div className="flex items-center mb-3 pb-3 border-b border-slate-700">
        <img
          src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg"
          className="rounded-full w-8 h-8 cursor-pointer"
        />
        <h6 className="ml-5 cursor-pointer">Elon Musk</h6>
      </div>
      <div className="mobile-nav-icon">
        <ImHome size={20} />
        <h4 className="ml-5">Home</h4>
      </div>
      <div className="mobile-nav-icon">
        <HiUsers size={20} />
        <h4 className="ml-5">Friends</h4>
      </div>
      <div className="mobile-nav-icon">
        <CgProfile size={20} />
        <h4 className="ml-5">My Profile</h4>
      </div>
    </div>
  );
}

export default MobileMenu;
Run Code Online (Sandbox Code Playgroud)

我如何在 Navbar.js 中显示它:

function …
Run Code Online (Sandbox Code Playgroud)

javascript css reactjs tailwind-css headless-ui

12
推荐指数
1
解决办法
3万
查看次数

标签 统计

css ×1

headless-ui ×1

javascript ×1

reactjs ×1

tailwind-css ×1