روش نصب و استفاده از Material UI


در مقاله قبلی و اولین قسمت از دسته material ui ،این کتابخونه رو معرفی کردیم و یک سری از مزایای اون رو شناختیم .در این مطلب قصد داریم روش نصب و استفاده از Material UI رو بگیم.
Material ui به صورت یک پکیج npm در دسترس هست و برای نصب و ذخیره توی فایل package.json قطعه کد زیر رو اجرا کنید:
1 |
npm install @material-ui/core |
*به این نکته توجه کنید که ورژن react و react-dom که استفاده میکنید بالاتر از 16.3 باشه.
بعد از نصب چجوری میشه یک کامپوننت رو توی برنامه استفاده کنیم؟
با یک مثال ساده نحوه استفاده رو با هم میبینیم.
اگه شما بخواین از یک Button توی برنامه تون استفاده کنین اول باید این کامپوننت رو به اصطلاح import کنین توی برنامه بعد هر جا لازم بود کامپوننت رو فراخوانی کنین.
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import ReactDOM from 'react-dom'; import Button from '@material-ui/core/Button'; function App() { return ( <Button variant="contained" color="primary"> Hello World </Button> ); } ReactDOM.render(<App />, document.querySelector('#app')); |
آیکون ها
Material ui امکان استفاده از آیکون ها رو توی برنامه تون خیلی راحت تر کرده. شما میتونید SVGIcon ها و Font Icon ها رو از این طریق توی برنامه تون استفاده کنید.
آیکون ها رو به دوصورت میتونین به برنامه import کنید:
اگر برنامه شما از tree-shaking پشتیبانی میکنه روش 2 رو میتونین استفاده کنید در غیر این صورت روش اول توصیه میشه.
1 2 |
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; import ThreeDRotation from '@material-ui/icons/ThreeDRotation'; |
1 |
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons'; |
نحوه فراخوانی هر آیکون هم در هر جای برنامه که لازم داشتین اون رو اضافه میکنین مثل بقیه مثالها.
رنگ ها
یکی از تاثیرگذارترین بخش های هر سایت ترکیب رنگ و نحوه رنگبندی اجزای یک سایت است. یکی از امکاناتی که material ui در اختیار شما قرار میدهد عبارتند از کد رنگ ها به صورت دسته بندی شده، آشنایی با رنگ ها و نحوه چیدمان بهتر آنها در کنار هم و تست کردن همخوانی رنگها به صورت آنلاین که ببینین آیا دو تا رنگ با هم همخوانی دارن که ازشون استفاده کنین یا نه.
یک مثال ساده رو از این نمونه ببینید:
1 2 3 4 5 6 7 8 9 10 11 |
import { createMuiTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; const theme = createMuiTheme({ palette: { primary: purple, secondary: { main: '#f44336', }, }, }); |
تایپوگرافی
استفاده ازفونت مناسب با اندازه های استاندارد برای ارائه طرح و محتوا موثر یکی از مهمترین اصول است .
پس باید فونت مناسب و مورد نظر رو خودتون به برنامه اضافه کنید.
دو روش برای اضافه کردن فونت ب برنامه وجود داره که این دو روش رو در قالب یک مثال برای اضافه کردن فونت روبوتو بررسی میکنیم:
استفاده از CDN
1 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> |
نصب با استفاده از NPM
کد زیر رو توی ترمینال اجرا کنید:
1 |
npm install typeface-roboto --save |
و توی برنامه تون این خط کد رو اضافه کنید:
1 |
import 'typeface-roboto'; |
شما میتونید توضیحات تکمیلی این مباحث رو در سایت material-ui.com ببینید.
در قسمت بعدی کامپوننت های کتابخانه material ui رو به صورت جزئی تر بررسی کرده و اونا رو معرفی میکنیم.
مطالب زیر را حتما مطالعه کنید
طراحی فلت دیزاین و بررسی ویژگی های آن
ریسپانسیو کردن وب سایت با استفاده از Material-UI
معرفی کتابخانه ها و فریم ورک های UI
راست چین کردن کامپوننت های MaterialUI
معرفی jss و نحوه استفاده از آن در برنامه
معرفی کامپوننت های MaterialUi و نحوه سفارشی سازی آن
6 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام لطفا روش rtl کردن کامپوننت ها رو هم توضیح بدید
سلام .در داکیومنت خودش این موضوع رو به صورت کامل توضیح داده
https://material-ui.com/guides/right-to-left/
کاش یه اموزش ویدیویی از نحوه استفاده از متریال دیزاین تو ریکت نیتیو میذاشتین چون با این اموزش نتونستم اجرا کنم
چون همچین چیزی تو ریکت نیتیو نداریم و تو ریکت جی اس این کد
function App() {
return (
Hello World
);
}
ReactDOM.render(, document.querySelector(‘#app’));
استفاده میشه تو ریکت نیتیو یه render داریم یه return تو کلاس اصلی برنامه که ویوها رو میزنیم
ممنون میشم راهنماییم کنید
سلام.
برای react native باید از کتابخانه react-native-material-ui استفاده کنید و نحوه استفاده از اون رو هم در داکیومنت کتابخانه توضیح داده به صورت کامل.
داکیومنت کتابخانه
سلام.سعی میکنیم به زودی این مورد رو در قالب یک آموزش متنی یا یک تله فیلم آموزشی قرار بدیم