On this page

替代方案

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

使用 CSS

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

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

jsx

<Menu as="div" className="relative">
  <MenuButton>
    Options
  </MenuButton>

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

直接使用 Floating UI

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