FLOATING UI
A JavaScript library to position floating elements and create interactions for them.
คะแนน
60
คะแนนผู้ใช้
2.0
การสนับสนุนฟรี/ทดลองใช้
รองรับ
ราคาเริ่มต้น
--
อัปเดตล่าสุด
ส.ค. 04, 2026
ภาพรวม
FLOATING UI คืออะไร?
UI แบบลอยคือไลบรารี JavaScript ที่วางตำแหน่งองค์ประกอบแบบลอย (เช่น คำแนะนำเครื่องมือ ป๊อปโอเวอร์ ดรอปดาวน์) ที่สัมพันธ์กับจุดยึด เพื่อให้มั่นใจว่าองค์ประกอบเหล่านั้นจะอยู่ในสายตาโดยหลีกเลี่ยงการชนกัน พัฒนามาจาก Popper 2 และนำเสนอฟีเจอร์ต่างๆ เช่น การวางตำแหน่ง การเลื่อน การพลิก การปรับขนาด และการวางตำแหน่งลูกศร พร้อมรองรับ React, Vue และแพลตฟอร์มอื่นๆ
FLOATING UI ใช้สำหรับอะไร?
แท็ก
กลุ่มผู้ใช้
คุณสมบัติหลัก
- การวางตำแหน่งพุกอัจฉริยะพร้อมการหลีกเลี่ยงการชน
- การปรับตำแหน่ง เลื่อน พลิก และขนาด
- การวางตำแหน่งองค์ประกอบลูกศร
- จุดยึดเสมือนสำหรับพิกัดเมาส์
- โมดูลที่สั่นไหวแบบต้นไม้
- รองรับ React, Vue, React Native และ Canvas
วิธีใช้ FLOATING UI?
ติดตั้งผ่าน npm, Yarn, pnpm หรือ CDN จากนั้นใช้ computePosition() และโมดูลอื่นๆ เพื่อยึดองค์ประกอบแบบลอยเข้ากับข้อมูลอ้างอิง การจัดการการโต้ตอบ เช่น โฮเวอร์หรือคลิกเพื่อดูคำแนะนำเครื่องมือและป๊อปโอเวอร์ในเว็บแอปพลิเคชัน
เครื่องมือทางเลือก
ไม่พบเครื่องมือทางเลือก
ข้อดี & ข้อเสีย
ข้อดี
- ฟรีและโอเพ่นซอร์ส
- น้ำหนักเบาและเป็นโมดูลาร์
- ไม่เชื่อเรื่องแพลตฟอร์มพร้อมการรองรับเฟรมเวิร์กที่กว้างขวาง
- ความสามารถในการปรับแต่งสูงสำหรับส่วนประกอบ UI
ข้อเสีย
- สำหรับนักพัฒนาเป็นหลัก อาจต้องใช้ทักษะการเขียนโค้ด
- จำกัดเฉพาะแพลตฟอร์มบนเว็บ
กรณีการใช้งาน
- การสร้างคำแนะนำเครื่องมือสำหรับเว็บอินเตอร์เฟส
- การสร้างป๊อปโอเวอร์สำหรับกล่องโต้ตอบแบบโต้ตอบ
- การใช้เมนูแบบเลื่อนลงในแอป React
- การวางตำแหน่งองค์ประกอบลอยตัวในโครงการ Vue
ราคา FLOATING UI
แผนฟรี
ไม่มีข้อมูลราคาโดยละเอียด
รีวิวผู้ใช้
2.0
จาก 5
2.0
ยังไม่มีรีวิว
เป็นคนแรกที่รีวิวเครื่องมือนี้!