size

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

用法

¥Usage

如果浮动元素的内容无法调整大小（如示例所示），则可以使用 overflow: scroll（或 auto）使浮动元素可滚动。确保你的 CSS 使用 box-sizing: border-box！

¥If your floating element’s content cannot be resized such as in the example, you can make the floating element scrollable with overflow: scroll (or auto). Ensure your CSS is using box-sizing: border-box!

computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Change styles, e.g.
        Object.assign(elements.floating.style, {
          maxWidth: `${Math.max(0, availableWidth)}px`,
          maxHeight: `${Math.max(0, availableHeight)}px`,
        });
      },
    }),
  ],
});

选项

¥Options

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

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

interface SizeOptions extends DetectOverflowOptions {
  apply?: (
    state: MiddlewareState & {
      availableWidth: number;
      availableHeight: number;
    },
  ) => void;
}

apply

默认：undefined

¥default: undefined

与其他中间件（在 computePosition() 完成工作后分配样式）不同，size() 有自己的 apply 函数来在生命周期内完成工作：

¥Unlike other middleware, in which you assign styles after computePosition() has done its work, size() has its own apply function to do the work during the lifecycle:

size({
  apply({availableWidth, availableHeight, ...state}) {
    // Style mutations here
  },
});

availableWidth

表示浮动元素在溢出其剪切上下文之前可以有多宽。你通常会将其设置为 maxWidth CSS 属性。

¥Represents how wide the floating element can be before it will overflow its clipping context. You’ll generally set this as the maxWidth CSS property.

availableHeight

表示浮动元素在溢出其剪切上下文之前可以有多高。你通常会将其设置为 maxHeight CSS 属性。

¥Represents how tall the floating element can be before it will overflow its clipping context. You’ll generally set this as the maxHeight CSS property.

…middlewareState

参见 MiddlewareState。

¥See MiddlewareState.

许多有用的属性也可以通过此回调访问，例如 rects 和 elements。

¥Many useful properties are also accessible via this callback, such as rects and elements.

…detectOverflowOptions

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

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

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

从状态导出选项

¥Deriving options from state

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

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

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

与 flip() 一起使用

¥Using with flip()

将 size() 与 flip() 一起使用可以实现一些有用的行为。浮动元素可以调整大小，从而使其尽可能偏好其初始位置，直到达到最小尺寸，此时它将翻转。

¥Using size() together with flip() enables some useful behavior. The floating element can be resized, thus allowing it to prefer its initial placement as much as possible, until it reaches a minimum size, at which point it will flip.

如果你在任一中间件中使用 padding 选项，请确保它们共享相同的值。

¥If you’re using the padding option in either middleware, ensure they share the same value.

bestFit

flip() 中间件中的 'bestFit' 回退策略是默认策略，这可确保使用最合适的布局。在这种情况下，将 size() 放在 flip() 之后：

¥The 'bestFit' fallback strategy in the flip() middleware is the default, which ensures the best fitting placement is used. In this scenario, place size() after flip():

const middleware = [
  flip(),
  size({
    apply({availableWidth, availableHeight}) {
      // ...
    },
  }),
];

此策略可确保浮动元素始终以最佳尺寸保持在视野中。

¥This strategy ensures the floating element stays in view at all times at the most optimal size.

initialPlacement

相反，如果你希望初始放置优先，并设置可接受的最小大小，请将 size() 放置在 flip() 之前：

¥If instead, you want the initial placement to take precedence, and are setting a minimum acceptable size, place size() before flip():

const middleware = [
  size({
    apply({availableHeight, elements}) {
      Object.assign(elements.floating.style, {
        // Minimum acceptable height is 50px.
        // `flip` will then take over.
        maxHeight: `${Math.max(50, availableHeight)}px`,
      });
    },
  }),
  flip({
    fallbackStrategy: 'initialPlacement',
  }),
];

匹配参考宽度

¥Match reference width

选择下拉列表的一个共同特性是下拉列表与引用的宽度相匹配，无论其内容如何。你还可以使用 size() 来实现此目的，因为 Rect 已传入：

¥A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents. You can also use size() for this, as the Rects get passed in:

size({
  apply({rects, elements}) {
    Object.assign(elements.floating.style, {
      minWidth: `${rects.reference.width}px`,
    });
  },
});

故障排除

¥Troubleshooting

maxHeight 样式留在浮动元素上

¥maxHeight style left on floating element

在某些情况下，将 maxHeight 样式留在浮动元素上可能会导致问题，在这种情况下它可以并且应该进一步扩展。通过在 scrollHeight 小于 availableHeight 时删除 apply 函数内的样式，你可以防止这种情况：

¥Leaving the maxHeight style on the floating element can cause issues in certain situations where it can and should expand more. By removing the style inside the apply function when the scrollHeight is less than the availableHeight, you can prevent this:

elements.floating.style.maxHeight =
  availableHeight >= elements.floating.scrollHeight
    ? ''
    : `${availableHeight}px`;