flip
flip()
changes the placement of the floating element to
the opposite one by default in order to keep it in view.
It also has the ability to flip to any placement, not just the opposite one.
Usage
import {computePosition, flip} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
middleware: [flip()],
});
This cannot be used with
autoPlacement()
.
Options
These are the options you can pass to flip()
.
interface Options extends DetectOverflowOptions {
mainAxis?: boolean;
crossAxis?: boolean;
fallbackPlacements?: Array<Placement>;
fallbackStrategy?: 'bestFit' | 'initialPlacement';
flipAlignment?: boolean;
}
mainAxis
default: true
This is the main axis in which overflow is checked to perform a flip.
y
-axis for'top'
and'bottom'
placementsx
-axis for'left'
and'right'
placements
flip({mainAxis: false});
crossAxis
default: true
This is the cross axis in which overflow is checked to perform a
flip, the opposite axis of mainAxis
.
flip({crossAxis: false});
fallbackPlacements
default: [oppositePlacement]
This describes the array of placements to try if the preferred
placement
doesn't fully fit on the axes in which
overflow is checked (both by default).
flip({
fallbackPlacements: ['right', 'bottom'],
});
If the placement
in computePosition()
is
set to 'top'
, but that doesn't fit, then 'right'
will be used instead. If 'right'
also doesn't fit, then
'bottom'
will be used. If none of these fit, then the
best-fitting placement will be used.
fallbackStrategy
default: 'bestFit'
When no placements fit, then you'll want to decide what happens.
'bestFit'
will use the placement which fits best on the
checked axes. 'initialPlacement'
will use the initial
placement
specified.
flip({
fallbackStrategy: 'initialPlacement',
});
flipAlignment
default: true
When an alignment is specified, e.g. 'top-start'
instead
of just 'top'
, this will flip to 'top-end'
if
start
doesn't fit.
flip({flipAlignment: false});
When using this with the shift()
middleware, ensure
flip()
is placed before shift()
in your
middleware array. This ensures the flipAlignment
logic can act before shift's does.
...detectOverflowOptions
All of detectOverflow's options can be passed. For instance:
flip({padding: 5}); // 0 by default