Composants MUI
Conseils pour styliser les éléments de l'interface utilisateur à l'aide de React Material UI
Modèles de réaction
Les sections de chaque mise en page sont clairement définies soit par des commentaires, soit par l'utilisation de fichiers séparés, ce qui facilite l'extraction de parties d'une page (telles qu'une « unité de héros » ou un pied de page, par exemple) pour les réutiliser dans d'autres pages. Pour les exemples en plusieurs parties, un tableau dans le fichier README à l'emplacement du code source lié décrit l'objectif de chaque fichier.
Points d'arrêt par défaut
Chaque point d'arrêt (une clé) correspond à une largeur d'écran fixe (une valeur) :
- xs , extra-petit : 0px
- sm , petit : 600px
- md , moyen : 900px
- lg , grand : 1 200 px
- xl , très grand : 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Vitrine
Découvrez ces applications publiques utilisant Material UI pour vous inspirer pour votre prochain projet.
Thématisation
Voici des utilitaires qui peuvent vous aider à personnaliser votre thème et à le modifier dans le navigateur.
- Créer un thème Material-UI - Outil en ligne pour créer des thèmes MUI via Material Design Color Tool.
- Générateur de thèmes Material-UI - Générateur de thèmes/palette Material-UI.
- Material-UI Theme Editor - Un outil pour générer des thèmes pour vos applications MUI en sélectionnant simplement les couleurs et en ayant un aperçu en direct.
Projets connexes
Famille de projets Material-UI Design.
- materials-ui-theme-editor - Un outil pour générer des thèmes pour vos applications Material UI qui propose un aperçu en direct.
- Générateur de palette de matériaux - Le générateur de palette officiel Material Design peut être utilisé pour générer une palette pour n'importe quelle couleur de votre choix.
- Composants supplémentaires - Fournit un ensemble de composants « molécules » construits sur Material-UI, tels qu'un pied de page, une bannière de cookies, un bouton BackToTop et d'autres éléments complexes hautement personnalisables pour aider les développeurs à créer très rapidement les parties macro de leur interface utilisateur. Ces composants sont souvent dupliqués sur plusieurs sites – cette bibliothèque résout exactement ce problème.
- React Admin - Un framework frontend pour créer des applications d'administration exécutées dans le navigateur, au-dessus des API REST/GraphQL, à l'aide d'ES6, React et Material Design.
- Extraits d'interface utilisateur matérielle - Extension VSCode fournissant des extraits.
- Material UI Codemorphs - Extension VSCode fournissant des codemods.
- Eslint : détecter les classes inutilisées - Plugin ESLint pour détecter les classes de style inutilisées avec
@mui/styles .
Composants
Une liste de composants d'interface utilisateur créés avec Material-UI Design.
- Champ de mot de passe Material-UI - Un champ de mot de passe utilisant Material-UI.
- Boîte de dialogue plein écran - Une boîte de dialogue plein écran pour Material-UI.
- Téléchargement Material-UI - Téléchargez les contrôles créés dans Material-UI à l'aide de FileAPI.
- Super Select Field - Composant déroulant de saisie semi-automatique à sélection multiple pour Material-UI.
- Formulaire de schéma Material JSON - Formulaire Material-UI généré à partir de json.
- Notistack - Barres de collations faciles pour Material-UI (vous n'avez donc pas à vous soucier de leur état d'ouverture/fermeture).
- Material-UI Dropzone - Composant Material-UI construit sur React-dropzone.
- Formik-Material-UI - Liaisons pour utiliser Material-UI avec formik.
- Redux-Form-Material-UI - Composants Wrapper pour faciliter l'utilisation de Material-UI avec Redux Form.
- Final-Form-Material-UI - Composants Wrapper pour faciliter l'utilisation de Material-UI avec Final Form.
- Carrousel rotatif automatique Material-UI - Carrousel de style matériel.
- Image Material-UI - Image de style matériel avec animation de chargement.
- Material-UI Flat Pagination - Un composant de pagination de conception plate pour Material-UI.
- Dx-react-scheduler-Material-UI - Un composant planificateur/calendrier pour Material-UI.
- Dx-react-chart-Material-UI - Graphiques pour Material-UI qui visualise les données à l'aide d'une variété de types de séries, notamment des barres, des lignes, des zones, des nuages de points, des secteurs, etc.
- Material-UI Medium Blog - Composant de carte Material-UI étendu pour afficher les blogs Medium.
- React Github Repo Cards - Composant Extended Material-UI Card pour afficher les référentiels GitHub.
- Réagir aux composants moléculaires - Réagir aux composants moléculaires basés sur Material-UI.
- Material-UI NestedMenuItem - Remplacement immédiat du MenuItem de MUI avec des menus imbriqués à l'infini et ouvert au survol.
- React-planet - Créez des menus circulaires qui ressemblent à des planètes.
