Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Fluent UI React Trainings: Advanced slots design & Positioning API

Microsoft Developer
589K subscribers
<__slot-el>
<__slot-el>
1.9K views 1 year ago
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-vi... #2 Positioning examples https://stackblitz.com/edit/vitejs-vi... 💡 References: #1 Positioning documentation https://react.fluentui.dev/?path=/doc... ...more
...more
Fluent UI React Trainings: Advanced slots design & Positioning API
55Likes
1,948Views
2024Mar 20
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-vi... #2 Positioning examples https://stackblitz.com/edit/vitejs-vi... 💡 References: #1 Positioning documentation https://react.fluentui.dev/?path=/doc...

Follow along using the transcript.

Microsoft Developer

589K subscribers