کتابخانه 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 &quot@mui/material/Typography"

export default function App() {

  return (

    <div className=&quotApp&quot>

    {/*For h1 Tag */}

      <Typography variant=&quoth1&quot> هر متنی که میخوای اینجا بزار </Typography>

    </div>

  );

}

کامپوننت CSS Baseline در Material UI چیست ؟

اگه فِرانت اِند دولوپر باشید حتما اسم normalize.css به گوشتون خورده.

بطور خلاصه و ساده فایل normalize.css میاد و استایل هایی که بصورت پیشفرض به اِلِمان ها و صفحات داده شده رو پاک میکنه ( استایل هارو نرمال میکنه )

اما اگه از Material UI در ری اکت استفاده میکنیم، دیگه نیازی به normalize.css نداریم!

چون خود MUI در ری اکت همین کار رو برای ما میکنه ( به کمک Css Baseline ).

کامپوننت CSSBaseline کارهای زیر رو برای ما انجام میده :

1. پاک کردن تمام margin های مرورگر
   
2. اعمال کردن Background Color پیشفرض
   
3. فعال کردن ویژگی Font anti-aliasing جهت نمایش بهتر فونت ها
   
4. حذف سایز پیشفرض غلط فونت ها ( فونت پیشفرض باید 16px باشه و همین سایر اعمال میشه )
   
5. فعالسازی ویژگی دارک مورد/لایت مورد در کل اپیکیشن به کمک ویژگی color-scheme
   
6. ست کردن ویژگی border-box به مقدار box-sizing برای کل اپیکیشن ( برای اینکه padding و border ها به عرض اِلِمان ها تاثیری نداشته باشن.
   

برای استفاده از کامپوننت CSSBaseline در MUI باید بصورت زیر عمل کنیم :

import CssBaseline from &quot@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 ویژگی های زیر رو در اختیار ما میزاره :

1. استفاده از Flexbox در پشت صحنه
   
2. استفاده از 2 نوع Layout ( یعنی containers و items ) که به کمک props میشه مشخصشون کرد
   
3. تعیین Width بصورت درصدی ( بنابراین سایز تمام کامپوننت ها بر اساس کامپوننت والد تنظیم میشه )
   
4. اعمال padding برای فاصله گذاری بین آیتم ها
   
5. وجود پنج نشانه گذار grid ( یعنی xl , lg و md , sm و xs )
   

تو تیکه کد زیر از کامپوننت Grid در Material UI استفاده کردیم :

import Grid from &quot@mui/material/Grid"

import Typography from &quot@mui/material/Typography"

// تو تیکه کد زیر یک کامپوننت ساده ساختیم

// کامپوننت زیر یک اِلِمان سادس

function ColoredComponent({ color }) {

  return (

    <div

      style={{

        backgroundColor: color,

        color: &quotwhite&quot,

        paddingTop: &quot8px&quot,

        paddingBottom: &quot8px&quot,

        textAlign: &quotcenter&quot

      }}

    >

      <Typography variant=&quotbody1&quot>Sample piece of text</Typography>

    </div>

  );

}

// اینجا از کامپوننت گرید استفاده کردیم :

export default function App() {

  return (

    <div className=&quotApp&quot>

      <Grid container spacing={1}>

        <Grid item xs={12} sm={8} md={6}>

          <ColoredComponent color=&quot#764abc&quot />

        </Grid>

        <Grid item xs={12} sm={4} md={6}>

          <ColoredComponent color=&quot#f57482&quot />

        </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 icons

برای اینکه طرز استفاده از آیکن در Material UI رو متوجه بشیم، به تیکه کد زیر نگاهی بندازید :

// فراخوانی کامپوننت هایی که لازم داریم نمایش بدیم

import FavoriteIcon from &quot@mui/icons-material/Favorite"

import FavoriteBorderOutlinedIcon from &quot@mui/icons-material/FavoriteBorderOutlined"

export default function App() {

  return (

    <div>

      <FavoriteIcon style={{ width: &quot100%&quot, height: &quot20px&quot }} />

      <FavoriteBorderOutlinedIcon style={{ width: &quot100%&quot, height: &quot20px&quot }} />

    </div>

  );

}

کامپوننت Button در Material UI چیست ؟

یکی از کاربردی ترین کامپوننت های Material UI در ریکت ، کامپوننت Button هست.

دکمه ها این امکان رو میدن که کاربر روی یک بخش کلیک کنه تا یک اتفاقی رخ بده. ( مثلا برای خرید یک محصول، برای رفتن به یک صفحه دیگه ، برای حذف یک آیتم و .. )

برای استفاده از کامپوننت Button در Material UI باید بصورت زیر عمل کنیم :

import Button from '@mui/material/Button';

export default function App() {

  return (

    <Button color=&quotsuccess&quot variant=&quotcontained&quot>

        من یه دکمه قشنگم که رنگم سبزه

    </Button>

  );

}

دکمه های Material UI میتونن Props های زیادی از ما بگیرن. ( لیست کامل Props های هر کامپوننت رو میشه تو داکیومنت اصلی MUI دید ) مثل رنگ، اندازه و ..

جدای از این موضوع ما میتونیم چند نوع دکمه ( Button ) نمایش بدیم …

Flat buttons در MUI

دکمه های Flat در Material UI خیلی ساده هستن و صرفا یک متن دارن. ( هیچ رنگ پس زمینه و حاشیه ای ندارن )

برای استفاده از Flat Buttons در Material UI باید بصورت زیر عمل کرد :

<Button variant=&quottext&quot>من دکمه فلت هستم</Button>

Outlined buttons در MUI

دکمه های Outlined در Material UI خیلی شبیه Flat Buttons ها هستن با این تفاوت که یک استایل و طرح جزئی دارن.

بصورت زیر میشه از Outlined Buttons استفاده کرد :

<Button variant=&quotoutlined&quot>من یک دکمه آوتلاین هستم</Button>

کامپوننت App bar در Material UI

از کامپوننت AppBar در ری اکت میتونیم برای نوار منوی اندروید اپیکیشن خودمون استفاده کنیم.

این نوار منو معمولا توی موبایل نمایش داده میشه و میتونه شامل قابلیت جستجو، متن صفحات مختلف و .. باشه.

تو تیکه کد زیر از کامپوننت AppBar در Material UI استفاده کردیم :

import AppBar from &quot@mui/material/AppBar"

import Toolbar from &quot@mui/material/Toolbar"

import Typography from &quot@mui/material/Typography"

import HomeIcon from &quot@mui/icons-material/Home"

<div>

  <AppBar position=&quotstatic&quot>

        <Toolbar> // کامپوننت تولبار

          <Typography>

            آیکن خانه برای صفحه اصلی <HomeIcon />

          </Typography>

        </Toolbar>

  </AppBar>

</div>;

کامپوننت Lists در Material UI

برای نمایش یک لیست از محتوا تو صفحات خودمون میتونیم از کامپوننت Lists در ری اکت استفاده کنیم.

کامپوننت Lists در MUI برای ما یک لیست عمودی از محتوای خواسته شده رو render میکنه که هر آیتم میتونه شامل یک آیکن یا نماد باشه.

تو تیکه کد زیر ما از کامپوننت Lists در Material UI استفاده کردیم و اطلاعات خودمون رو بصورت عمودی نمایش دادیم :

import List from &quot@mui/material/List"

import ListItem from &quot@mui/material/ListItem"

import Typography from &quot@mui/material/Typography"

export default function App() {

  return (

    <div>

      <Typography variant=&quoth4&quot> لیست اسامی شما :</Typography>

      <List>

        <ListItem> عاطفه </ListItem>

        <ListItem> جمشید </ListItem>

        <ListItem> چراغعلی </ListItem>

      </List>

    </div>

  );

}

کامپوننت Card در Material UI چیست ؟

لطفا برای مطالعه ادامه مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :

کتابخانه Material ui در ری اکت