Episodio
Fluent UI React Insights: posizionamento
con Oleksandr Fediashov
Fluent UI Insights è una serie che descrive la progettazione e le decisioni che si basano sul sistema di progettazione dell'interfaccia utente Fluent.
Nel primo episodio, i tecnici del team fluent UI spiegano i problemi relativi all'implementazione di controlli dell'interfaccia utente posizionati condividendo i requisiti e raccontando anche la storia di implementazione (con le sue avvertenze) correlate a React.js.
Marcatori di capitolo
- 00:00 - Introduzione
- 00:52 - Versioni dell'interfaccia utente Fluent
- 01:22 - Implementazione del componente Popup in Fluent UI Northstar
- 02:28 - Requisiti per il posizionamento
- 03:05 - Perché scegliamo Popper.js?
- 04:56 - Modificatori personalizzati per il posizionamento
- 08:10 - Problemi con i riferimenti React
- 10:04 - Problemi di memoria causati dal doppio rendering in React
- 10:56 : usare l'hookCallbackRef per impedire il rendering doppio
- 12:47 - Riepilogo
Risorse consigliate
- Repository dell'interfaccia utente Fluent in GitHub
- Popper.js documentazione
- Richiesta pull che implementa il componente Popup in React dell'interfaccia utente semantica
- Richiesta pull che implementa il componente Popup in Fluent UI React Northstar
- Problema in react-popper sulle prestazioni e sul re-rendering
- Richiesta pull che implementa la funzionalità "autoSize"
- Richiesta pull che implementa la funzionalità "coverTarget"
- Richiesta pull che implementa correzioni per il posizionamento e gli elementi attivabili
- CodeSandbox che illustra un ordine di effetti React con layout di elementi specifico
- Implementazione del modello "use-callback-ref"
- Richiesta pull che implementa l'hook React "usePopper()"
Fluent UI Insights è una serie che descrive la progettazione e le decisioni che si basano sul sistema di progettazione dell'interfaccia utente Fluent.
Nel primo episodio, i tecnici del team fluent UI spiegano i problemi relativi all'implementazione di controlli dell'interfaccia utente posizionati condividendo i requisiti e raccontando anche la storia di implementazione (con le sue avvertenze) correlate a React.js.
Marcatori di capitolo
- 00:00 - Introduzione
- 00:52 - Versioni dell'interfaccia utente Fluent
- 01:22 - Implementazione del componente Popup in Fluent UI Northstar
- 02:28 - Requisiti per il posizionamento
- 03:05 - Perché scegliamo Popper.js?
- 04:56 - Modificatori personalizzati per il posizionamento
- 08:10 - Problemi con i riferimenti React
- 10:04 - Problemi di memoria causati dal doppio rendering in React
- 10:56 : usare l'hookCallbackRef per impedire il rendering doppio
- 12:47 - Riepilogo
Risorse consigliate
- Repository dell'interfaccia utente Fluent in GitHub
- Popper.js documentazione
- Richiesta pull che implementa il componente Popup in React dell'interfaccia utente semantica
- Richiesta pull che implementa il componente Popup in Fluent UI React Northstar
- Problema in react-popper sulle prestazioni e sul re-rendering
- Richiesta pull che implementa la funzionalità "autoSize"
- Richiesta pull che implementa la funzionalità "coverTarget"
- Richiesta pull che implementa correzioni per il posizionamento e gli elementi attivabili
- CodeSandbox che illustra un ordine di effetti React con layout di elementi specifico
- Implementazione del modello "use-callback-ref"
- Richiesta pull che implementa l'hook React "usePopper()"
Per inviare suggerimenti, Invia un problema qui.