Fluent UI React Trainings: Advanced slots design & Positioning API

Post Content

​ Master the art of UI perfection with Fluent UI’s slots and positioning! ? Fine-tune your HTML output and sculpt seamless layouts, while also wielding precise control over tooltips and popout menus. Elevate your design game with Fluent UI’s versatile toolkit!

? Chapters:
00:00 – Intro
00:31 – Slot longhands
02:19 – Disabling slots
03:14 – ‘as’ prop
04:04 – Children renderfunction
05:29 – Positioning
06:08 – Postioning shorthand
08:18 – Positioning longhand
08:57 – Offsets
11:14 – Offset function
13:52 – Custom target
15:11 – Imperative target update
16:59 – Overflow boundary
19:12 – Flip boundary
20:51 – Outro

? Examples:
#1 Examples for advanced slots usage https://stackblitz.com/edit/vitejs-vite-ghkkdm
#2 Positioning examples https://stackblitz.com/edit/vitejs-vite-jo2idf

? References:
#1 Positioning documentation https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components–default   Read More Microsoft Developer