หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ส่วนประกอบ MUI

คำแนะนำสำหรับการจัดสไตล์องค์ประกอบ UI โดยใช้ React Material UI

ตอบสนองเทมเพลต

ส่วนต่างๆ ของแต่ละเลย์เอาต์ได้รับการกำหนดไว้อย่างชัดเจนโดยความคิดเห็นหรือการใช้ไฟล์แยกกัน ทำให้ง่ายต่อการแยกส่วนของหน้า (เช่น "หน่วยฮีโร่" หรือส่วนท้าย เป็นต้น) เพื่อนำกลับมาใช้ใหม่ในหน้าอื่น สำหรับตัวอย่างที่มีหลายส่วน ตารางใน README ที่ตำแหน่งซอร์สโค้ดที่เชื่อมโยงจะอธิบายวัตถุประสงค์ของแต่ละไฟล์

เบรกพอยต์เริ่มต้น

แต่ละเบรกพอยต์ (คีย์) ตรงกับความกว้างของหน้าจอคงที่ (ค่า):

  • xs เล็กพิเศษ: 0px
  • เอสเอ็ม , เล็ก: 600px
  • md , กลาง: 900px
  • lg ใหญ่: 1200px
  • xl ขนาดใหญ่พิเศษ: 1536px 
 cd /d G: O thers r eact v ite-project
 npm run dev
 http://localhost:5173/

ตู้โชว์

ลองดูแอปสาธารณะเหล่านี้โดยใช้ Material UI เพื่อรับแรงบันดาลใจสำหรับโปรเจ็กต์ต่อไปของคุณ

ธีม

นี่คือยูทิลิตี้ที่สามารถช่วยคุณปรับแต่งธีมและความสามารถในการเปลี่ยนในเบราว์เซอร์

  • สร้างธีม Material-UI - เครื่องมือออนไลน์สำหรับการสร้างธีม MUI ผ่านเครื่องมือสีการออกแบบวัสดุ
  • ตัวสร้างธีม Material-UI - ตัวสร้างธีม Material-UI/จานสี
  • ตัวแก้ไขธีม Material-UI - เครื่องมือในการสร้างธีมสำหรับแอป MUI ของคุณโดยเพียงแค่เลือกสีและดูตัวอย่างแบบสด

โครงการที่เกี่ยวข้อง

ตระกูลโครงการ Material-UI Design

  • material-ui-theme-editor - เครื่องมือในการสร้างธีมสำหรับแอปพลิเคชัน Material UI ของคุณที่มีการดูตัวอย่างแบบสด
  • เครื่องกำเนิดจานสีวัสดุ - เครื่องมือสร้างจานสีการออกแบบวัสดุอย่างเป็นทางการสามารถใช้สร้างจานสีสำหรับสีใดก็ได้ที่คุณเลือก
  • Components Extra - จัดเตรียมชุดส่วนประกอบ "โมเลกุล" ที่สร้างขึ้นบน Material-UI เช่น Footer, CookiesBanner, ปุ่ม BackToTop และองค์ประกอบที่ซับซ้อนอื่นๆ ที่สามารถปรับแต่งได้สูง เพื่อช่วยให้นักพัฒนาสร้างส่วนมาโครของ UI ได้อย่างรวดเร็ว ส่วนประกอบเหล่านั้นมักจะซ้ำกันทั่วทั้งไซต์ - ไลบรารีนี้ช่วยแก้ปัญหานี้ได้
  • React Admin - เฟรมเวิร์กส่วนหน้าสำหรับสร้างแอปพลิเคชันผู้ดูแลระบบที่ทำงานในเบราว์เซอร์ เพิ่มเติมจาก REST/GraphQL API โดยใช้ ES6, React และ Material Design
  • ตัวอย่าง UI ของวัสดุ - ส่วนขยาย VSCode ที่ให้ข้อมูลตัวอย่าง
  • Material UI Codemorphs - ส่วนขยาย VSCode ที่ให้ codemods
  • Eslint: ตรวจจับคลาสที่ไม่ได้ใช้ - ปลั๊กอิน ESLint เพื่อตรวจจับคลาสสไตล์ที่ไม่ได้ใช้ด้วย @mui/styles

ส่วนประกอบ

รายการส่วนประกอบ UI ที่สร้างด้วย Material-UI Design

  • ฟิลด์รหัสผ่าน Material-UI - ฟิลด์รหัสผ่านที่ใช้ Material-UI
  • กล่องโต้ตอบแบบเต็มหน้าจอ - กล่องโต้ตอบแบบเต็มหน้าจอสำหรับ Material-UI
  • การอัปโหลด Material-UI - การควบคุมการอัปโหลดที่ทำใน Material-UI โดยใช้ FileAPI
  • Super Select Field - คอมโพเนนต์ดรอปดาวน์การเติมข้อความอัตโนมัติแบบเลือกได้หลายรายการสำหรับ Material-UI
  • แบบฟอร์ม Material JSON Schema - แบบฟอร์ม Material-UI ที่สร้างจาก json
  • Notistack - สแน็คบาร์อย่างง่ายสำหรับ Material-UI (ดังนั้นคุณไม่จำเป็นต้องจัดการกับสถานะเปิด/ปิด)
  • Material-UI Dropzone - ส่วนประกอบ Material-UI ที่สร้างขึ้นบน react-dropzone
  • Formik-Material-UI - การเชื่อมโยงสำหรับการใช้ Material-UI กับ formik
  • Redux-Form-Material-UI - ส่วนประกอบ Wrapper เพื่ออำนวยความสะดวกในการใช้ Material-UI กับ Redux Form
  • Final-Form-Material-UI - ส่วนประกอบ Wrapper เพื่ออำนวยความสะดวกในการใช้ Material-UI กับ Final Form
  • Material-UI ม้าหมุนหมุนอัตโนมัติ - ม้าหมุนสไตล์วัสดุ
  • รูปภาพ Material-UI - รูปภาพสไตล์ Material พร้อมแอนิเมชั่นกำลังโหลด
  • Material-UI Flat Pagination - องค์ประกอบการแบ่งหน้าแบบเรียบสำหรับ Material-UI
  • Dx-react-scheduler-Material-UI - ส่วนประกอบตัวกำหนดเวลา/ปฏิทินสำหรับ Material-UI
  • Dx-react-chart-Material-UI - แผนภูมิสำหรับ Material-UI ที่แสดงภาพข้อมูลโดยใช้ชุดข้อมูลประเภทต่างๆ รวมถึงแท่ง เส้น พื้นที่ กระจาย พาย และอื่นๆ
  • บล็อกสื่อ Material-UI - ส่วนประกอบการ์ด Material-UI แบบขยายเพื่อแสดงบล็อกสื่อ
  • โต้ตอบการ์ด Github Repo - ส่วนประกอบการ์ด Material-UI แบบขยายเพื่อแสดงที่เก็บ GitHub
  • ทำปฏิกิริยากับส่วนประกอบของโมเลกุล - ทำปฏิกิริยากับส่วนประกอบของโมเลกุลโดยยึดตาม Material-UI
  • Material-UI NestedMenuItem - การแทนที่แบบดรอปอินสำหรับ MenuItem ของ MUI ด้วยเมนูที่ซ้อนกันไม่สิ้นสุด และเปิดเมื่อโฮเวอร์
  • React-planet - สร้างเมนูวงกลมที่ดูเหมือนดาวเคราะห์
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด