Floating UI 使用教程

Floating UI 使用教程

floating-uiJavaScript positioning library for tooltips, popovers, dropdowns, and more项目地址:https://gitcode.com/gh_mirrors/flo/floating-ui

项目介绍

Floating UI 是一个用于定位浮动元素并为其创建交互的 JavaScript 库。它特别适用于创建工具提示、弹出框、下拉菜单等组件。Floating UI 提供了两个主要功能：

1. 锚定定位：将浮动元素（如工具提示）锚定到另一个元素（如按钮），同时确保它尽可能保持在视图中，避免碰撞。
2. React 用户交互：提供钩子和组件，用于组合交互，创建可访问的浮动 UI 组件。

项目快速启动

安装

你可以使用 npm 安装 Floating UI：

npm install @floating-ui/react

基本使用

以下是一个简单的示例，展示如何在 React 中使用 Floating UI 创建一个工具提示：

import {useFloating, shift, offset} from '@floating-ui/react-dom-interactions';

function Tooltip() {
  const {x, y, reference, floating, strategy} = useFloating({
    placement: 'top',
    middleware: [offset(10), shift({padding: 5})],
  });

  return (
    <>
      <button ref={reference}>Hover me</button>
      <div
        ref={floating}
        style={{
          position: strategy,
          top: y ?? 0,
          left: x ?? 0,
          width: 'max-content',
          background: 'black',
          color: 'white',
          padding: '4px 8px',
          borderRadius: '4px',
        }}
      >
        Tooltip
      </div>
    </>
  );
}

应用案例和最佳实践

应用案例

1. 工具提示：在按钮或其他 UI 元素上悬停时显示详细信息。
2. 弹出框：点击按钮后显示一个包含更多选项的弹出框。
3. 下拉菜单：在导航栏中显示下拉菜单。

最佳实践

1. 可访问性：确保浮动元素在键盘导航和屏幕阅读器中可访问。
2. 性能优化：避免在不需要时渲染浮动元素，以提高性能。
3. 样式一致性：保持浮动元素的样式与应用的整体设计一致。

典型生态项目

Floating UI 可以与其他流行的前端库和框架结合使用，例如：

1. React：Floating UI 提供了专门的 React 版本，方便在 React 项目中使用。
2. Vue：虽然 Floating UI 主要针对 React，但你可以通过一些适配工作在 Vue 项目中使用它。
3. Angular：同样，通过适当的适配，Floating UI 也可以在 Angular 项目中使用。

通过结合这些生态项目，你可以更灵活地构建复杂的用户界面，并确保浮动元素的定位和交互效果达到最佳状态。

floating-uiJavaScript positioning library for tooltips, popovers, dropdowns, and more项目地址:https://gitcode.com/gh_mirrors/flo/floating-ui