Does preline internal use javascript to implement dropdown? #435
-
hs-dropdown-toggle triggers the dropdown. <div class="hs-dropdown relative inline-flex">
<button id="hs-dropdown-how-it-works" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
Actions
<svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-dropdown-how-it-works">
<!-- ... -->
</div>
</div> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Hi, It adds the It also creates a Popper instance which controls the placement etc. You can see the preline/src/plugins/dropdown/index.ts Line 173 in 3f8c2fc Are you struggling with something in particular? |
Beta Was this translation helpful? Give feedback.
Hi,
It adds the
open
class to the original element.hs-dropdown
, and then removeshidden
from the menu.hs-dropdown-menu
and addsblock
.It also creates a Popper instance which controls the placement etc.
You can see the
open()
method implementation here:preline/src/plugins/dropdown/index.ts
Line 173 in 3f8c2fc
Are you struggling with something in particular?