合成

¥Composite

创建一个制表位，其项目通过箭头键导航，这在浮动元素上下文之外提供列表导航。

¥Creates a single tab stop whose items are navigated by arrow keys, which provides list navigation outside of floating element contexts.

import {Composite, CompositeItem} from '@floating-ui/react';

这对于启用不属于浮动元素的项目列表的导航非常有用。菜单栏是组合的一个示例，其中每个参考元素都是一个项目。

¥This is useful to enable navigation of a list of items that aren’t part of a floating element. A menubar is an example of a composite, with each reference element being an item.

用法

¥Usage

<Composite>
  <CompositeItem>Item 1</CompositeItem>
  <CompositeItem>Item 2</CompositeItem>
  <CompositeItem>Item 3</CompositeItem>
</Composite>

render 属性可用于自定义复合组件的渲染。Composite 和 CompositeItem 都接受 JSX 元素：

¥The render prop can be used to customize the rendering of the composite components. Both Composite and CompositeItem accept a JSX element:

<CompositeItem render={<select />}>
  <option />
  <option />
</CompositeItem>

或者返回一个元素的函数来自定义 HTML props 的传播/传递方式：

¥Or a function that returns an element to customize how the HTML props are spread/passed:

<CompositeItem
  render={(htmlProps) => (
    <select {...htmlProps}>
      <option />
      <option />
    </select>
  )}
/>

属性

¥Props

interface CompositeProps {
  render?: RenderProp;
  orientation?: 'horizontal' | 'vertical' | 'both';
  loop?: boolean;
  cols?: number;
  disabledIndices?: number[];
  activeIndex?: number;
  onNavigate?(index: number): void;
  itemSizes?: Dimensions[];
  dense?: boolean;
}

`render`

默认：<div />

¥default: <div />

确定要渲染的元素。

¥Determines the element to render.

<Composite render={<button />} />

`orientation`

默认：'both'

¥default: 'both'

确定复合材料的方向。

¥Determines the orientation of the composite.

<Composite orientation="horizontal" />

`loop`

默认：true

¥default: true

确定当导航经过第一个或最后一个项目时复合是否应循环。

¥Determines whether the composite should loop around when navigating past the first or last item.

<Composite loop={false} />

`cols`

默认：1

¥default: 1

确定组合中的列数（即它是一个网格）。

¥Determines the number of columns there are in the composite (i.e. it’s a grid).

<Composite cols={3} />

`disabledIndices`

确定禁用哪些项目。默认情况下使用 disabled 或 aria-disabled 属性。

¥Determines which items are disabled. The disabled or aria-disabled attributes are used by default.

<Composite disabledIndices={[1]} />

`activeIndex`

默认：undefined

¥default: undefined

确定哪个项目处于活动状态。用于外部控制活动项目。

¥Determines which item is active. Used to externally control the active item.

const [activeIndex, setActiveIndex] = useState(0);
return <Composite activeIndex={activeIndex} />;

`onNavigate`

默认：undefined

¥default: undefined

当用户导航到新项目时调用。用于外部控制活动项目。

¥Called when the user navigates to a new item. Used to externally control the active item.

const [activeIndex, setActiveIndex] = useState(0);
return <Composite onNavigate={setActiveIndex} />;

`itemSizes`

默认：undefined

¥default: undefined

仅适用于网格导航，一个 Dimensions 对象的数组，它指定每个项目的宽度（列数）和高度（行数），因此导航算法可以考虑可变大小。如果未指定，则每个项目都将被视为大小为 1 行 1 列。

¥Only for grid navigation, an array of Dimensions objects, which specify the width (number of columns) and height (number of rows) of each item, so the navigation algorithm can take the variable sizes into account. If not specified, every item will be treated as if it has a size of 1 row and 1 column.

<Composite
  itemSizes={[
    {width: 2, height: 2},
    {width: 1, height: 3},
  ]}
/>

`dense`

默认：false

¥default: false

仅针对网格导航，确定网格定位算法是否应遵循 CSS Grid 的 auto-flow dense 算法。

¥Only for grid navigation, determines if the grid positioning algorithm should follow CSS Grid’s auto-flow dense algorithm.

<Composite dense />