farshad

8 ماه پیش توسط farshad مطرح شد

ساخت 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 هستش وقتی توی وی اس کد اجرا میکنم کار نمیکنه منظورش از قسمت کامن چیه ؟

ثبت پرسش جدید

ابوالفضل

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

@amata 8 ماه پیش مطرح شد

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

ارسال پاسخ

مهدی نظری

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

@mahdi.nazari 8 ماه پیش مطرح شد

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

این کدهایی که برداشتی از سایت خود تیلوینده و از کتابخونه 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;
}

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

ارسال پاسخ

farshad

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

@fasrshaddggdf3FFF 8 ماه پیش مطرح شد

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

ارسال پاسخ

مهدی نظری

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

@mahdi.nazari 8 ماه پیش مطرح شد

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

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

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

ساخت dropdown با tailwind

گزینش سوالات

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

دسته ‌بندی سوالات

تگ‌های محبوب

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