Appearance
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'soffset
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'sshift
documentation: https://floating-ui.com/docs/shift
flip
Change to the opposite placement to keep it in view:
flip
cannot be used withautoPlacement
<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'sflip
documentation: https://floating-ui.com/docs/flip
autoPlacement
Floating elements choose the placement with more space left:
autoPlacement
cannot be used withflip
<Float auto-placement>
More options supported by
autoPlacement
, refer to Floating UI'sautoPlacement
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'sautoUpdate
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 }) => [
...
]