komponen MUI
Panduan untuk menata elemen UI menggunakan React Material UI
Templat Bereaksi
Bagian dari setiap tata letak didefinisikan dengan jelas baik melalui komentar atau penggunaan file terpisah, sehingga memudahkan untuk mengekstrak bagian halaman (seperti "unit pahlawan", atau footer, misalnya) untuk digunakan kembali di halaman lain. Untuk contoh multi-bagian, tabel di README di lokasi kode sumber tertaut menjelaskan tujuan setiap file.
Titik henti sementara bawaan
Setiap breakpoint (kunci) cocok dengan lebar layar tetap (nilai):
- xs , ekstra kecil: 0px
- sm , kecil: 600px
- md , sedang: 900 piksel
- lg , besar: 1200px
- xl , ekstra besar: 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Memamerkan
Lihat aplikasi publik ini menggunakan Material UI untuk mendapatkan inspirasi untuk proyek Anda berikutnya.
Tema
Berikut adalah utilitas yang dapat membantu Anda menyesuaikan tema dan kemampuan untuk mengubahnya di browser.
- Buat Tema Material-UI - Alat online untuk membuat tema MUI melalui Alat Warna Desain Material.
- Generator Tema Material-UI - Generator tema/palet Material-UI.
- Material-UI Theme Editor - Alat untuk menghasilkan tema untuk aplikasi MUI Anda hanya dengan memilih warna dan melihat pratinjau langsung.
Proyek Terkait
Kelompok proyek Desain Material-UI.
- material-ui-theme-editor - Alat untuk menghasilkan tema untuk aplikasi Material UI Anda yang menampilkan pratinjau langsung.
- Generator palet material - Generator palet Desain Material resmi dapat digunakan untuk menghasilkan palet untuk warna apa pun yang Anda pilih.
- Komponen Ekstra - Menyediakan sekumpulan komponen "molekul" yang dibangun di atas Material-UI seperti Footer, CookiesBanner, tombol BackToTop, dan elemen kompleks lainnya yang dapat disesuaikan untuk membantu pengembang membangun bagian makro UI mereka dengan sangat cepat. Komponen tersebut sering kali diduplikasi di seluruh situs - perpustakaan ini memecahkan masalah ini.
- React Admin - Kerangka frontend untuk membangun aplikasi admin yang berjalan di browser, di atas REST/GraphQL API, menggunakan ES6, React, dan Material Design.
- Cuplikan UI Material - Ekstensi VSCode yang menyediakan cuplikan.
- Material UI Codemorphs - Ekstensi VSCode yang menyediakan codemod.
- Eslint: mendeteksi kelas yang tidak digunakan - Plugin ESLint untuk mendeteksi kelas gaya yang tidak digunakan dengan
@mui/styles .
Komponen
Daftar komponen UI yang dibuat dengan Material-UI Design.
- Bidang Kata Sandi Material-UI - Bidang kata sandi menggunakan Material-UI.
- Dialog Layar Penuh - Dialog layar penuh untuk Material-UI.
- Unggah Material-UI - Kontrol unggahan dibuat di Material-UI menggunakan FileAPI.
- Super Select Field - Komponen dropdown pelengkapan otomatis multi-pilihan untuk Material-UI.
- Formulir Skema Material JSON - Formulir Material-UI yang dihasilkan dari json.
- Notstack - Snackbar mudah untuk Material-UI (jadi Anda tidak perlu berurusan dengan keadaan buka/tutupnya).
- Material-UI Dropzone - Komponen Material-UI dibangun di atas react-dropzone.
- Formik-Material-UI - Binding untuk menggunakan Material-UI dengan formik.
- Redux-Form-Material-UI - Komponen pembungkus untuk memfasilitasi penggunaan Material-UI dengan Redux Form.
- Final-Form-Material-UI - Komponen pembungkus untuk memfasilitasi penggunaan Material-UI dengan Final Form.
- Korsel Putar Otomatis Material-UI - Korsel gaya material.
- Material-UI Image - Gambar gaya material dengan animasi pemuatan.
- Material-UI Flat Pagination - Komponen pagination desain datar untuk Material-UI.
- Dx-react-scheduler-Material-UI - Komponen penjadwal/kalender untuk Material-UI.
- Dx-react-chart-Material-UI - Bagan untuk Material-UI yang memvisualisasikan data menggunakan berbagai jenis rangkaian, termasuk batang, garis, area, sebar, pai, dan banyak lagi.
- Blog Medium Material-UI - Komponen Material-UI Card yang diperluas untuk menampilkan blog Medium.
- React Github Repo Cards - Komponen Material-UI Card yang diperluas untuk menampilkan repositori GitHub.
- Bereaksi komponen molekul - Bereaksi komponen molekul berdasarkan Material-UI.
- Material-UI NestedMenuItem - Pengganti drop-in untuk MenuItem MUI dengan menu bertumpuk tanpa batas, dan terbuka saat diarahkan.
- React-planet - Membuat menu melingkar yang terlihat seperti planet.
