آموزش mui در React.js (طراحی ui با طعمی دلچسب)
MUI که قبلاً به عنوان Material-UI شناخته میشد، یک کتابخانهی محبوب React است که کامپوننتهای از پیش طراحی شدهای را برای ایجاد رابطهای کاربری حرفهای، زیبا و سازگار با طراحی Material Design گوگل ارائه میدهد. این کتابخانه به شما کمک میکند تا با سرعت بیشتری رابط کاربری بسازید، بهینهتر کدنویسی کنید و به راحتی استایلها را سفارشیسازی کنید.
- ویژگیهای کلیدی MUI:
- کامپوننتهای آماده: شامل دکمهها، فرمها، منوها، کارتها و غیره.
- سیستم گرید: برای طراحی صفحات ریسپانسیو.
- تمسازی: امکان سفارشیسازی استایلها و استفاده از تمهای سفارشی.
- انعطافپذیری بالا: قابلیت استفاده از CSS-in-JS برای استایلدهی.
در نظر داشته باشید ، این مقاله مکمل قسمت معرفی و آموزش در کلاس میباشد و سعی بر آن شده است که بصورت کامل ، مهمترین مواردی که شما باید از آنها در ساختار mui آگاهی داشته باشید را با مثال های عملی بیان کند. پس خط به خط خوانده، تمرین کرده و در mui حرفه ای شوید.
نصب MUI در پروژه React
قبل از شروع، مطمئن شوید که ابزارهای زیر نصب شدهاند:
Node.js و npm یا yarn
ایجاد یک پروژه React:
میتوانید مقاله کامل تمام راه های آموزش نصب react را مطالعه کنید.
npx create-react-app my-mui-app
cd my-mui-appنصب MUI و وابستگیها:
MUI از Emotion برای مدیریت استایلها استفاده میکند. برای نصب:
npm install @mui/material @emotion/react @emotion/styledنصب آیکونهای Material Icons:
npm install @mui/icons-materialآیا میدانید مدرسه پرنیان، دوره آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟
کلیک کنید
استایلدهی در MUI با استفاده از Emotion در ری اکت
MUI برای مدیریت استایلها از Emotion استفاده میکند. با Emotion میتوانید به راحتی استایل کامپوننتها را به صورت سفارشی تغییر دهید. این امکان به شما کمک میکند تا کامپوننتها را با نیازهای دقیق پروژه خود هماهنگ کنید.
البته در کد بالا بصورت پیش فرض، emotionنصب شده است، اما کد نصب بصورت جدا :
npm install @emotion/react @emotion/styledایجاد استایل با Emotion
Emotion دو روش اصلی برای استایلدهی ارائه میدهد:
- استفاده از
styledبرای ساخت کامپوننتهای استایلشده. - استفاده از
sxدر خود کامپوننتهای MUI.
روش 1: استفاده از styled
با styled میتوانید یک کامپوننت سفارشی با استایل خاص ایجاد کنید.
مثال:
import React from "react";
import { styled } from "@mui/material/styles";
const CustomButton = styled("button")(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
color: "#fff",
padding: "10px 20px",
border: "none",
borderRadius: "5px",
cursor: "pointer",
"&:hover": {
backgroundColor: "#2d2d2d",
color:'white'
},
}));
function App() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<CustomButton>دکمه سفارشی</CustomButton>
</div>
);
}
export default App;
روش 2: استفاده از sx
ویژگی sx برای افزودن استایلهای خطی در کامپوننتهای MUI استفاده میشود.
از sx برای استایلهای کوتاه و تغییرات جزئی در کامپوننتهای آماده MUI استفاده کنید.
import React from "react";
import Button from "@mui/material/Button";
function App() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<Button
variant="contained"
sx={{
backgroundColor: "primary.main",
color: "#fff",
"&:hover": {
backgroundColor: "primary.dark",
},
}}
>
دکمه با sx
</Button>
</div>
);
}
export default App;
مثال بعدی، از styled برای ساخت یک Card سفارشی و از sx برای تغییرات جزئی در دکمه ری اکت استفاده میکنیم.
کد کاملا واضح است و نیاز به توضیح ندارد.
import React from "react";
import { styled } from "@mui/material/styles";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
const CustomCard = styled(Card)(({ theme }) => ({
maxWidth: 400,
margin: "20px auto",
padding: "10px",
boxShadow: theme.shadows[3],
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
"&:hover": {
boxShadow: "20px 20px 10px red",
},
}));
function App() {
return (
<CustomCard dir="rtl">
<CardContent>
<Typography variant="h5" component="div" gutterBottom>
کارت سفارشی
</Typography>
<Typography variant="body1" color="text.secondary">
این کارت با استفاده از MUI و Emotion استایلدهی شده است.
</Typography>
<Button
variant="contained"
sx={{
marginTop: "20px",
backgroundColor: "primary.main",
color: "#fff",
"&:hover": {
backgroundColor: "primary.dark",
},
}}
>
دکمه درون کارت
</Button>
</CardContent>
</CustomCard>
);
}
export default App;
مهمترین کامپوننتهای آماده در MUI در ری اکت
MUI مجموعهای از کامپوننتهای از پیش طراحیشده را ارائه میدهد که میتوانید به راحتی از آنها برای ساخت رابط کاربری استفاده کنید. در اینجا لیستی از مهمترین کامپوننتها آورده شده است:
1. کامپوننتهای پایه (Basic Components)
این کامپوننتها برای عناصر اصلی رابط کاربری استفاده میشوند:
- Button: برای ایجاد دکمههای تعاملی.
<Button variant="contained" color="primary">دکمه</Button>Typography: برای استایلدهی به متن.
<Typography variant="h1">عنوان اصلی</Typography>2. کامپوننتهای Layout و ساختار
برای طراحی چیدمان صفحه استفاده میشوند:
- Box: یک کامپوننت انعطافپذیر برای ایجاد چیدمان.
<Box sx={{ padding: "20px", backgroundColor: "grey.200" }}>محتوا</Box>Grid: برای ساخت صفحات ریسپانسیو.
<Grid container spacing={2}>
<Grid item xs={6}>بخش 1</Grid>
<Grid item xs={6}>بخش 2</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item size={{xs:6, md:8}} backgroundColor={{md:'red}}>بخش 1</Grid>
<Grid item size={{xs:6, md:8}} backgroundColor={{md:'red}}>بخش 2</Grid>
</Grid>3. کامپوننتهای کارتی و نمایشی
این کامپوننتها برای نمایش محتوا مانند کارتها و لیستها استفاده میشوند:
- Card: کارت برای نمایش محتوای جداگانه.
- CardContent: برای افزودن متن یا عناصر دیگر داخل کارت.
<Card>
<CardContent>محتوای کارت</CardContent>
</Card>
CardMedia: برای نمایش تصاویر در کارتها.
<CardMedia component="img" image="/example.jpg" alt="مثال" />
4. کامپوننتهای دادهمحور (Data Display)
این کامپوننتها برای نمایش اطلاعات استفاده میشوند:
- Table: برای نمایش دادههای جدولی.
<Table>
<TableHead>...</TableHead>
<TableBody>...</TableBody>
</Table>List: برای ایجاد لیستهای آیتمی.
<List>
<ListItem>آیتم 1</ListItem>
<ListItem>آیتم 2</ListItem>
</List>
5. کامپوننتهای تعاملی (Feedback Components)
این کامپوننتها برای تعامل با کاربر استفاده میشوند:
- Dialog: برای نمایش دیالوگها و مودالها.
<Dialog open={true}>
<DialogTitle>عنوان دیالوگ</DialogTitle>
<DialogContent>محتوای دیالوگ</DialogContent>
</Dialog>
Snackbar: برای نمایش پیامهای اطلاعرسانی.
<Snackbar open={true} message="پیام نمونه" />6. کامپوننتهای فرم
برای ساخت فرمها و دریافت ورودی از کاربر استفاده میشوند:
- TextField: برای ورودیهای متنی.
<TextField label="نام کاربری" variant="outlined" />
Checkbox: برای انتخاب چندگانه.
<Checkbox checked={true} />Radio: برای انتخاب یک گزینه از چند گزینه.
<Radio checked={true} />7. کامپوننتهای ناوبری (Navigation Components)
برای مدیریت منوها و ناوبری استفاده میشوند:
- AppBar: نوار بالایی اپلیکیشن.
<AppBar position="static">
<Toolbar>منوی بالا</Toolbar>
</AppBar>Tabs: برای ایجاد تبها.
<Tabs value={0}>
<Tab label="تب 1" />
<Tab label="تب 2" />
</Tabs>8. آیکونها (Icons)
استفاده از آیکونهای آمادهی Material Design.
import HomeIcon from "@mui/icons-material/Home";
<HomeIcon />این ها نمونه های اولیه از آنهایی است که بایستی با آنها آشنایی داشته باشید. برای نمونه های و مثال های بیشتر قسمت ساید بار سمت چپ این لینک را مطالعه بفرمایید.
استایلدهی با styled-components در MUI React
styled-components یکی از کتابخانههای محبوب است که برای استایلدهی کامپوننتها در React استفاده میشود. اگرچه MUI از @emotion بهطور پیشفرض استفاده میکند، اما شما میتوانید با نصب styled-components، استایلدهی را به روش آن انجام دهید.
ابتدا باید این کتابخانه را نصب کنید:
npm install styled-componentsبرای سازگاری با MUI، باید هنگام نصب، نسخهی مناسب @mui/styled-engine-sc را نیز اضافه کنید:
npm install @mui/styled-engine-sc styled-componentsسپس در فایل package.json مشخص کنید که از styled-engine-sc استفاده شود:
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc"
}استفاده از styled-components با MUI
کد نمونه: ساخت یک دکمه سفارشی
import React from "react";
import styled from "styled-components";
import Button from "@mui/material/Button";
// ایجاد دکمه سفارشی با styled-components
const StyledButton = styled(Button)`
background-color: #1976d2;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
&:hover {
background-color: #115293;
}
`;
function App() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<StyledButton variant="contained">دکمه سفارشی</StyledButton>
</div>
);
}
export default App;
سیستم گرید و Layout در MUI: طراحی صفحات ریسپانسیو با سیستم گرید
یکی از چالشهای بزرگ در طراحی وبسایتها، ریسپانسیو بودن آنهاست. سیستم گرید در Material-UI (MUI) ابزاری قدرتمند برای طراحی صفحات ریسپانسیو است که به شما امکان میدهد با ساختاری انعطافپذیر، چیدمانهای پیچیده و منظم بسازید.
پیشنهاد میکنیم از مقاله آموزش تیلویند هم دیدن فرمایید
کلیک کنید
سیستم گرید در MUI چیست؟
سیستم گرید در MUI یک شبکهی 12 ستونی است که به شما اجازه میدهد عرض صفحه را به بخشهای مختلف تقسیم کنید. این سیستم بر اساس اصول CSS Flexbox کار میکند و شامل دو کامپوننت اصلی است:
- Grid Container: عنصر والد که نقش مدیریت چیدمان را دارد.
- Grid Item: عناصر فرزند که محتوای صفحه را در خود جای میدهند
ویژگیهای کلیدی سیستم گرید در MUI
- ریسپانسیو بودن: گرید به راحتی با اندازههای مختلف صفحه سازگار میشود.
- کنترل کامل ستونها: میتوانید عرض هر ستون را برای اندازههای مختلف صفحه مشخص کنید.
- انعطافپذیری بالا: گرید به طور کامل از CSS Flexbox پشتیبانی میکند.
قبل از مطالعه نمونه کد زیر، توضیحات کد را مطالعه کنید:
container: مشخص میکند که این گرید والد است.
item: عناصر فرزند گرید را تعریف میکند.
spacing: فاصله بین آیتمها را تعیین میکند (بر حسب پیکسل).
import React from "react";
import Grid from "@mui/material/Grid";
function App() {
return (
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4}>
<div style={{ backgroundColor: "#ffcc80", padding: "20px", textAlign: "center" }}>
ستون 1
</div>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<div style={{ backgroundColor: "#ffab91", padding: "20px", textAlign: "center" }}>
ستون 2
</div>
</Grid>
<Grid item xs={12} sm={12} md={4}>
<div style={{ backgroundColor: "#ff8a65", padding: "20px", textAlign: "center" }}>
ستون 3
</div>
</Grid>
</Grid>
);
}
export default App;
کنترل جهت گرید
با استفاده از خاصیت direction میتوانید جهت چیدمان را تغییر دهید:
<Grid container direction="row-reverse" spacing={2}>
<Grid item xs={6}>
<div>ستون 1</div>
</Grid>
<Grid item xs={6}>
<div>ستون 2</div>
</Grid>
</Grid>
سایر مقادیر کامل مشابه فلکس میباشد.
تمسازی (Theming) در MUI: شخصیسازی رنگها، فونتها، و سایر استایلها در React
در Material-UI (MUI)، تمسازی (Theming) به شما این امکان را میدهد که رنگها، فونتها، اندازهها و سایر استایلها را بهطور یکپارچه در تمام اپلیکیشن خود سفارشی کنید. این ویژگی باعث میشود که طراحی اپلیکیشن شما سازگار و جذابتر باشد، زیرا میتوانید تم خود را بر اساس برند یا نیازهای خاص تغییر دهید.
نحوه استفاده از تم در MUI
در MUI، تمسازی به وسیلهی ThemeProvider و createTheme انجام میشود.
ساخت تم جدید با createTheme
برای ایجاد یک تم جدید، از تابع createTheme استفاده میکنیم. این تابع به شما اجازه میدهد که رنگها، فونتها و سایر ویژگیهای تم را سفارشی کنید.
- createTheme: برای ساخت تم جدید با رنگها، فونتها و سایر تنظیمات.
- ThemeProvider: کامپوننتی که تم را در کل اپلیکیشن فراهم میکند.
- palette: برای تنظیم رنگها (رنگ اصلی، ثانویه، و غیره).
- typography: برای تعیین فونتهای استفادهشده در اپلیکیشن.
import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2', // رنگ اصلی
},
secondary: {
main: '#ff4081', // رنگ ثانویه
},
},
typography: {
fontFamily: '"Roboto", sans-serif', // فونتها
},
});
function App() {
return (
<ThemeProvider theme={theme}>
<div style={{ textAlign: 'center', padding: '20px' }}>
<Button variant="contained" color="primary">دکمه اصلی</Button>
<Button variant="contained" color="secondary" style={{ marginLeft: '20px' }}>دکمه ثانویه</Button>
</div>
</ThemeProvider>
);
}
export default App;
این مطالب تقریبا مهمترین اجزای کتابخانه mui بودند ولی برای آشنایی با تک تک جزئیات این کتابخانه طبعا باید به وبسایت رسمی آن مراجعه کرده و لیست کامل ویژگی های آن را مطالعه بفرمایید.
امیدواریم از این مقاله آموزش mui در React.js نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
دیدگاهتان را بنویسید