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製作的 - 查看他們的作品！

執照

麻省理工學院