hide

一个数据提供程序，允许你在适用的情况下隐藏浮动元素。

¥A data provider that allows you to hide the floating element in applicable situations.

Data Provider

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

这对于你想要隐藏浮动元素的情况非常有用，因为它看起来与参考元素分离（或附加到任何东西）。

¥This is useful for situations where you want to hide the floating element because it appears detached from the reference element (or attached to nothing).

Scroll up

在上面的示例中，一旦浮动元素具有 escaped 参考元素的剪切上下文，它就会变成部分透明。一旦参考元素被隐藏，它就会隐藏自己。

¥In the above example, the floating element turns partially transparent once it has escaped the reference element’s clipping context. Once the reference element is hidden, it hides itself.

用法

¥Usage

根据 middlewareData.hide 中的数据对浮动元素应用隐藏可见性样式：

¥Apply a hidden visibility style to the floating element based on the data in middlewareData.hide:

computePosition(referenceEl, floatingEl, {
  middleware: [hide()],
}).then(({middlewareData}) => {
  if (middlewareData.hide) {
    Object.assign(floatingEl.style, {
      visibility: middlewareData.hide.referenceHidden
        ? 'hidden'
        : 'visible',
    });
  }
});

排序

¥Order

hide() 通常应放置在中间件数组的末尾。

¥hide() should generally be placed at the end of your middleware array.

选项

¥Options

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

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

interface HideOptions extends DetectOverflowOptions {
  strategy?: 'referenceHidden' | 'escaped';
}

`strategy`

默认：'referenceHidden'

¥default: 'referenceHidden'

用于确定何时隐藏浮动元素的策略。

¥The strategy used to determine when to hide the floating element.

hide({
  strategy: 'escaped', // 'referenceHidden' by default
});

如果你想使用多种策略，请在中间件数组中使用不同的选项多次调用 hide()。

¥If you’d like to use multiple strategies, call hide() multiple times in your middleware array with different options.

…detectOverflowOptions

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

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

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

从状态导出选项

¥Deriving options from state

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

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

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

数据

¥Data

interface Data {
  referenceHidden?: boolean;
  referenceHiddenOffsets?: SideObject;
  escaped?: boolean;
  escapedOffsets?: SideObject;
}

根据所使用的策略，这些选项可能存在于数据对象中。

¥Depending on the strategy used, these options may exist in the data object.

`referenceHidden`

确定参考元素是否被完全剪切，因此从视图中隐藏。

¥Determines whether the reference element is fully clipped, and is therefore hidden from view.

请注意，“隐藏”意味着剪裁，不考虑 visibility 和 opacity 样式。

¥Note that “hidden” means clipping, visibility and opacity styles are not considered.

hide

用法

排序

选项

`strategy`

…detectOverflowOptions

从状态导出选项

数据

`referenceHidden`

`referenceHiddenOffsets`

`escaped`

`escapedOffsets`