Can't get $float() example working

buddhaCode commented 6 months ago

Hi, I'm just trying to get the example with the $float() magic working. I would expect the "I'm floating" element to be hidden by default. While the visibility will be toggled with the button. Do I miss something?

Best, Arne

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@awcodes/alpine-floating-ui@3.x.x/dist/cdn.min.js" defer></script>
    <script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
    <div class="component" x-data>
      <button @click="$float()">I have a floating panel. Woot!</button>
      <div x-ref="panel" class="panel">I'm floating</div>
    </div>
  </body>
</html>

awcodes commented 6 months ago

you have to hide the panel by default with css or the x-cloak directive.

buddhaCode commented 6 months ago

I see. Thank you.

But with the x-float directive a style="display: none;" is applied by default, isn't it?

awcodes commented 6 months ago

Possibly, I'd have to check. Feel free to PR it for $float. :)

awcodes / alpine-floating-ui

Can't get $float() example working #8