Skip to content

shift

移动浮动元素以使其保持在视图中。

¥Shifts the floating element to keep it in view.

Visibility Optimizer
import {shift} from '@floating-ui/dom';

这可以防止浮动元素沿其对齐轴溢出，从而保留其放置的一侧。

¥This prevents the floating element from overflowing along its axis of alignment, thereby preserving the side it’s placed on.

Scroll horizontally

用法

¥Usage

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

选项

¥Options

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

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

interface ShiftOptions extends DetectOverflowOptions {
  mainAxis?: boolean;
  crossAxis?: boolean;
  limiter?: {
    fn: (state: MiddlewareState) => Coords;
    options?: any;
  };
}

mainAxis

默认：true

¥default: true

这是应用变速的主轴。

¥This is the main axis in which shifting is applied.

  • x 轴用于 'top' 和 'bottom' 放置

    ¥x-axis for 'top' and 'bottom' placements

  • y 轴用于 'left' 和 'right' 放置

    ¥y-axis for 'left' and 'right' placements

shift({
  mainAxis: false,
});
Scroll horizontally

crossAxis

默认：false

¥default: false

这是应用变速的交叉轴，与 mainAxis 的相反轴。

¥This is the cross axis in which shifting is applied, the opposite axis of mainAxis.

启用此功能可能会导致浮动元素与参考元素重叠，这可能不是所希望的，并且通常被 flip() 中间件替换。

¥Enabling this can lead to the floating element overlapping the reference element, which may not be desired and is often replaced by the flip() middleware.

shift({
  crossAxis: true,
});
Scroll down

limiter

默认：no-op

¥default: no-op

它接受限制已完成的转换的函数，以防止分离或 “overly-eager” 行为。其行为是一旦元素的相对边缘对齐就停止移动。

¥This accepts a function that limits the shifting done, in order to prevent detachment or “overly-eager” behavior. The behavior is to stop shifting once the opposite edges of the elements are aligned.

import {shift, limitShift} from '@floating-ui/dom';
shift({
  limiter: limitShift(),
});

该函数本身带有选项。

¥This function itself takes options.

limitShift.mainAxis

默认：true

¥default: true

是否对主轴应用限制。

¥Whether to apply limiting on the main axis.

shift({
  limiter: limitShift({
    mainAxis: false,
  }),
});

limitShift.crossAxis

默认：true

¥default: true

是否对交叉轴应用限制。

¥Whether to apply limiting on the cross axis.

shift({
  limiter: limitShift({
    crossAxis: false,
  }),
});

limitShift.offset

默认：0

¥default: 0

当限制开始时，这将被抵消。正数将较早开始限制，而负数则较晚开始限制。

¥This will offset when the limiting starts. A positive number will start limiting earlier, while negative later.

shift({
  limiter: limitShift({
    // Start limiting 5px earlier
    offset: 5,
  }),
});

这也可以采用一个函数，该函数提供每个元素的 Rect 来读取它们的尺寸：

¥This can also take a function, which provides the Rects of each element to read their dimensions:

shift({
  limiter: limitShift({
    // Start limiting by the reference's width earlier
    offset: ({rects, placement}) => rects.reference.width,
  }),
});

你还可以传递一个对象来配置两个轴：

¥You may also pass an object to configure both axes:

shift({
  limiter: limitShift({
    // object
    offset: {
      mainAxis: 10,
      crossAxis: 5,
    },
    // or a function which returns one
    offset: ({rects, placement}) => ({
      mainAxis: rects.reference.height,
      crossAxis: rects.floating.width,
    }),
  }),
});

…detectOverflowOptions

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

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

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

如果你发现右侧未应用填充，请参阅 处理大内容。

¥If you find the padding does not get applied on the right side, see Handling large content.

从状态导出选项

¥Deriving options from state

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

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

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

数据

¥Data

middlewareData.shift 中有以下数据：

¥The following data is available in middlewareData.shift:

interface Data {
  x: number;
  y: number;
}

x 和 y 表示浮动元素沿该轴移动了多少。这些值是偏移量，因此可以为负值。

¥x and y represent how much the floating element has been shifted along that axis. The values are offsets, and therefore can be negative.

Prev
offset
Next
flip