Skip to content

替代方案

建立 Headless UI Float 的目的,主要是為了可以輕鬆地為 Headless UI 的元件來做定位,並沒有考慮到許多複雜的使用場景,如果發現本套件無法輕鬆達到你的目的,建議可以參考以下方式:

使用 CSS

這可說是最單純的定位方式了,如果只有固定一個方向的話,建議可以直接使用此方式。

以下提供一個 Tailwind CSS 的範例:

html
<Menu as="div" class="relative">
  <MenuButton>
    Options
  </MenuButton>

  <MenuItems class="absolute left-0 mt-2 w-56">
    ...
  </MenuItems>
</Menu>

直接使用 Floating UI

Headless UI Float 就是使用 Floating UI 來做定位,如果你想要實現更為複雜的需求,請直接使用 Floating UI。

Tooltip 替代方案

Headless UI Float 沒有針對 Tooltip 上做過優化,建議使用 Tippy.js / VueTippy 來代替。

Released under the MIT License.