FLOATING UI
A JavaScript library to position floating elements and create interactions for them.
āϏāĻāĻā§āώāĻŋāĻĒā§āϤāϏāĻžāϰ
FLOATING UI āĻā§?
āĻĢā§āϞā§āĻāĻŋāĻ UI āĻšāϞ āĻāĻāĻāĻŋ āĻāĻžāĻāĻžāϏā§āĻā§āϰāĻŋāĻĒā§āĻ āϞāĻžāĻāĻŦā§āϰā§āϰāĻŋ āϝāĻž āĻĢā§āϞā§āĻāĻŋāĻ āĻāĻĒāĻžāĻĻāĻžāύāĻā§āϞāĻŋāĻā§ (āϝā§āĻŽāύ, āĻā§āϞāĻāĻŋāĻĒāϏ, āĻĒāĻĒāĻāĻāĻžāϰ, āĻĄā§āϰāĻĒāĻĄāĻžāĻāύ) āĻ ā§āϝāĻžāĻā§āĻāϰāĻā§āϞāĻŋāϰ āϏāĻžāĻĒā§āĻā§āώ⧠āĻ āĻŦāϏā§āĻĨāĻžāύ āĻāϰā§, āϝāĻžāϤ⧠āϏāĻāĻāϰā§āώ āĻāĻĄāĻŧāĻžāύā§āϰ āĻŽāĻžāϧā§āϝāĻŽā§ āϤāĻžāϰāĻž āĻĻā§āĻļā§āϝāĻŽāĻžāύ āĻĨāĻžāĻā§āĨ¤ āĻāĻāĻŋ āĻĒāĻĒāĻžāϰ 2 āĻĨā§āĻā§ āĻŦāĻŋāĻāĻļāĻŋāϤ āĻšāϝāĻŧā§āĻā§ āĻāĻŦāĻ āϰāĻŋāĻ ā§āϝāĻžāĻā§āĻ, āĻāĻŋāĻ āĻāĻŦāĻ āĻ āύā§āϝāĻžāύā§āϝ āĻĒā§āϞā§āϝāĻžāĻāĻĢāϰā§āĻŽā§āϰ āϏāĻŽāϰā§āĻĨāύ āϏāĻš āĻĒā§āϞā§āϏāĻŽā§āύā§āĻ, āĻļāĻŋāĻĢāĻ, āĻĢā§āϞāĻŋāĻĒ, āϏāĻžāĻāĻ āĻ ā§āϝāĻžāĻĄāĻāĻžāϏā§āĻāĻŽā§āύā§āĻ āĻāĻŦāĻ āĻ ā§āϝāĻžāϰ⧠āĻĒāĻāĻŋāĻļāύāĻŋāĻāϝāĻŧā§āϰ āĻŽāϤ⧠āĻŦā§āĻļāĻŋāώā§āĻā§āϝāĻā§āϞāĻŋ āĻ āĻĢāĻžāϰ āĻāϰā§āĨ¤
FLOATING UI āĻā§ āĻāĻžāĻā§ āĻŦā§āϝāĻŦāĻšā§āϤ āĻšāϝāĻŧ?
āĻā§āϝāĻžāĻ
āĻŦā§āϝāĻŦāĻšāĻžāϰāĻāĻžāϰ⧠āĻā§āϰā§āĻĒ

āĻļā§āϰā§āώ āĻŦā§āĻļāĻŋāώā§āĻā§āϝ
- āϏāĻāĻāϰā§āώ āĻāĻĄāĻŧāĻžāύā§āϰ āϏāĻžāĻĨā§ āϏā§āĻŽāĻžāϰā§āĻ āĻ ā§āϝāĻžāĻā§āĻāϰ āĻĒāĻāĻŋāĻļāύāĻŋāĻ
- āĻŦāϏāĻžāύā§, āϏā§āĻĨāĻžāύāĻžāύā§āϤāϰ, āĻĢā§āϞāĻŋāĻĒ, āĻāĻŦāĻ āĻāĻāĻžāϰ āϏāĻŽāύā§āĻŦāϝāĻŧ
- āϤā§āϰ āĻāĻĒāĻžāĻĻāĻžāύ āĻ āĻŦāϏā§āĻĨāĻžāύ
- āĻŽāĻžāĻāϏ āϏā§āĻĨāĻžāύāĻžāĻā§āĻā§āϰ āĻāύā§āϝ āĻāĻžāϰā§āĻā§āϝāĻŧāĻžāϞ āĻ ā§āϝāĻžāĻā§āĻāϰ
- āĻāĻžāĻ-āĻāĻžāĻāĻĒāĻžāύ⧠āĻŽāĻĄāĻŋāĻāϞ
- āĻĒā§āϰāϤāĻŋāĻā§āϰāĻŋāϝāĻŧāĻž, Vue, āĻĒā§āϰāϤāĻŋāĻā§āϰāĻŋāϝāĻŧāĻž āύā§āĻāĻŋāĻ āĻāĻŦāĻ āĻā§āϝāĻžāύāĻāĻžāϏā§āϰ āĻāύā§āϝ āϏāĻŽāϰā§āĻĨāύ
FLOATING UI āĻā§āĻāĻžāĻŦā§ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻāϰāĻŦā§āύ?
npm, Yarn, pnpm, āĻŦāĻž CDN āĻāϰ āĻŽāĻžāϧā§āϝāĻŽā§ āĻāύāϏā§āĻāϞ āĻāϰā§āύ, āϤāĻžāϰāĻĒāϰ computePosition() āĻāĻŦāĻ āĻ āύā§āϝāĻžāύā§āϝ āĻŽāĻĄāĻŋāĻāϞāĻā§āϞāĻŋāĻā§ āϰā§āĻĢāĻžāϰā§āύā§āϏ⧠āĻāĻžāϏāĻŽāĻžāύ āĻāĻĒāĻžāĻĻāĻžāύāĻā§āϞāĻŋāĻā§ āύā§āĻā§āĻāϰ āĻāϰāϤ⧠āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻāϰā§āύ, āĻāϝāĻŧā§āĻŦ āĻ ā§āϝāĻžāĻĒā§āϞāĻŋāĻā§āĻļāύāĻā§āϞāĻŋāϤ⧠āĻā§āϞāĻāĻŋāĻĒ āĻāĻŦāĻ āĻĒāĻĒāĻāĻāĻžāϰā§āϰ āĻāύā§āϝ āĻšā§āĻāĻžāϰ āĻŦāĻž āĻā§āϞāĻŋāĻā§āϰ āĻŽāϤ⧠āĻāύā§āĻāĻžāϰāĻ ā§āϝāĻžāĻāĻļāύāĻā§āϞāĻŋ āĻĒāϰāĻŋāĻāĻžāϞāύāĻž āĻāϰā§āύ⧎
āĻŦāĻŋāĻāϞā§āĻĒ āĻā§āϞ
āϏā§āĻŦāĻŋāϧāĻž & āĻ āϏā§āĻŦāĻŋāϧāĻž
āϏā§āĻŦāĻŋāϧāĻž
- āĻŦāĻŋāύāĻžāĻŽā§āϞā§āϝ⧠āĻāĻŦāĻ āĻāĻĒā§āύ āϏā§āϰā§āϏ
- āϞāĻžāĻāĻāĻāϝāĻŧā§āĻ āĻāĻŦāĻ āĻŽāĻĄā§āϞāĻžāϰ
- āĻŦāĻŋāϏā§āϤā§āϤ āĻāĻžāĻ āĻžāĻŽā§ āϏāĻŽāϰā§āĻĨāύ āϏāĻš āĻĒā§āϞā§āϝāĻžāĻāĻĢāϰā§āĻŽ-āĻ āĻā§āĻā§āϝāĻŧāĻŦāĻžāĻĻā§
- UI āĻāĻĒāĻžāĻĻāĻžāύāĻā§āϞāĻŋāϰ āĻāύā§āϝ āĻāĻā§āĻ āĻāĻžāϏā§āĻāĻŽāĻžāĻāĻāϝā§āĻā§āϝāϤāĻž
āĻ āϏā§āĻŦāĻŋāϧāĻž
- āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻāĻāĻžāĻŦā§ āĻŦāĻŋāĻāĻžāĻļāĻāĻžāϰā§āĻĻā§āϰ āĻāύā§āϝ, āĻā§āĻĄāĻŋāĻ āĻĻāĻā§āώāϤāĻžāϰ āĻĒā§āϰāϝāĻŧā§āĻāύ āĻšāϤ⧠āĻĒāĻžāϰā§
- āĻāϝāĻŧā§āĻŦ-āĻāĻŋāϤā§āϤāĻŋāĻ āĻĒā§āϞā§āϝāĻžāĻāĻĢāϰā§āĻŽā§ āϏā§āĻŽāĻžāĻŦāĻĻā§āϧ
āĻŦā§āϝāĻŦāĻšāĻžāϰā§āϰ āĻā§āώā§āϤā§āϰā§
- āĻāϝāĻŧā§āĻŦ āĻāύā§āĻāĻžāϰāĻĢā§āϏā§āϰ āĻāύā§āϝ āĻā§āϞāĻāĻŋāĻĒ āϤā§āϰāĻŋ āĻāϰāĻž
- āĻāύā§āĻāĻžāϰā§āĻā§āĻāĻŋāĻ āĻĄāĻžāϝāĻŧāĻžāϞāĻā§āϰ āĻāύā§āϝ āĻĒāĻĒā§āĻāĻžāϰ āϤā§āϰāĻŋ āĻāϰāĻž
- āĻĒā§āϰāϤāĻŋāĻā§āϰāĻŋāϝāĻŧāĻž āĻ ā§āϝāĻžāĻĒā§ āĻĄā§āϰāĻĒāĻĄāĻžāĻāύ āĻŽā§āύ⧠āĻĒā§āϰāϝāĻŧā§āĻ āĻāϰāĻž
- Vue āĻĒā§āϰāĻāϞā§āĻĒā§ āĻāĻžāϏāĻŽāĻžāύ āĻāĻĒāĻžāĻĻāĻžāύā§āϰ āĻ āĻŦāϏā§āĻĨāĻžāύ
FLOATING UI āĻŽā§āϞā§āϝ
āĻŦā§āϝāĻŦāĻšāĻžāϰāĻāĻžāϰā§āϰ āĻĒāϰā§āϝāĻžāϞā§āĻāύāĻž
āĻāĻāύāĻ āĻā§āύ āĻĒāϰā§āϝāĻžāϞā§āĻāύāĻž āύā§āĻ
āĻāĻ āĻā§āϞā§āϰ āĻĒā§āϰāĻĨāĻŽ āĻĒāϰā§āϝāĻžāϞā§āĻāύāĻžāĻāĻžāϰ⧠āĻšāύ!