ساخت dropdown با tailwind

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full px-4 py-2 text-left text-sm" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

سلام این کد اماده dropdown هستش وقتی توی وی اس کد اجرا میکنم کار نمیکنه منظورش از قسمت کامن چیه ؟

html_css tailwind فریمورک_Tailwind_CSS tailwindcss

farshad

3 سال پیش@fasrshaddggdf3FFF

ثبت پرسش جدید

پاسخ‌ها

ابوالفضل

@amata3 سال پیش مطرح شد

تخصص: برنامه نويس

کدو اجرا کردم برام مشکلی نداشت
فقط اینکه شما بدون js چطور میخوای این کار کنه؟

ارسال پاسخ

مهدی نظری

@mahdi.nazari3 سال پیش مطرح شد

تخصص: توسعه دهنده Front End

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

این کدهایی که برداشتی از سایت خود تیلوینده و از کتابخونه headles باید پکش رو بخری و استفاده کنی توی پروژه

جایگزین این دراپ داون رو میتونی با این کد و یه مقداری css هندل کنی

<div class="p-10">

  <div class="dropdown inline-block relative">
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
      <li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
      <li class=""><a class="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Three is the magic number</a></li>
    </ul>
  </div>

</div>

css

.dropdown:hover .dropdown-menu {
  display: block;
}

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹

ارسال پاسخ

شاید پاسخ شما همین‌جا باشد

@fasrshaddggdf3FFF3 سال پیش مطرح شد

تخصص: برنامه نویس

مشکلم همینه چجوری میتونم js رو به تیلویند اضافه کنم؟

ارسال پاسخ

مهدی نظری

@mahdi.nazari3 سال پیش مطرح شد

تخصص: توسعه دهنده Front End

فقط لازمه که طبق داکیومنت تیلویند پیش بری
https://tailwindcss.com/docs/installation

یا قبلش یه ویدیو آموزش tailwindcss instalation رو توی یوتیوب حداقل ببینی که یاد بگیری چطوری کانفیگ میشه فرشاد جان

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

ساخت dropdown با tailwind

پاسخ‌ها

گفتگوهای مرتبط

ساخت منوی سایت فروشگاه در لاراول 8

ایجاد منوی های تو در تو آبشاری و مدیریت آنها همانند وردپرس

ساخت فرم پیشرفته در ریکت

ساخت ارشیو مطالب برای بلاگ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید