Floating UI Options #

placement #

Floating positioning placement:

<Float placement="left-start">

All 12 placement in the Floating UI can be used:

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

strategy #

The type of CSS position property, absolute or fixed:

<Float strategy="fixed">

offset #

The offset (px) of the floating element from the reference element:

<Float :offset="8">

More options supported by offset, refer to Floating UI's offset documentation: https://floating-ui.com/docs/offset

shift #

Move the reference elements back into the view:

<Float shift>

Set the offset (px) of the floating element from the view border:

<Float :shift="8">

More options supported by shift, refer to Floating UI's shift documentation: https://floating-ui.com/docs/shift

flip #

Change to the opposite placement to keep it in view:

flip cannot be used with autoPlacement

<Float flip>

Sets the minimum padding (px) of the floating element from the view border when flip:

<Float :flip="10">

More options supported by flip, refer to Floating UI's flip documentation: https://floating-ui.com/docs/flip

autoPlacement #

Floating elements choose the placement with more space left:

autoPlacement cannot be used with flip

<Float auto-placement>

More options supported by autoPlacement, refer to Floating UI's autoPlacement documentation: https://floating-ui.com/docs/autoPlacement

autoUpdate #

Automatically update floating elements when needed, the default value is true. Can be set to false to disable autoUpdate:

<Float :auto-update="false">

More options supported by autoUpdate, refer to Floating UI's autoUpdate documentation: https://floating-ui.com/docs/autoUpdate

middleware #

If the above basic settings do not satisfy your needs, you can add the Floating UI middleware yourself:

<Float :middleware="middleware">

<script setup>
import { offset } from '@floating-ui/dom'

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

Or pass a function to get reference elements and floating elements in the parameters:

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