floating ui

您可以在开放集体上以多种方式支持浮动UI。

为什么

浮动元素绝对位置，通常锚定在另一个UI元素上。确保浮动元素仍然锚定在另一个元素旁边可能具有挑战性，尤其是在滚动容器等独特的布局上下文中。

当浮动元件离视口的边缘太近并被遮盖，也称为碰撞时，绝对定位也会引起问题。发生碰撞时，必须调整位置以确保浮动元件保持可见。

此外，浮动元素通常是交互式的，在设计用户交互时会引起复杂的可访问性问题。

浮动UI提供了一组低级功能，可帮助您应对这些挑战并构建可访问的浮动UI组件。

安装

要安装浮动UI，您可以使用NPM或CDN等软件包管理器。有不同的版本可用于不同的平台。

香草

与香草JavaScript一起在网上使用。

npm install @floating-ui/dom

您可以从阅读教程开始，该教程会教您如何通过构建基本工具提示来使用库，也可以直接跳入API文档。

反应

与React Dom或React Native一起使用。

反应dom

 # Positioning + interactions
npm install @floating-ui/react

# Positioning only (smaller size)
npm install @floating-ui/react-dom

反应天然

npm install @floating-ui/react-native

Vue

与Vue一起使用。

npm install @floating-ui/vue

画布或其他平台

如果您针对除香草DOM（Web），反应或反应本机以外的其他平台，则可以创建自己的平台。这使您可以支持Canvas/WebGL或其他可以运行JavaScript的平台。

npm install @floating-ui/core

贡献

该项目是使用PNPM工作区用打字稿编写的MonorePo。该网站正在使用Next.js SSG和Tailwind CSS进行样式。

• 叉子和克隆仓库
• 使用pnpm install在根目录中安装依赖项
• 使用pnpm run build构建初始包装DIST文件

测试场

dom

pnpm run --filter @floating-ui/dom dev将在http://localhost:1234启动@floating-ui/dom开发视觉测试。操场使用React编写由Vite捆绑的每个测试路线。

每条路线都有剧作家对页面拍摄的屏幕截图，以确保所有功能按预期工作；这是测试定位逻辑的一种简单，可靠和高级的方法。

主要容器下方是UI控件，以打开某些状态和选项。每种状态的组合都通过快照对视觉测试，以尽可能覆盖。

反应

pnpm run --filter @floating-ui/react dev将在http://localhost:1234启动@floating-ui/react开发测试。

学分

横幅图像中的浮动形状是由figma上令人惊叹的艺术家 @artstar3d，@killnicole和@liiiiiiii制作的 - 查看他们的作品！

执照

麻省理工学院