您需要在
<script>body<head><head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
</head>
<body>
<button id="dropdownDefault" data-dropdown-toggle="dropdown" class="inline-flex items-center rounded-lg bg-blue-700 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Dropdown busdatton <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 block w-44 divide-y divide-gray-100 rounded bg-white shadow dark:bg-gray-700" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(327px, 70px, 0px);">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
</body>这里是一个没有库的例子，只有react和tailwind。
const Sidebar = () => {
const [isOpen, setOpen] = useState(false);
const handleDropDown = () => {
setOpen(!isOpen);
};
return (
<div className="dropdown">
<button
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center"
onClick={handleDropDown}
>
Steps
<svg
className="ml-2 w-4 h-4"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<div
id="dropdown"
className={`z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow ${
isOpen ? "block" : "hidden"
}`}
>
<ul className=" z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow ">
<li
>
<a href="#" className="block py-2 px-4 hover:bg-gray-100">
blablabla
</a>
</li>
</ul>
</div>
</div>
);
};
也许你可以添加导入“flowbite”； （反应时） 和其他您可以在标签之前的 Flowbite 上添加脚本
在文件顶部添加
import 'flowbite'