📋 محتويات الصفحة
📖 الوصف
Material-UI (MUI) هي مكتبة مكونات React الأكثر شهرة، مبنية على Material Design من Google. توفر أكثر من 50 مكون جاهز للاستخدام بما فيها الأزرار، النماذج، النوافذ المنبثقة، الجداول، والقوائم. MUI 5 أحدث إصدار يستخدم emotion للـ styling. يوفر theming system قوي، TypeScript support كامل، و system props...
🎯 يستخدم في
مجالات استخدام هذه الأداة
React applications
Admin dashboards
Enterprise applications
Applications تحتاج Material Design
تطبيقات تحتاج مكونات جاهزة سريعة
✨ المميزات
أبرز مميزات هذه الأداة
أكثر من 50 مكون جاهز
Material Design compliant
Theming system قوي
TypeScript support كامل
Material Icons
Material UI Lab (مكونات تجريبية)
MUI System (utility CSS)
Accessible components
⚠️ العيوب
نقاط يجب مراعاتها
Bundle size كبير
تصميم Material فقط (صعب تغييره كلياً)
Customization معقد للمكونات المتقدمة
RuntimeCSS (Emotion) overhead
Performance overhead في بعض الحالات
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import { Button, Card, Typography, Container } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
// Theme
const theme = createTheme({
palette: {
primary: { main: '#3498db' },
secondary: { main: '#2ecc71' },
},
});
// App with ThemeProvider
function App() {
return (
<ThemeProvider theme={theme}>
<Container maxWidth="sm">
<Card sx={{ p: 3, mt: 4 }}>
<Typography variant="h4" gutterBottom>
بطاقة Material
</Typography>
<Typography variant="body1">
محتوى البطاقة هنا
</Typography>
<Button variant="contained" color="primary" sx={{ mt: 2 }}>
اضغط هنا
</Button>
<Button variant="outlined" sx={{ mt: 2, ml: 2 }}>
زر آخر
</Button>
</Card>
</Container>
</ThemeProvider>
);
}
// MUI System props
<Box
sx={{
display: 'flex',
gap: 2,
p: 2,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Button>زر</Button>
</Box>📚 أدوات أخرى في UI-Libraries
قد يعجبك أيضاً
Ant Design
⭐مكتبة مكونات Enterprise (Enterprise UI Component Library)
Ark UI
مكتبة مكونات Headless (Headless UI Component Library)
Base UI
مكتبة مكونات headless من MUI (Headless UI Components from MUI)
Chakra UI
⭐مكتبة مكونات واجهة بسيطة (Accessible UI Component Library)
DaisyUI
⭐مكتبة مكونات قائمة على utility classes (Component Class Library)
Fluent UI
⭐مكتبة مكونات Microsoft (Microsoft Design System)