MUI-Komponenten
Anleitung zum Gestalten von UI-Elementen mithilfe der React Material UI
Reaktionsvorlagen
Abschnitte jedes Layouts werden entweder durch Kommentare oder durch die Verwendung separater Dateien klar definiert, wodurch es einfach ist, Teile einer Seite (z. B. eine „Hero-Einheit“ oder eine Fußzeile) zur Wiederverwendung auf anderen Seiten zu extrahieren. Bei mehrteiligen Beispielen beschreibt eine Tabelle in der README-Datei am verlinkten Quellcode-Speicherort den Zweck jeder Datei.
Standardhaltepunkte
Jeder Haltepunkt (ein Schlüssel) entspricht einer festen Bildschirmbreite (einem Wert):
- xs , extraklein: 0px
- sm , klein: 600px
- md , mittel: 900px
- lg , groß: 1200px
- xl , extragroß: 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Vitrine
Schauen Sie sich diese öffentlichen Apps mit Material UI an, um sich für Ihr nächstes Projekt inspirieren zu lassen.
Thematisierung
Hier finden Sie Dienstprogramme, die Ihnen dabei helfen können, Ihr Design anzupassen und es im Browser zu ändern.
- Material-UI-Design erstellen – Online-Tool zum Erstellen von MUI-Designs über das Material Design Color Tool.
- Material-UI-Themengenerator – Material-UI-Themen-/Palettengenerator.
- Material-UI Theme Editor – Ein Tool zum Generieren von Themes für Ihre MUI-Apps, indem Sie einfach die Farben auswählen und eine Live-Vorschau anzeigen.
Verwandte Projekte
Material-UI-Design-Projektfamilie.
- material-ui-theme-editor – Ein Tool zum Generieren von Themen für Ihre Material UI-Anwendungen, das eine Live-Vorschau bietet.
- Materialpalettengenerator – Mit dem offiziellen Material Design-Palettengenerator können Sie eine Palette für jede von Ihnen ausgewählte Farbe erstellen.
- Zusätzliche Komponenten – Bietet eine Reihe von „Molekül“-Komponenten, die auf der Material-UI basieren, wie z. B. eine Fußzeile, ein CookiesBanner, eine BackToTop-Schaltfläche und andere komplexe Elemente, die hochgradig anpassbar sind, um Entwicklern dabei zu helfen, die Makroteile ihrer Benutzeroberfläche sehr schnell zu erstellen. Diese Komponenten werden oft standortübergreifend dupliziert – diese Bibliothek löst genau dieses Problem.
- React Admin – Ein Frontend-Framework zum Erstellen von Admin-Anwendungen, die im Browser auf Basis von REST/GraphQL-APIs ausgeführt werden, unter Verwendung von ES6, React und Material Design.
- Material-UI-Snippets – VSCode-Erweiterung, die Snippets bereitstellt.
- Material UI Codemorphs – VSCode-Erweiterung, die Codemods bereitstellt.
- Eslint: Nicht verwendete Klassen erkennen – ESLint-Plugin zum Erkennen nicht verwendeter Stilklassen mit
@mui/styles .
Komponenten
Eine Liste von UI-Komponenten, die mit Material-UI Design erstellt wurden.
- Material-UI-Passwortfeld – Ein Passwortfeld, das Material-UI verwendet.
- Vollbilddialog – Ein Vollbilddialog für Material-UI.
- Material-UI-Upload – Hochladen von in Material-UI erstellten Steuerelementen mithilfe von FileAPI.
- Super Select Field – Dropdown-Komponente zur automatischen Vervollständigung mehrerer Auswahlen für die Material-UI.
- Material-JSON-Schemaformular – Aus JSON generiertes Material-UI-Formular.
- Notistack – Einfache Snackbars für Material-UI (damit Sie sich nicht um den Öffnungs-/Geschlossen-Status kümmern müssen).
- Material-UI Dropzone – Material-UI-Komponente, die auf React-Dropzone aufbaut.
- Formik-Material-UI – Bindungen für die Verwendung von Material-UI mit formik.
- Redux-Form-Material-UI – Wrapper-Komponenten zur Erleichterung der Verwendung von Material-UI mit Redux Form.
- Final-Form-Material-UI – Wrapper-Komponenten zur Erleichterung der Verwendung von Material-UI mit Final Form.
- Material-UI Auto Rotating Carousel – Karussell im Materialstil.
- Material-UI-Bild – Bild im Materialstil mit Ladeanimation.
- Flache Material-UI-Paginierung – Eine flache Design-Paginierungskomponente für Material-UI.
- Dx-react-scheduler-Material-UI – Eine Planer-/Kalenderkomponente für Material-UI.
- Dx-react-chart-Material-UI – Diagramme für die Material-UI, die Daten mithilfe verschiedener Serientypen visualisieren, darunter Balken, Linien, Flächen, Streuungen, Kreise und mehr.
- Material-UI Medium Blog – Erweiterte Material-UI-Kartenkomponente zur Anzeige der Medium-Blogs.
- React Github Repo Cards – Erweiterte Material-UI-Kartenkomponente zur Anzeige der GitHub-Repositories.
- Molekülkomponenten reagieren – Molekülkomponenten basierend auf Material-UI reagieren lassen.
- Material-UI NestedMenuItem – Drop-in-Ersatz für MUIs MenuItem mit unendlich verschachtelten Menüs, die beim Hover geöffnet werden.
- React-Planet – Erstellen Sie kreisförmige Menüs, die wie Planeten aussehen.
