FLOATING UI
A JavaScript library to position┬аfloating elements┬аand create interactions for them.
рдЕрд╡рд▓реЛрдХрди
FLOATING UI рдХреНрдпрд╛ рд╣реИ?
рдлрд╝реНрд▓реЛрдЯрд┐рдВрдЧ рдпреВрдЖрдИ рдПрдХ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рд╣реИ рдЬреЛ рдПрдВрдХрд░ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рдлрд╝реНрд▓реЛрдЯрд┐рдВрдЧ рддрддреНрд╡реЛрдВ (рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЯреВрд▓рдЯрд┐рдкреНрд╕, рдкреЙрдкрдУрд╡рд░, рдбреНрд░реЙрдкрдбрд╛рдЙрди) рдХреЛ рд╕реНрдерд╛рди рджреЗрддреА рд╣реИ, рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рддреА рд╣реИ рдХрд┐ рд╡реЗ рдЯрдХрд░рд╛рд╡ рд╕реЗ рдмрдЪрдХрд░ рджреГрд╢реНрдп рдореЗрдВ рд░рд╣реЗрдВред рдпрд╣ рдкреЙрдкрд░ 2 рд╕реЗ рд╡рд┐рдХрд╕рд┐рдд рд╣реБрдЖ рд╣реИ рдФрд░ рд░рд┐рдПрдХреНрдЯ, рд╡реНрдпреВ рдФрд░ рдЕрдиреНрдп рдкреНрд▓реЗрдЯрдлрд╛рд░реНрдореЛрдВ рдХреЗ рд╕рдорд░реНрдерди рдХреЗ рд╕рд╛рде рдкреНрд▓реЗрд╕рдореЗрдВрдЯ, рд╢рд┐рдлреНрдЯ, рдлреНрд▓рд┐рдк, рдЖрдХрд╛рд░ рд╕рдорд╛рдпреЛрдЬрди рдФрд░ рдПрд░реЛ рдкреЛрдЬрд┐рд╢рдирд┐рдВрдЧ рдЬреИрд╕реА рд╕реБрд╡рд┐рдзрд╛рдПрдВ рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИред
FLOATING UI рдХрд┐рд╕ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ?
рдЯреИрдЧ
рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╕рдореВрд╣

рд╢реАрд░реНрд╖ рд╕реБрд╡рд┐рдзрд╛рдПрдВ
- рдЯрдХрд░рд╛рд╡ рд╕реЗ рдмрдЪрд╛рд╡ рдХреЗ рд╕рд╛рде рд╕реНрдорд╛рд░реНрдЯ рдПрдВрдХрд░ рдкреЛрдЬреАрд╢рдирд┐рдВрдЧ
- рдкреНрд▓реЗрд╕рдореЗрдВрдЯ, рд╢рд┐рдлреНрдЯ, рдлреНрд▓рд┐рдк рдФрд░ рдЖрдХрд╛рд░ рд╕рдорд╛рдпреЛрдЬрди
- рддреАрд░ рддрддреНрд╡ рд╕реНрдерд┐рддрд┐
- рдорд╛рдЙрд╕ рдирд┐рд░реНрджреЗрд╢рд╛рдВрдХ рдХреЗ рд▓рд┐рдП рд╡рд░реНрдЪреБрдЕрд▓ рдПрдВрдХрд░
- рд╡реГрдХреНрд╖-рд╣рд┐рд▓рд╛рдиреЗ рдпреЛрдЧреНрдп рдореЙрдбреНрдпреВрд▓
- рд░рд┐рдПрдХреНрдЯ, рд╡реНрдпреВ, рд░рд┐рдПрдХреНрдЯ рдиреЗрдЯрд┐рд╡ рдФрд░ рдХреИрдирд╡рд╛рд╕ рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди
FLOATING UI рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ?
рдПрдирдкреАрдПрдо, рдпрд╛рд░реНрди, рдкреАрдПрдирдкреАрдПрдо, рдпрд╛ рд╕реАрдбреАрдПрди рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЗрдВрд╕реНрдЯреЙрд▓ рдХрд░реЗрдВ, рдлрд┐рд░ рдлреНрд▓реЛрдЯрд┐рдВрдЧ рддрддреНрд╡реЛрдВ рдХреЛ рд╕рдВрджрд░реНрднреЛрдВ рдореЗрдВ рдПрдВрдХрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдВрдкреНрдпреВрдЯрдкреЛрдЬрд┐рд╢рди() рдФрд░ рдЕрдиреНрдп рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ, рд╡реЗрдм рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдореЗрдВ рдЯреВрд▓рдЯрд┐рдкреНрд╕ рдФрд░ рдкреЙрдкрдУрд╡рд░ рдХреЗ рд▓рд┐рдП рд╣реЛрд╡рд░ рдпрд╛ рдХреНрд▓рд┐рдХ рдЬреИрд╕реЗ рдЗрдВрдЯрд░реИрдХреНрд╢рди рдХреЛ рд╕рдВрднрд╛рд▓реЗрдВред
рд╡реИрдХрд▓реНрдкрд┐рдХ рдЯреВрд▓
рдлрд╛рдпрджреЗ & рдиреБрдХрд╕рд╛рди
рдлрд╛рдпрджреЗ
- рдореБрдлрд╝реНрдд рдФрд░ рдЦреБрд▓рд╛ рд╕реНрд░реЛрдд
- рд╣рд▓реНрдХрд╛ рдФрд░ рдореЙрдбреНрдпреВрд▓рд░
- рд╡реНрдпрд╛рдкрдХ рд░реВрдкрд░реЗрдЦрд╛ рд╕рдорд░реНрдерди рдХреЗ рд╕рд╛рде рдкреНрд▓реЗрдЯрдлрд╝реЙрд░реНрдо-рдЕрдЬреНрдЮреЗрдпрд╡рд╛рджреА
- рдпреВрдЖрдИ рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдЙрдЪреНрдЪ рдЕрдиреБрдХреВрд▓рдирд╢реАрд▓рддрд╛
рдиреБрдХрд╕рд╛рди
- рдореБрдЦреНрдп рд░реВрдк рд╕реЗ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рд▓рд┐рдП, рдХреЛрдбрд┐рдВрдЧ рдХреМрд╢рд▓ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИ
- рд╡реЗрдм-рдЖрдзрд╛рд░рд┐рдд рдкреНрд▓реЗрдЯрдлрд╝реЙрд░реНрдо рддрдХ рд╕реАрдорд┐рдд
рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ
- рд╡реЗрдм рдЗрдВрдЯрд░рдлреЗрд╕ рдХреЗ рд▓рд┐рдП рдЯреВрд▓рдЯрд┐рдкреНрд╕ рдмрдирд╛рдирд╛
- рдЗрдВрдЯрд░реИрдХреНрдЯрд┐рд╡ рд╕рдВрд╡рд╛рджреЛрдВ рдХреЗ рд▓рд┐рдП рдкреЙрдкрдУрд╡рд░ рдмрдирд╛рдирд╛
- рд░рд┐рдПрдХреНрдЯ рдРрдкреНрд╕ рдореЗрдВ рдбреНрд░реЙрдкрдбрд╛рдЙрди рдореЗрдиреВ рд▓рд╛рдЧреВ рдХрд░рдирд╛
- Vue рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдореЗрдВ рдлрд╝реНрд▓реЛрдЯрд┐рдВрдЧ рддрддреНрд╡реЛрдВ рдХреА рд╕реНрдерд┐рддрд┐ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдирд╛
FLOATING UI рдореВрд▓реНрдп
рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╕рдореАрдХреНрд╖рд╛рдПрдВ
рдЕрднреА рддрдХ рдХреЛрдИ рд╕рдореАрдХреНрд╖рд╛ рдирд╣реАрдВ
рдЗрд╕ рдЯреВрд▓ рдХреА рдкрд╣рд▓реА рд╕рдореАрдХреНрд╖рд╛ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдмрдиреЗрдВ!