Skip to content

FloatingDelayGroup

为一组浮动元素提供上下文，这些元素应共享 delay，该 delay 在该组的第一个浮动元素打开后暂时变为 1 毫秒。

¥Provides context for a group of floating elements that should share a delay which temporarily becomes 1 ms after the first floating element of the group opens.

import {FloatingDelayGroup} from '@floating-ui/react';

当浮动元素的参考元素彼此靠近放置时，当浮动元素具有悬停延迟（如工具提示）时，这对于更好地发现浮动元素非常有用。

¥This is useful to enable higher discovery of floating elements when they have a hover delay (like tooltips) when their reference elements are placed near each other.

function App() {
  return (
    <FloatingDelayGroup delay={{open: 1000, close: 200}}>
      <Tooltip label="One">
        <button>Ref</button>
      </Tooltip>
      <Tooltip label="Two">
        <button>Ref</button>
      </Tooltip>
      <Tooltip label="Three">
        <button>Ref</button>
      </Tooltip>
    </FloatingDelayGroup>
  );
}

示例

¥Example

用法

¥Usage

要启用延迟分组：

¥To enable delay grouping:

  • 将分组的浮动组件封装在 <FloatingDelayGroup> 提供程序中。

    ¥Wrap the grouped floating components in a <FloatingDelayGroup> provider.

  • useDelayGroup() 是在组件内部调用的 Hook，它启用组件分组并从 <FloatingDelayGroup> 提供程序返回组 delay 上下文。

    ¥useDelayGroup(), a Hook called inside the component, enables grouping for the component and returns the group delay context from the <FloatingDelayGroup> provider.

import {
  FloatingDelayGroup,
  useDelayGroup,
  useHover,
  useFloating,
} from '@floating-ui/react';
 
function Tooltip() {
  const {context} = useFloating();
  const {delay} = useDelayGroup(context);
  const hover = useHover(context, {delay});
}

属性

¥Props

interface FloatingDelayGroupProps {
  delay: Delay;
  timeoutMs?: number;
}

delay

Required

默认：0

¥default: 0

用于组的延迟。

¥The delay to use for the group.

<FloatingDelayGroup
  // Both open and close delays
  delay={200}
  // Or, configured individually
  delay={{open: 1000, close: 200}}
>
  {/* ... */}
</FloatingDelayGroup>

timeoutMs

默认：0

¥default: 0

用于组的可选显式超时，表示关闭延迟完成后分组逻辑将不再处于活动状态。如果你希望分组到 “last” 的时间长于关闭延迟（例如，如果根本没有关闭延迟），这非常有用。

¥An optional explicit timeout to use for the group, which represents when grouping logic will no longer be active after the close delay completes. This is useful if you want grouping to “last” longer than the close delay, for example if there is no close delay at all.

<FloatingDelayGroup timeoutMs={500}>
  {/* ... */}
</FloatingDelayGroup>

过渡

¥Transitions

  • isInstantPhase 是一个布尔值，用于确定延迟当前是否处于即时阶段。这使你可以即时/更快地进行转换。参见 useTransitionStyles。

    ¥isInstantPhase is a boolean that determines whether the delay is currently in the instant phase. This allows you to make transitions instant/faster. See useTransitionStyles.

  • currentId 指的是当前打开的组的浮动元素的 id。

    ¥currentId refers to the id of the floating element of the group currently open.

const {currentId, isInstantPhase} = useDelayGroup(context);
 
const instantDuration = 0;
const duration = 200;
 
const {isMounted, styles} = useTransitionStyles(context, {
  duration: isInstantPhase
    ? {
        open: instantDuration,
        close:
          currentId === context.floatingId
            ? duration
            : instantDuration,
      }
    : duration,
  // ...
});

故障排除

¥Troubleshooting

如果你的浮动组件没有提供程序，则从 useDelayGroup() 返回的 delay 默认为 0。这允许你有条件地使用，例如，直接传递到组件中的 delay prop，而不是从上下文中传递的组延迟。

¥The delay returned from useDelayGroup() is 0 by default if your floating components don’t have a provider. This allows you to conditionally use, for example, a delay prop that’s passed directly into the component rather than the group delay from context.

Prev
FloatingList
Next
合成