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

در مقاله قبلی و اولین قسمت از دسته material ui ،این کتابخونه رو معرفی کردیم و یک سری از مزایای اون رو شناختیم .در این مطلب قصد داریم روش نصب و استفاده از Material UI رو بگیم.

Material ui به صورت یک پکیج npm در دسترس هست و برای نصب و ذخیره توی فایل package.json قطعه کد زیر رو اجرا کنید:

npm install @material-ui/core

1	npm install @material-ui/core

*به این نکته توجه کنید که ورژن react و react-dom که استفاده میکنید بالاتر از 16.3 باشه.

بعد از نصب چجوری میشه یک کامپوننت رو توی برنامه استفاده کنیم؟
با یک مثال ساده نحوه استفاده رو با هم میبینیم.

اگه شما بخواین از یک Button توی برنامه تون استفاده کنین اول باید این کامپوننت رو به اصطلاح import کنین توی برنامه بعد هر جا لازم بود کامپوننت رو فراخوانی کنین.

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'));

import React from 'react';

import ReactDOM from 'react-dom';

import Button from '@material-ui/core/Button';

function App() {

return (

Hello World

</Button>

);

}

ReactDOM.render(<App />, document.querySelector('#app'));

آیکون ها

Material ui امکان استفاده از آیکون ها رو توی برنامه تون خیلی راحت تر کرده. شما میتونید SVGIcon ها و Font Icon ها رو از این طریق توی برنامه تون استفاده کنید.

آیکون ها رو به دوصورت میتونین به برنامه import کنید:

اگر برنامه شما از tree-shaking پشتیبانی میکنه روش 2 رو میتونین استفاده کنید در غیر این صورت روش اول توصیه میشه.

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

1 2	import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

1	import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

نحوه فراخوانی هر آیکون هم در هر جای برنامه که لازم داشتین اون رو اضافه میکنین مثل بقیه مثالها.

طراحی یک رابط کاربری با Material UI

رنگ ها

یکی از تاثیرگذارترین بخش های هر سایت ترکیب رنگ و نحوه رنگبندی اجزای یک سایت است. یکی از امکاناتی که material ui در اختیار شما قرار میدهد عبارتند از کد رنگ ها به صورت دسته بندی شده، آشنایی با رنگ ها و نحوه چیدمان بهتر آنها در کنار هم و تست کردن همخوانی رنگها به صورت آنلاین که ببینین آیا دو تا رنگ با هم همخوانی دارن که ازشون استفاده کنین یا نه.

یک مثال ساده رو از این نمونه ببینید:

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: {
      main: '#f44336',
    },
  },
});

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

1	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

نصب با استفاده از NPM

کد زیر رو توی ترمینال اجرا کنید:

npm install typeface-roboto --save

1	npm install typeface-roboto --save

و توی برنامه تون این خط کد رو اضافه کنید:

import 'typeface-roboto';

1	import 'typeface-roboto';

شما میتونید توضیحات تکمیلی این مباحث رو در سایت material-ui.com ببینید.

در قسمت بعدی کامپوننت های کتابخانه material ui رو به صورت جزئی تر بررسی کرده و اونا رو معرفی میکنیم.

مطالب زیر را حتما مطالعه کنید

6 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

arezu گفت:

آگوست 13, 2020 در 3:06 ق.ظ

سلام لطفا روش rtl کردن کامپوننت ها رو هم توضیح بدید

پاسخ
- مهدی گفت:
  
  آگوست 13, 2020 در 7:59 ق.ظ
  
  سلام .در داکیومنت خودش این موضوع رو به صورت کامل توضیح داده
  https://material-ui.com/guides/right-to-left/
  
  پاسخ
sardarmz گفت:

ژانویه 11, 2019 در 10:56 ق.ظ

کاش یه اموزش ویدیویی از نحوه استفاده از متریال دیزاین تو ریکت نیتیو میذاشتین چون با این اموزش نتونستم اجرا کنم

پاسخ
- sardarmz گفت:
  
  ژانویه 12, 2019 در 12:28 ق.ظ
  
  چون همچین چیزی تو ریکت نیتیو نداریم و تو ریکت جی اس این کد
  function App() {
  return (
  
  Hello World
  
  );
  }
  ReactDOM.render(, document.querySelector(‘#app’));
  
  استفاده میشه تو ریکت نیتیو یه render داریم یه return تو کلاس اصلی برنامه که ویوها رو میزنیم
  
  ممنون میشم راهنماییم کنید
  
  پاسخ
  - مهدی گفت:
    
    ژانویه 12, 2019 در 7:53 ق.ظ
    
    سلام.
    برای react native باید از کتابخانه react-native-material-ui استفاده کنید و نحوه استفاده از اون رو هم در داکیومنت کتابخانه توضیح داده به صورت کامل.
    داکیومنت کتابخانه
- مهدی گفت:
  
  ژانویه 12, 2019 در 7:57 ق.ظ
  
  سلام.سعی میکنیم به زودی این مورد رو در قالب یک آموزش متنی یا یک تله فیلم آموزشی قرار بدیم
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

طراحی فلت دیزاین و بررسی ویژگی های آن

ریسپانسیو کردن وب سایت با استفاده از Material-UI

معرفی کتابخانه ها و فریم ورک های UI

راست چین کردن کامپوننت های MaterialUI

معرفی jss و نحوه استفاده از آن در برنامه

معرفی کامپوننت های MaterialUi و نحوه سفارشی سازی آن

6 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ