开源项目教程：Floating UI

开源项目教程：Floating UI

floating-ui 项目地址: https://gitcode.com/gh_mirrors/floa/floating-ui

1. 项目介绍

Floating UI 是一个轻量级的 JavaScript 库，用于帮助开发者创建浮动元素，例如工具提示、弹出框、下拉菜单等。该库提供了两个主要特性：

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

Floating UI 适用于多种平台，并且易于集成到现有的项目中。

2. 项目快速启动

以下是如何使用 npm 安装 Floating UI 以及如何在项目中快速启动的基本步骤。

安装

首先，您需要安装 npm。然后，根据您的项目需求选择合适的版本进行安装：

• Vanilla JavaScript：用于纯 JavaScript 项目。

  npm install @floating-ui/dom
  

• React：用于 React DOM 或 React Native 项目。

  npm install @floating-ui/react
  

• React Native：

  npm install @floating-ui/react-native
  

• Vue：用于 Vue 项目。

  npm install @floating-ui/vue
  

快速使用

在您的 JavaScript 文件中，您可以这样使用 Floating UI：

import { useFloating, arrow } from '@floating-ui/react';

function MyTooltip() {
  const { x, y, reference, floating, strategy } = useFloating({
    middleware: [arrow({ element: arrowRef })],
  });

  return (
    <>
      <div ref={reference}>Hover over me!</div>
      <div ref={floating} style={{ position: strategy, top: y, left: x }}>
        Tooltip content
        <div ref={arrowRef} className="arrow" />
      </div>
    </>
  );
}

确保您的 CSS 中包含相应的样式来显示浮动元素。

3. 应用案例和最佳实践

工具提示

工具提示是浮动 UI 元素的常见用例。以下是如何使用 Floating UI 创建一个基本工具提示的示例：

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

function App() {
  return (
    <Tooltip content="I'm a tooltip!">Hover over me</Tooltip>
  );
}

弹出框

弹出框通常包含更多内容，并且可能需要更复杂的交互。以下是如何创建一个弹出框的示例：

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

function App() {
  return (
    <Popover content={<div>I'm a popover!</div>}>Click me</Popover>
  );
}

最佳实践

• 确保浮动元素在所有设备和视口大小上都能正确显示和定位。
• 为浮动元素添加适当的 ARIA 属性，以提高可访问性。
• 使用 CSS 变量来轻松调整样式，使其与您的品牌或设计语言保持一致。

4. 典型生态项目

Floating UI 生态系统中的项目包括：

• @floating-ui/core：提供核心功能的包，允许开发者针对不同平台创建自定义实现。
• @floating-ui/dom：用于纯 DOM 的定位和交互。
• @floating-ui/react：为 React 提供定位和交互的包。
• @floating-ui/react-native：用于 React Native 的定位和交互。

通过这些包，开发者可以根据项目需求选择最合适的工具，从而创建出色的用户体验。

floating-ui 项目地址: https://gitcode.com/gh_mirrors/floa/floating-ui