آموزش طراحی رابط کاربری متریال در React.js

در این مقاله آموزشی قصد داریم نحوه طراحی رابط کاربری متریال را در react به شما آموزش دهیم. کامپوننت هایی وجود دارند که توسط آنها می توان الگوی طراحی متریال گوگل را در طراحی رابط های کاربری پیاده سازی کرد.

متریال دیزاین به ما امکان طراحی قالب های مستقل از پلتفرم و اندازه صفحه نمایش می دهد. Material-UI از آخرین نسخه های پایدار تمام پلتفرم و مرورگرها حتی اینترنت اکسپلورر 11 پشتیبانی میکند.

و برای نمایش در مرورگرهای قدیمی نیاز به نوشتن هیچ کد جاوااسکریپت اضافی نیست .

سرفصل های این آموزش

نصب React.js
نصب Material-UI (متریال در react.js)
آیکن های SVG
فونت ها
Navbar
Textfield ها
Card ها
تم ها
ساخت یک تم سفارشی

نصب React.js

ترمینال را باز کرده و با استفاده از دستور زیر React.js را نصب کنید.

npx create-react-app materialui
cd materialui
npm start

نصب React.js

در صورتی که هنگام کامپایل کدها با خطایی مواجه شدید، ابتدا یک فایل .env در روت پروژه ایجاد کنید و سپس کد زیر را در این فایل قرار دهید.

SKIP_PREFLIGHT_CHECK=true

نصب Material-UI (متریال در react.js)

ترمینال را باز کرده و برای نصب Material-UI دستور زیر را اجرا کنید.

npm install @material-ui/core --save

# or

yarn add @material-ui/core

سپس فایل App.js را باز کرده و کدهای آن را مطابق زیر تغییر دهید.

// App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';

class App extends Component {
  render() {
    return (
      <Button variant="contained" color="primary">
        Welcome Material UI
      </Button>
    );
  }
}

export default App;

فایل را ذخیره کرده و به مرورگر برگردید، همان طور که می بینید Material-UI با برنامه مان یکپارچه شده است.

آیکن های SVG

ترمینال را باز کرده و کدهای CSS زیر را به آن اضافه کنید.

npm install @material-ui/icons --save

# or

yarn add @material-ui/icons

فونت ها

کدهای زیر را در فایل index.html وارد کنید.

<link rel="stylesheet"
  href=“https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet"
  href=“https://fonts.googleapis.com/icon?family=Material+Icons" />

با کد زیر می توانیم از یک دکمه برای آیکن مان استفاده کنیم. کدهای زیر را در فایل App.js بنویسید.

// App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Bookmarks from '@material-ui/icons/Bookmarks';

class App extends Component {
  render() {
    return (
      <Button variant="outlined" color="primary">
        <Bookmarks></Bookmarks>
          Chaper 2
      </Button>
    );
  }
}

export default App;

برای پیدا کردن آیکن مورد نظر از سایت material.io/tools/icons استفاده کنید.

هنگام استفاده از آیکن ها به یاد داشته باشید که نام آنها باید با فرمت pascalCase نوشته شوند.

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

Variant: استایل ظاهری دکمه را تعیین می کند که می تواند یکی از اشکال contained ،outlined،fab یا بدون استایل باشد، که معمولاً آخری (بدون استایل) برای مشخص کردن یک لینک استفاده می شود.
Color: یکی از رنگ های primary ،secondary یا default را می توان برای این پروپرتی انتخاب کرد. بعدها به شما نحوه سفارشی کردن رنگ ها را آموزش می دهیم.
Mini: اگر مقدار Variant برابر fab باشد، این پروپرتی اندازه دکمه را کاهش می دهد.

Navbar (منو)

حال در فولدر src یک کامپوننت به نام Navbar.js ایجاد کنید و کدهای زیر را در آن قرار دهید.

// Navbar.js

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

const NavBar = () => {
    return(
        <div>
        <AppBar position="static">
            <Toolbar>
                React Material UI Example
            </Toolbar>
        </AppBar>
        </div>
    )
}
export default NavBar;

سپس باید کامپوننت Navbar.js را در کامپوننت App.js ،import کنیم.

// App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Bookmarks from '@material-ui/icons/Bookmarks';

import Navbar from './Navbar';
class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <Button variant="outlined" color="primary">
          <Bookmarks></Bookmarks>
        </Button>
      </div>
    );
  }
}

export default App;

همان طور که می بینید، توانستیم یک منوی خیلی ساده ایجاد کنیم.

Textfieldها (ورودی های متنی)

کدهای زیر را در فایل App.js قرار دهید.

// App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Bookmarks from '@material-ui/icons/Bookmarks';

import TextField from '@material-ui/core/TextField';
import Navbar from './Navbar';

class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <Button variant="outlined" color="primary">
          <Bookmarks></Bookmarks>
        </Button> <br />
        <TextField
          placeholder="Placeholder here"
          label="Basic TextField" />
      </div>
    );
  }
}

export default App;

فایل را ذخیره کنید. همان طور که می بینید یک جعبه متنی برای ورود اطلاعات ایجاد شده است. کامپوننت Textfield که از @matrial/ui/core/Textfield، وارد(import) کردیم، عملکردی مانند کامپوننت input در React دارد.

Card ها

در فولدر src یک فایل به نام Card.js ایجاد کنید و کدهای زیر را در آن قرار دهید.

// Card.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import IMG from './MZ.png';

const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
};

function MediaCard(props) {
  const { classes } = props;
  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image= {IMG}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Zukerberg
          </Typography>
          <Typography component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

MediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MediaCard);

فایل را ذخیره کرده و و فایل Card.js را به فایل App.js ،import کنید.

// App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Bookmarks from '@material-ui/icons/Bookmarks';

import TextField from '@material-ui/core/TextField';
import Navbar from './Navbar';
import MediaCard from './Card';

class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <Button variant="outlined" color="primary">
          <Bookmarks></Bookmarks>
        </Button> <br />
        <TextField
          placeholder="Placeholder here"
          label="Basic TextField" />
        <MediaCard />
      </div>
    );
  }
}

export default App;

Theme یا قالب ها

Material-ui از یک روش مبتنی بر جاوا اسکریپت برای استایل دهی به کامپوننت ها استفاده می کند. به این روش css-in-js هم گفته می شود. با کمک این روش کلاسهای css توسط اشیاء جاوا اسکریپت تولید می شوند.

برای ارسال آبجکت استایل ها به داخل کامپوننت مان از متد withStyle() استفاده می کنیم.

const MyComponent = (props) => {
  const classes = props.classes;
  return (
    <div className={classes.container}>
      // stuff
    </div>
  );
}

export default withStyles(styles)(MyComponent);

ساخت یک تم سفارشی

برای ساخت یک تم سفارشی از تابع createMuiTheme استفاده کرده و مقدار برگشتی این تابع را به یک عنصر MuiThemeProvider در روت برنامه مان ارسال می کنیم.

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme();

const App = props => (
  <MuiThemeProvider theme={theme}>
    // your app
  </MuiThemeProvider>
);

حال تمام فرزندهای عنصر MuiThemeProvider یک استایل قابل سفارشی سازی دارند.

تابع createMuiTheme برای تعریف یک قالب از آبجکت استفاده می کند.

const theme = createMuiTheme({
  palette: {
    primary: '#e89eef',
    secondary: '#336b87'
  }
});

تمام رنگ ها از جمله رنگ های primary secondary، که قبلاً در این آموزش از آنها استفاده کردیم، با این روش قابل سفارشی سازی هستند.

برای کسب اطلاعات بیشتر درباره گزینه هایی که می توانید هنگام ساخت یک قالب از آنها استفاده کنید، به مستندات رسمی آن مراجعه کنید.

Material-ui یک روش عالی برای افزودن ظاهر زیبا به برنامه است.