Floating UI 選項

placement

浮動定位方向：

<Float placement="left-start">

Floating UI 裡 placement 的 12 個值都可以使用：

• top
• top-start
• top-end
• right
• right-start
• right-end
• bottom
• bottom-start
• bottom-end
• left
• left-start
• left-end

strategy

CSS position 屬性，absolute 或 fixed：

<Float strategy="fixed">

offset

浮動元素離參考元素的偏移量 (px)：

<Float offset={8}>

提示

更多 offset 支援的輸入選項，請參考 Floating UI 的 offset 說明：https://floating-ui.com/docs/offset

shift

將超出界線的參考元素，偏移回至視圖內：

<Float shift>

設定浮動元素離視圖邊界的偏移量 (px)：

<Float shift={8}>

提示

更多 shift 支援的輸入選項，請參考 Floating UI 的 shift 說明：https://floating-ui.com/docs/shift

flip

浮動元素超出邊界時，翻轉至不同的方向，預設為對面，確保可以在視圖中看到：

注意

flip 不能和 autoPlacement 同時設定。

<Float flip>

設定翻轉時浮動元素最少離視圖邊界的距離 (px)：

<Float flip={10}>

提示

更多 flip 支援的輸入選項，請參考 Floating UI 的 flip 說明：https://floating-ui.com/docs/flip

autoPlacement

浮動元素自動選擇剩餘空間最多的方向：

注意

autoPlacement 不能和 flip 同時設定。

<Float autoPlacement>

提示

更多 autoPlacement 支援的輸入選項，請參考 Floating UI 的 autoPlacement 說明：https://floating-ui.com/docs/autoPlacement

hide v0.13+

當無法看到參考元素時，會套用 referenceHiddenClass 的 class，可以增加 invisible 來達到隱藏浮動元素的效果：

<Float
  hide
  referenceHiddenClass="invisible"
>

也可以使用另一種策略，是當無法看到浮動元素時，會套用 escapedClass 的 class：

<Float
  hide={{ strategy: 'escaped' }}
  escapedClass="opacity-50"
>

當要同時使用兩種策略的時候，可以傳入陣列：

<Float
  hide={[{}, { strategy: 'escaped' }]}
>

提示

更多 hide 支援的輸入選項，請參考 Floating UI 的 hide 說明：https://floating-ui.com/docs/hide

autoUpdate

自動在需要的時候更新浮動元素，預設值為 true。可以設為 false 把它關閉：

<Float autoUpdate={false}>

提示

更多 autoUpdate 支援的輸入選項，請參考 Floating UI 的 autoUpdate 說明：https://floating-ui.com/docs/autoUpdate

middleware

如果上述基本的設定無法滿足需求，可以自行增加 Floating UI 的 middleware：

import { offset } from '@floating-ui/react-dom'

const middleware = [
  offset({
    mainAxis: 10,
    crossAxis: 6,
  }),
]

<Float middleware={middleware}>

或是可以傳入函數，可以在參數中取得參考元素和浮動元素：

const middleware = ({ referenceEl, floatingEl }) => [
  ...
]