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}>

shift #

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

<Float shift>

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

<Float shift={8}>

flip #

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

<Float flip>

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

<Float flip={10}>

autoPlacement #

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

<Float autoPlacement>

hide v0.13+ #

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

<Float
  hide
  referenceHiddenClass="invisible"
>

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

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

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

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

autoUpdate #

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

<Float autoUpdate={false}>

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 }) => [
  ...
]