کتابخانه Material UI در ری اکت ! آموزش MUI در ریکت !
کتابخانه Material UI در ری اکت یکی از محبوب ترین و پرکاربرد ترین کتابخانه های پیاده سازی UI به کمک کامپوننت های از پیش ساخته شده و آمادس! به کمک کتابخانه MUI در ری اکت میتونیم به ده ها کامپوننت آماده دسترسی داشته باشیم! Material UI در ری اکت باعث میشه در مدت زمان خیلی کمتری و با سرعت بیشتری UI خودمون رو پیاده سازی کنیم 🙂
با فِرانت اِندی همراه باشید که میخوایم این کتابخانه خفن رو بررسی کنیم …
چرا از Material UI در ریکت استفاده کنیم ؟
کیفیت بالای کامپوننت های Material UI ، سادگی استفاده از اون و جامعه آماری فوق العاده ی این کتابخانه باعث شده که اکثر React Developer ها از MUI در ری اکت استفاده کنن.
همچنین کامپوننت های آماده و از پیش ساخته شده ی Material UI قابل ویرایش هستن و قابلیت شخصی سازی دارن.
چند مورد از مزایای Material UI در React :
قابلیت شخصی سازی :
تمامی قالب ها و کامپوننت هایی که MUI در اختیار ما میزاره reusable هستن و قابلیت شخصی سازی دارن.
ریسپانسیو:
تمامی قالب ها و کامپوننت های MUI در ریکت ریسپانسیو هستن و قابلیت نمایش در صفحات نمایش با سایز مختلف رو دارن. همین موضوع سرعت توسعه اپیکیشن رو بشدت افزایش میده.
بارگذاری سریع:
کامپوننت های MUI در React کاملا بهینه هستن و نسبت به سایر فرمورک های UI سریعتر بارگذاری میشن.
قالب های گسترده :
برای هر کامپوننت و نیاز، چندین نوع قالب وجود داره تا بر اساس سلیقه خودمون بتونیم بهترین انتخاب رو داشته باشیم.
جامعه آماری عالی :
کتابخانه Material UI در react بیش از 2 میلیون دانلود هفتگی در npm داره که نشون میده جامعه آماری فوق العاده ای داره.
پشتیبانی منظم و قوی :
بیشتر از 28000 نفر از سراسر جهان در توسعه کتابخانه Material UI نقش داشتن. این کتابخانه هر چند روز یکبار بروزرسانی میشه که جهت رفع مشکلات و افزودن ویژگی های جدید به این کتابخانه هست.
نصب کتابخانه Material UI در ری اکت
برای نصب MUI در ری اکت کافیه دستور زیر رو تو ترمینال خودمون وارد کنیم :
با npm :
npm install @mui/material @emotion/react @emotion/styled
با yarn :
yarn add @mui/material @emotion/react @emotion/styled
شاید این سوال برامون پیش بیاد که چرا تو دستور های بالا داریم کتابخانه emotion رو هم نصب میکنیم؟
کتابخانه mui برای استایل دهی کامپوننت های خودش در پشت صحنه از emotion استفاده میکنه. به همین دلیل باید به همراه MUI ، کتابخانه emotion روهم نصب کنیم.
خب حالا که MUI در ریکت نصب شد بریم ببینیم چه استفاده هایی میشه ازش کرد 🙂
کامپوننت های کاربردی MUI در ریکت !
کتابخانه MUI ده ها کامپوننت کاربردی و خفن داره که ما میتونیم ازشون استفاده کنیم.
تو این مقاله میخوایم چند مورد از کاربردی ترین کامپوننت های Material UI در ری اکت رو بررسی کنیم ( به همراه مثال ) و ببینیم چه جاهایی کاربرد دارن.
کامپوننت Typegraphy در Material UI چیست ؟
کامپوننت Typographi در Material UI به ما اجازه میده که متن های اپیکیشن خودمون رو با استایل از پیش تعریف شده نمایش بدیم.
این کمک میکنه که تمام متن های اپیکیشن ما یک ساختار یکسان و هماهنگ باهم داشته باشن.
تو تیکه کد زیر ما از کامپوننت Typography در ری اکت استفاده کردیم :
import Typography from "@mui/material/Typography";
export default function App() {
return (
<div className="App">
{/*For h1 Tag */}
<Typography variant="h1"> هر متنی که میخوای اینجا بزار </Typography>
</div>
);
}
کامپوننت CSS Baseline در Material UI چیست ؟
اگه فِرانت اِند دولوپر باشید حتما اسم normalize.css به گوشتون خورده.
بطور خلاصه و ساده فایل normalize.css میاد و استایل هایی که بصورت پیشفرض به اِلِمان ها و صفحات داده شده رو پاک میکنه ( استایل هارو نرمال میکنه )
اما اگه از Material UI در ری اکت استفاده میکنیم، دیگه نیازی به normalize.css نداریم!
چون خود MUI در ری اکت همین کار رو برای ما میکنه ( به کمک Css Baseline ).
کامپوننت CSSBaseline کارهای زیر رو برای ما انجام میده :
پاک کردن تمام margin های مرورگر
اعمال کردن Background Color پیشفرض
فعال کردن ویژگی Font anti-aliasing جهت نمایش بهتر فونت ها
حذف سایز پیشفرض غلط فونت ها ( فونت پیشفرض باید 16px باشه و همین سایر اعمال میشه )
فعالسازی ویژگی دارک مورد/لایت مورد در کل اپیکیشن به کمک ویژگی color-scheme
ست کردن ویژگی border-box به مقدار box-sizing برای کل اپیکیشن ( برای اینکه padding و border ها به عرض اِلِمان ها تاثیری نداشته باشن.
برای استفاده از کامپوننت CSSBaseline در MUI باید بصورت زیر عمل کنیم :
import CssBaseline from "@mui/material/CssBaseline";
export default function App() {
return (
<div>
<CssBaseline /> {/* اعمال normalize.css */}
{/* کد های اپیکیشن ما که نرمالایز میشن */}
</div>
);
}
کامپوننت Grid در Material UI چیست ؟
همونطور که میدونیم کامپوننت ها و صفحاتی که به کمک Material UI در ریکت ایجاد میکنیم کاملا Responsive هستن و قابلیت نمایش در صفحات با سایز های مختلف رو دارن.
اعمال این ویژگی Responsive در MUI به کمک سیستم گرید ( Grid ) 12 ستونه انجام میشه.
در حقیقت کامپوننت Grid در Material UI ویژگی های زیر رو در اختیار ما میزاره :
استفاده از Flexbox در پشت صحنه
استفاده از 2 نوع Layout ( یعنی containers و items ) که به کمک props میشه مشخصشون کرد
تعیین Width بصورت درصدی ( بنابراین سایز تمام کامپوننت ها بر اساس کامپوننت والد تنظیم میشه )
اعمال padding برای فاصله گذاری بین آیتم ها
وجود پنج نشانه گذار grid ( یعنی xl , lg و md , sm و xs )
تو تیکه کد زیر از کامپوننت Grid در Material UI استفاده کردیم :
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
// تو تیکه کد زیر یک کامپوننت ساده ساختیم
// کامپوننت زیر یک اِلِمان سادس
function ColoredComponent({ color }) {
return (
<div
style={{
backgroundColor: color,
color: "white",
paddingTop: "8px",
paddingBottom: "8px",
textAlign: "center"
}}
>
<Typography variant="body1">Sample piece of text</Typography>
</div>
);
}
// اینجا از کامپوننت گرید استفاده کردیم :
export default function App() {
return (
<div className="App">
<Grid container spacing={1}>
<Grid item xs={12} sm={8} md={6}>
<ColoredComponent color="#764abc" />
</Grid>
<Grid item xs={12} sm={4} md={6}>
<ColoredComponent color="#f57482" />
</Grid>
</Grid>
</div>
);
}
کامپوننت Icons در Material UI چیست ؟
آیکن ها همیشه یکی از مهمترین اجزای صفحات فِرانت اِند بودن. به کمک کامپوننت Icon در MUI میتونیم به صدها آیکن زیبا و کاربردی دسترسی داشته باشیم.
بطور مثال برای قسمت “حذف” میتونیم از آیکن سطل زباله استفاده کنیم.
ما توسط 3 متود زیر میتونیم از آیکن های Material UI استفاده کنیم:
استفاده از کامپوننت SvgIcon برای نمایش آیکن هایی که SVG هستن و Path دارن :
کامپوننت SvgIcon از ما یک props میگیره ( svg path element ) که این svg path رو تبدیل به یک کامپوننت ری اکتی میکنه و بصورت آیکن نمایش میده.
استفاده از کامپوننت Icon برای نمایش آیکن هایی که فونت هستن ( font icon ها )
این متود برای استفاده از آیکن های ligature کاربرد داره.
استفاده از خود آیکن های Material UI که در اختیارمون گذاشته شده.
تو این متود ما میتونیم از آیکن Material UI در ری اکت استفاده کنیم. برای استفاده از آیکن های خود MUI باید پکیج آیکن MUI رو به کمک دستور زیر نصب کنیم :
با npm :
npm install @mui/icons-material
یا با yarn :
yarn add @mui/icons-material
حالا میتونیم به صدها آیکن آماده در Material UI دسترسی داشته باشیم. با کلیک روی دکمه زیر میتونیم این لیست رو ببینیم :
برای اینکه طرز استفاده از آیکن در Material UI رو متوجه بشیم، به تیکه کد زیر نگاهی بندازید :
// فراخوانی کامپوننت هایی که لازم داریم نمایش بدیم
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
export default function App() {
return (
<div>
<FavoriteIcon style={{ width: "100%", height: "20px" }} />
<FavoriteBorderOutlinedIcon style={{ width: "100%", height: "20px" }} />
</div>
);
}
کامپوننت Button در Material UI چیست ؟
یکی از کاربردی ترین کامپوننت های Material UI در ریکت ، کامپوننت Button هست.
دکمه ها این امکان رو میدن که کاربر روی یک بخش کلیک کنه تا یک اتفاقی رخ بده. ( مثلا برای خرید یک محصول، برای رفتن به یک صفحه دیگه ، برای حذف یک آیتم و .. )
برای استفاده از کامپوننت Button در Material UI باید بصورت زیر عمل کنیم :
import Button from '@mui/material/Button';
export default function App() {
return (
<Button color="success" variant="contained">
من یه دکمه قشنگم که رنگم سبزه
</Button>
);
}
دکمه های Material UI میتونن Props های زیادی از ما بگیرن. ( لیست کامل Props های هر کامپوننت رو میشه تو داکیومنت اصلی MUI دید ) مثل رنگ، اندازه و ..
جدای از این موضوع ما میتونیم چند نوع دکمه ( Button ) نمایش بدیم …
Flat buttons در MUI
دکمه های Flat در Material UI خیلی ساده هستن و صرفا یک متن دارن. ( هیچ رنگ پس زمینه و حاشیه ای ندارن )
برای استفاده از Flat Buttons در Material UI باید بصورت زیر عمل کرد :
<Button variant="text">من دکمه فلت هستم</Button>
Outlined buttons در MUI
دکمه های Outlined در Material UI خیلی شبیه Flat Buttons ها هستن با این تفاوت که یک استایل و طرح جزئی دارن.
بصورت زیر میشه از Outlined Buttons استفاده کرد :
<Button variant="outlined">من یک دکمه آوتلاین هستم</Button>
کامپوننت App bar در Material UI
از کامپوننت AppBar در ری اکت میتونیم برای نوار منوی اندروید اپیکیشن خودمون استفاده کنیم.
این نوار منو معمولا توی موبایل نمایش داده میشه و میتونه شامل قابلیت جستجو، متن صفحات مختلف و .. باشه.
تو تیکه کد زیر از کامپوننت AppBar در Material UI استفاده کردیم :
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import HomeIcon from "@mui/icons-material/Home";
<div>
<AppBar position="static">
<Toolbar> // کامپوننت تولبار
<Typography>
آیکن خانه برای صفحه اصلی <HomeIcon />
</Typography>
</Toolbar>
</AppBar>
</div>;
کامپوننت Lists در Material UI
برای نمایش یک لیست از محتوا تو صفحات خودمون میتونیم از کامپوننت Lists در ری اکت استفاده کنیم.
کامپوننت Lists در MUI برای ما یک لیست عمودی از محتوای خواسته شده رو render میکنه که هر آیتم میتونه شامل یک آیکن یا نماد باشه.
تو تیکه کد زیر ما از کامپوننت Lists در Material UI استفاده کردیم و اطلاعات خودمون رو بصورت عمودی نمایش دادیم :
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Typography from "@mui/material/Typography";
export default function App() {
return (
<div>
<Typography variant="h4"> لیست اسامی شما :</Typography>
<List>
<ListItem> عاطفه </ListItem>
<ListItem> جمشید </ListItem>
<ListItem> چراغعلی </ListItem>
</List>
</div>
);
}
کامپوننت Card در Material UI چیست ؟
کامپوننت Card در Material UI که بهش کارد هم میگیم یک بخش برجسته هست که اطلاعاتی رو میتونیم داخلش نمایش بدیم.
مثلا برای صفحه لیست محصولات، هر محصول فروشگاه ما باید داخل یک Card نمایش داده بشه که با کلیک روی این Card به صفحه جزئیات محصول منتقل میشیم.
تو صفحه وبلاگ که میخوایم لیست مقالات رو نمایش بدیم هم میتونیم هر مقاله رو داخل یک Card نمایش بدیم که با کلیک کاربر روی هر Card، کاربر به صفحه جزئیات اون مقاله ریدایرکت میشه.
برای نمایش Card در Material UI باید بصورت زیر عمل کنیم :
import Typography from "@mui/material/Typography";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import Card from "@mui/material/Card";
export default function App() {
return (
<div>
<Card> {/* استفاده از کامپوننت کارد */}
{/* اینجا محتوای اصلی کارد رو میزاریم */}
<CardContent>
<Typography variant="h2"> آموزش جامع ری اکت در فرانت اندی </Typography>
<Typography variant="overline">
خیلی آسون کتابخانه ری اکت رو یاد بگیریم!
</Typography>
</CardContent>
{/* اینجا میتونیم اکشن های کارد رو مدیریت کنیم */}
<CardActions>
<Typography>
<a href="https://blog.logrocket.com/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer"> برو به صفحه آموزش </a>
</Typography>
</CardActions>
</Card>
</div>
);
}
کامپوننت Modal در Material UI چیست ؟
کامپوننت Modal در Material UI به ما اجازه میده که یکسری اطلاعات رو بصورت PopUp ( پاپ آپ ) یا دیالوگ ( dialog ) نمایش بدیم.
معمولا زمانیکه کاربر روی یک بخش کلیک میکنه، ما یک صفحه کوچیک باید به کاربر نمایش بدیم و یکسری اطلاعات رو داخلش نمایش بدیم.
برای استفاده از کامپوننت Modal در Material UI باید بصورت زیر عمل کنیم :
import Typography from "@mui/material/Typography";
//Build our custom dialog box:
function CustomDialog() {
return (
<div>
<Typography
variant="h2"
style={{ backgroundColor: "blue", padding: "20px" }}
>
This is text is in a dialog box
</Typography>
</div>
);
}
تو تیکه کد بالا ما یک کامپوننت مودال ساختیم که اسمش CustomDialog هست، حالا برای استفاده از این کامپوننت باید بصورت زیر عمل کنیم :
import Modal from "@mui/material/Modal";
import Button from "@mui/material/Button";
import { useState } from "react";
export default function App() {
// به کمک استیت های زیر میتونیم نمایش دادن مودال رو کنترل کنیم :
const [open, setOpen] = useState(false);
return (
<div>
{/* با کلیک روی این دکمه، مودال نمایش داده میشه */}
<Button onClick={() => setOpen(true)}>Open box</Button>
{/* تو خط زیر ما کامپوننت مودال رو نمایش دادیم. */}
<Modal open={open} onClose={() => setOpen(false)}>
<CustomDialog />
</Modal>
</div>
);
}
کامپوننت Table در Material UI چیست ؟
تو صفحات مختلف ما نیاز پیدا میکنیم که یکسری از اطلاعات رو داخل جداول نمایش بدیم. کامپوننت Table در Material UI به ما اجازه میده یک لیست از اطلاعات به کاربران نمایش بدیم.
یک جدول از سطر و ستون تشکیل میشه و ما میتونیم هر نوع داده و اطلاعاتی داخل این جدول جایگذاری کنیم.
ما تو HTML هم میتونستیم table نمایش بدیم اما مدیریت اون Tableسخت بود!
کامپوننت Table در Material UI به ما ویژگی های خیلی زیادی میده و مدیریت کردنش خیلی آسونه! برای استفاده از کامپوننت Table در MUI باید بصورت زیر عمل کنیم :
import Typography from "@mui/material/Typography";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableContainer from "@mui/material/TableContainer";
export default function App() {
return (
<div>
<Typography variant="h4"> لیست کاربران سایت :</Typography>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>نام</TableCell>
<TableCell>سال تولد </TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>جعفر </TableCell>
<TableCell> 1991</TableCell>
</TableRow>
<TableRow>
<TableCell> سعید </TableCell>
<TableCell>1950 </TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</div>
);
}
کامپوننت Alert در Material UI چیست ؟
برای نمایش یک پیغام به کاربر ( مثل هشدار ) ما از کامپوننت ها و اِلِمان های مختلفی میتونیم استفاده کنیم.
کامپوننت Alert در Material UI به ما این امکان رو میده که پیغام های خودمون رو با استایل های مختلف در چهار قالب خطا ، هشدار ، اطلاعات و موفق نمایش بدیم.
هر کدوم از این سبک ها استایل های اختصاصی خودشون رو دارن ( البته قابل ویرایش هستن )
برای استفاده از کامپوننت Alert در ری اکت باید بصورت زیر عمل کنیم :
<Alert severity="warning">
<AlertTitle> نمایش یک هشدار </AlertTitle>
</Alert>
<Alert severity="info">
<AlertTitle>نمایش یک اطلاعات ساده </AlertTitle>
</Alert>
<Alert severity="success">
<AlertTitle>نمایش یک پیغام موفقیت </AlertTitle>
</Alert>
</>
کتابخانه Material UI در React توسط چه کمپانی هایی استفاده میشه ؟
کمپانی های خیلی مشهوری مثل اسپاتیفای ، آمازوزن ، ناسا ، نتفلیکس ، یونیتی ، شاتراستاک و .. از MUI در React استفاده میکنن.
جمع بندی
کتابخانه Material UI در ریکت مجموعه گسترده ای از کامپوننت های از پیش ساخته شده و آماده رو در اختیار ما میزاره. همین موضوع باعث میشه که سرعت develop ( توسعه ) اپیکیشن ما بشدت افزایش پیدا کنه.
اما اینکه از MUI در ری اکت استفاده کنیم یا نه، بستگی به نوع پروژه ما داره و نمیشه یک نسخه یکسان رو برای همه تجویز کرد.
اگر طرح UI خیلی متفاوت با کامپوننت های MUI داریم ، بهتره که کامپوننت های اختصاصی خودمون رو طراحی کنیم. ( چون ممکنه تغییر کامپوننت های Material UI زمان بیشتری از ما بگیره )
کتابخانه Material UI در ری اکت شامل ده ها کامپوننت از پیش ساخته شده و آماده هست که برای پیاده سازی UI به ما کمک میکنه.
قطعا خیر!
این کاملا بستگی به نیاز ما داره.
اگه کامپوننت هایی که میخوایم پیاده سازی کنیم با کامپوننت های Material UI در ریکت خیلی تفاوت دارن،بهتره از MUI در ریکت استفاده نکنیم.
چون تغییر کامپوننت های MUI ممکنه زمان خیلی بیشتری از ما بگیره نسبت به ساخت کامپوننت اختصاصی خودمون.
بله قطعا!
MUI در ریکت یکی از مشهورترین و پراستفاده ترین کتابخانه های UI هست.
در حال حاضر Material UI در ری اکت بیش از 2 میلیون دانلود هفتگی داره.
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
خیلی جامع و عالی بود ممنون
سلام
خوشحالم که برات مفید واقع شده 🙂
سلام
سال نو مبارک !
خیلی ممنون بابت این مقاله خوب و مفید
سلام مهدی جان سال نوی شماهم مبارک 🙂
خوشحالم که این مقاله برات مفید واقع شده، موفق باشی 🙂