ดาวน์โหลด floating ui - ดาวน์โหลดซอร์สโค้ด floating ui

floating ui

ซอร์สโค้ดอื่น ๆ

@floating-ui

ดาวน์โหลด

dopt

คุณสามารถรองรับ UI ที่ลอยได้หลายวิธีในการเปิดกลุ่ม

ทำไม

องค์ประกอบลอยตัวอยู่ในตำแหน่งที่แน่นอนโดยทั่วไปจะทอดสมอกับองค์ประกอบ UI อื่น การสร้างความมั่นใจว่าองค์ประกอบลอยตัวยังคงยึดติดกับองค์ประกอบอื่นอาจเป็นเรื่องที่ท้าทายโดยเฉพาะอย่างยิ่งในบริบทของเค้าโครงที่ไม่ซ้ำกันเช่นการเลื่อนภาชนะ

การวางตำแหน่งสัมบูรณ์ยังสามารถทำให้เกิดปัญหาได้เมื่อองค์ประกอบที่ลอยอยู่ใกล้กับขอบของวิวพอร์ตและถูกบดบังหรือเรียกว่าการปะทะกัน เมื่อเกิดการชนกันตำแหน่งจะต้องปรับเพื่อให้แน่ใจว่าองค์ประกอบลอยยังคงปรากฏให้เห็น

นอกจากนี้องค์ประกอบที่ลอยอยู่มักจะมีการโต้ตอบซึ่งสามารถเพิ่มปัญหาการเข้าถึงที่ซับซ้อนเมื่อออกแบบการโต้ตอบของผู้ใช้

Floating UI เสนอชุดของคุณสมบัติระดับต่ำเพื่อช่วยให้คุณนำทางความท้าทายเหล่านี้และสร้างส่วนประกอบ UI ที่ลอยได้

ติดตั้ง

ในการติดตั้ง UI แบบลอยตัวคุณสามารถใช้ตัวจัดการแพ็คเกจเช่น NPM หรือ CDN มีเวอร์ชันที่แตกต่างกันสำหรับแพลตฟอร์มที่แตกต่างกัน

วานิลลา

ใช้บนเว็บกับวานิลลาจาวาสคริปต์

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

npm install @floating-ui/vue

ผ้าใบหรือแพลตฟอร์มอื่น ๆ

หากคุณกำลังกำหนดเป้าหมายแพลตฟอร์มอื่นนอกเหนือจากวานิลลา Dom (เว็บ) ตอบสนองหรือตอบสนองเนทีฟคุณสามารถสร้างแพลตฟอร์มของคุณเองได้ สิ่งนี้ช่วยให้คุณสนับสนุนสิ่งต่าง ๆ เช่น Canvas/WebGL หรือแพลตฟอร์มอื่น ๆ ที่สามารถเรียกใช้ JavaScript ได้

npm install @floating-ui/core

การบริจาค

โครงการนี้เป็น monorepo ที่เขียนด้วย typepmcript โดยใช้พื้นที่ทำงานของ PNPM เว็บไซต์ใช้ Next.js SSG และ Tailwind CSS สำหรับการออกแบบ

ส้อมและโคลน repo
ติดตั้งการพึ่งพาในไดเรกทอรีรูทด้วย pnpm install
สร้างไฟล์แพ็คเกจเริ่มต้นด้วย pnpm run build

พื้นที่ทดสอบ

ดอม

pnpm run --filter @floating-ui/dom dev ในรูทจะเปิดการทดสอบการพัฒนาภาพการพัฒนา @floating-ui/dom ที่ http://localhost:1234 สนามเด็กเล่นใช้ React ในการเขียนเส้นทางทดสอบแต่ละเส้นทางที่รวมโดย Vite

แต่ละเส้นทางมีภาพหน้าจอที่ถ่ายของหน้าโดยนักเขียนบทละครเพื่อให้แน่ใจว่าฟังก์ชันทั้งหมดทำงานตามที่คาดไว้ นี่เป็นวิธีที่ง่ายเชื่อถือได้และมีระดับสูงในการทดสอบตรรกะการวางตำแหน่ง

ด้านล่างคอนเทนเนอร์หลักคือการควบคุม UI เพื่อเปิดสถานะและตัวเลือกบางอย่าง การรวมกันของรัฐทุกครั้งจะถูกทดสอบด้วยสายตาผ่านภาพรวมเพื่อให้ครอบคลุมให้มากที่สุด