内部

¥Inner

定位浮动元素，使其内部元素锚定到参考元素，同时处理滚动和溢出行为。

¥Positions the floating element such that an inner element inside of it is anchored to the reference element, while handling scroll and overflow behavior.

最常见的用例是 macOS 风格的选择菜单，其中所选项目直接在目标按钮上弹出。

¥The most common use case for this is a macOS-style select menu, where the selected item pops up directly over the target button.

用法

¥Usage

有两个模块：inner() 和 useInnerOffset()。

¥There are two modules: inner() and useInnerOffset().

inner 是一个中间件，用于定位浮动元素，使其内部元素锚定到参考元素。

¥inner is a middleware that positions the floating element such that an inner element inside of it is anchored to the reference element.
useInnerOffset 是一个交互 Hook，它抵消了 wheel 事件的锚定。这允许浮动元素的高度扩展，显示更多列表项。这不是严格要求的，但对于匹配 macOS 风格选择菜单的 UX 是必要的。

¥useInnerOffset is an interaction Hook that offsets the anchoring upon a wheel event. This allows the floating element’s height to expand, revealing more list items. This is not strictly required but is necessary to match the UX of the macOS-style select menu.

import {inner, useInnerOffset} from '@floating-ui/react';
 
// Inside your component
const {context} = useFloating({
  middleware: [inner()],
});
 
const innerOffset = useInnerOffset(context);
 
const {getReferenceProps, getFloatingProps} = useInteractions([
  innerOffset,
]);

内部属性

¥inner Props

interface InnerProps extends DetectOverflowOptions {
  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
  index: number;
  offset?: number;
  overflowRef?: React.MutableRefObject<SideObject | null>;
  scrollRef?: React.MutableRefObject<HTMLElement | null>;
  referenceOverflowThreshold?: number;
  minItemsVisible?: number;
  onFallbackChange?(fallback: boolean): void;
}

`listRef`

Required

默认：[]

¥default: []

包含浮动元素内的列表项数组的引用。

¥An ref containing an array of list items inside the floating element.

const listRef = useRef([]);
 
inner({
  listRef,
});

`index`

Required

默认：0

¥default: 0

应锚定到参考元素的列表项的索引。

¥The index of the list item that should be anchored to the reference element.

const [index, setIndex] = useState(0);
 
inner({
  index,
});

`overflowRef`

默认：undefined

¥default: undefined

包含 SideObject 的引用。这用于确定浮动元素的溢出，并且在使用 useInnerOffset() 交互 Hook 时是必需的。

¥A ref containing a SideObject. This is used to determine the overflow of the floating element and is required when using the useInnerOffset() interaction Hook.

const overflowRef = useRef({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
});
 
inner({
  overflowRef,
});

`scrollRef`

默认：undefined

¥default: undefined

包含 HTMLElement 的可选参考。这可以用作滚动容器而不是浮动元素 - 例如，将内部元素定位为直接子元素，而不受滚动布局的干扰。

¥An optional ref containing an HTMLElement. This may be used as the scrolling container instead of the floating element — for instance, to position inner elements as direct children without being interfered by scrolling layout.

`referenceOverflowThreshold`

默认：0

¥default: 0

这确定了参考元素与边界边缘的距离（以像素为单位）。如果参考元素太靠近其剪切边界的边缘，则将调用 onFallbackChange 以使用回退定位。

¥This determines the distance in pixels of the reference element from the edges of the boundary. If the reference element is too close to the edges of its clipping boundary, onFallbackChange will be invoked to use fallback positioning.

inner({
  referenceOverflowThreshold: 20,
});

`minItemsVisible`

默认：4

¥default: 4

指定在使用回退定位之前应可见的最小项目数。如果可见数量少于指定数量，则将调用 onFallbackChange。

¥Specifies the minimum number of items that should be visible before fallback positioning is used. onFallbackChange will be invoked if there are less than the number specified visible.

inner({
  minItemsVisible: 10,
});

`offset`

默认：0

¥default: 0

确定锚定的偏移。

¥Determines the offset of the anchoring.

inner({
  offset: 10,
});

`onFallbackChange`

默认：no-op

¥default: no-op

定位时使用布尔值调用的回调应进入回退模式。当 true.0 时，你应该回退到创建标准锚定位的中间件。

¥A callback that is invoked with a boolean when positioning should enter fallback mode. You should fallback to middleware that create standard anchor positioning when true.

const [fallback, setFallback] = useState(false);
 
inner({
  onFallbackChange: setFallback,
});

`useInnerOffset` 属性

¥useInnerOffset Props

interface UseInnerOffsetProps {
  enabled?: boolean;
  overflowRef: React.MutableRefObject<SideObject | null>;
  onChange(
    offset: number | ((offset: number) => number)
  ): void;
  scrollRef?: React.MutableRefObject<HTMLElement | null>;
}

`enabled`

默认：true

¥default: true

有条件地启用/禁用 Hook。

¥Conditionally enable/disable the Hook.

useInnerOffset(context, {
  enabled: false,
});

`overflowRef`

Required

默认：undefined

¥default: undefined

包含 SideObject 的引用。这用于确定浮动元素的溢出。

¥A ref containing a SideObject. This is used to determine the overflow of the floating element.

const overflowRef = useRef({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
});
 
useInnerOffset(context, {
  overflowRef,
});

`onChange`

Required

默认：no-op

¥default: no-op

在 wheel 事件上使用新偏移量调用的回调，以偏移锚定，从而扩展浮动元素的高度。

¥A callback that is invoked with a new offset upon the wheel event to offset the anchoring, and thus expand the floating element’s height.

const [offset, setOffset] = useState(0);
 
const {context} = useFloating({
  middleware: [
    inner({
      // ...
      offset,
    }),
  ],
});
 
// ...
useInnerOffset(context, {
  onChange: setOffset,
});

`scrollRef`

默认：undefined

¥default: undefined

包含 HTMLElement 的可选参考。这可以用作滚动容器而不是浮动元素 - 例如，将内部元素定位为直接子元素，而不受滚动布局的干扰。