autoPlacement

import {autoPlacement} from '@floating-ui/dom';

用法

¥Usage

computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],
});

选项

¥Options

这些是你可以传递给 autoPlacement() 的选项。

¥These are the options you can pass to autoPlacement().

interface AutoPlacementOptions extends DetectOverflowOptions {
  crossAxis?: boolean;
  alignment?: Alignment | null;
  autoAlignment?: boolean;
  allowedPlacements?: Array<Placement>;
}

crossAxis

默认：false

¥default: false

确定 “大部分空间” 策略是否也用于交叉轴（沿着浮动元素的对齐方式运行）。当 allowedPlacements 全部位于同一轴上时，可能需要这样做。

¥Determines whether a “most space” strategy is also used for the cross axis (which runs along the alignment of the floating element). May be desirable when the allowedPlacements are all on the same axis.

autoPlacement({
  crossAxis: true,
});

alignment

默认：undefined

¥default: undefined

如果没有选项，autoPlacement() 将选择最适合的 Side 位置中的任何一个，即 'top'、'right'、'bottom' 或 'left'。

¥Without options, autoPlacement() will choose any of the Side placements which fit best, i.e. 'top', 'right', 'bottom', or 'left'.

通过指定对齐方式，它将选择那些对齐的位置。

¥By specifying an alignment, it will choose those aligned placements.

autoPlacement({
  // top-start, right-start, bottom-start, left-start
  alignment: 'start',
});

autoAlignment

默认：true

¥default: true

当指定 alignment 时，这描述了是否自动选择相反对齐的放置（如果它们更适合）。

¥When alignment is specified, this describes whether to automatically choose placements with the opposite alignment if they fit better.

autoPlacement({
  alignment: 'start',
  // Won't also choose 'end' alignments if those fit better
  autoAlignment: false,
});

allowedPlacements

默认：allPlacements 的计算子集

¥default: computed subset of allPlacements

描述允许选择的展示位置。

¥Describes the placements which are allowed to be chosen.

autoPlacement({
  // 'right' and 'left' won't be chosen
  allowedPlacements: ['top', 'bottom'],
});

autoPlacement({
  // Only choose these placements
  allowedPlacements: ['top-start', 'bottom-end'],
});

…detectOverflowOptions

detectOverflow 的所有选项都可以通过。例如：

¥All of detectOverflow’s options can be passed. For instance:

autoPlacement({
  padding: 5, // 0 by default
});

从状态导出选项

¥Deriving options from state

你可以从 中间件生命周期状态 导出选项：

¥You can derive the options from the middleware lifecycle state:

autoPlacement((state) => ({
  padding: state.rects.reference.width,
}));

最终位置

¥Final placement

返回的展示位置始终是最后一个。

¥The placement returned is always the final one.

computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],
}).then(({placement}) => {
  console.log(placement); // any side
});

与 flip() 冲突

¥Conflict with flip()

flip() 和 autoPlacement() 不能在同一个中间件数组中一起使用；确保你只选择使用其中之一。

¥flip() and autoPlacement() cannot be used together inside the same middleware array; make sure you choose only one of them to use.

原因是他们都试图在安置上进行工作，但策略相反。因此，他们会不断尝试改变另一个的结果或工作，从而导致重置循环。

¥The reason is they both try to perform work on the placement but with opposing strategies. Therefore, they will continually try to change the result or work of the other one, leading to a reset loop.

• flip() 使用后备 “没有空间” 策略。确保保留首选位置，除非没有剩余空间。

  ¥flip() uses a fallback “no space” strategy. Ensures the preferred placement is kept unless there is no space left.

• autoPlacement() 使用主要 “大部分空间” 策略。始终选择可用空间最多的位置。

  ¥autoPlacement() uses a primary “most space” strategy. Always chooses the placement with the most space available.