快速開始

Headless UI Float 是一個可以輕鬆在 Headless UI 中定位浮動元素的套件，使用 Floating UI (新版 Popper.js) 來做定位。

提示

Headless UI 已發布了 2.0 版 (目前僅適用於 React)，內建 Floating UI 的定位功能，因此不再需要使用這個套件了。

您可以參考 Headless UI Menu 範例 來搭配 Transition 和 Menu 或其他元件的使用方式。

線上範例

可以在 StackBlitz 上試用 Headless UI Float：

• React
• React + TS

安裝

套件相依於 React v18、React DOM 和 @headlessui/react v1，記得需要先安裝好。

npm

npm i @headlessui-float/react

yarn

yarn add @headlessui-float/react

pnpm

pnpm add @headlessui-float/react

開始使用

先去找一個需要自動定位元素位置的 Headless UI 元件，比如這裡用 <Menu> 元件來示範。引入 <Float> 元件：

import { Float } from '@headlessui-float/react'

然後在 <Menu.Button> 和 <Menu.Items> 外包一層 <Float>：

<Menu>
  <Float>
    <Menu.Button className="...">
      Options
    </Menu.Button>

    <Menu.Items className="...">
      ...
    </Menu.Items>
  </Float>
</Menu>

需要注意，<Float> 必須包含2個子元素，第1個是參考元素，第2個是浮動元素。可以使用 Headless UI 元件或 HTML 元素。

提示

如果要使用 HTML 元素，或手動控制 Headless UI 元件的顯示，請參考 顯示/隱藏。

然後刪除掉 <Menu.Items> 的 absolute、right-0 等定位 class，並加上 placement="bottom-end" 屬性：

<Menu>
  <Float placement="bottom-end">
    ...
  </Float>
</Menu>

刪除掉 <Menu.Items> 的 mt-2 class，並加上 offset={4} 屬性：

<Menu>
  <Float placement="bottom-end" offset={4}>
    ...
  </Float>
</Menu>

然後 <Menu> 就可以自動定位內部的 <Menu.Items> 元件了。

除了 <Menu> 之外，同樣也可以用在 <Listbox>、<Popover> 或 <Combobox> 元件上，你可以使用 <Float> 在任何需要浮動定位的元素上。