Как использовать Materio для создания потрясающих приложений Next.js

Узнайте, как использовать Materio, шаблон администрирования Next.js и React на основе MUI, для создания красивых и функциональных приложений Next.js.

Создание веб-сайта с нуля не всегда является наиболее подходящим вариантом из-за нехватки времени и ресурсов. Также не имеет смысла создавать сайты с нуля, когда уже существует так много сайтов, написанных другими разработчиками. Здесь пригодятся шаблоны и библиотеки. Эти инструменты позволяют упростить вашу работу, при этом создавая отличные проекты.

Использование шаблонов выгодно, потому что шаблоны уже протестированы и отлажены другими разработчиками, что повысит качество вашего кода. Шаблоны также сделаны с учетом гибкости. Они могут использоваться и изменяться другими разработчиками без каких-либо осложнений. В дополнение к коду шаблоны предоставляют разработчикам возможности настройки, соответствующие потребностям их проектов.

В этой статье мы рассмотрим один из таких шаблонов для веб-приложений: Materio. Materio — это шаблон администратора Next.js и React, основанный на MUI.

Что такое Материо?

Materio — это шаблон администратора, основанный на пользовательском интерфейсе материалов. Его пользовательский интерфейс удобен для разработчиков, богат функциями и легко настраивается. Он доступен в версиях JavaScript и TypeScript и имеет такие функции, как:

Вертикальное и горизонтальное меню
3 нишевые приборные панели
Различные макеты форм
Различное расположение карт
Компонент быстрого поиска
Таблицы и сетки
Библиотеки карт
Полностью адаптивный макет
Организованная структура папок
Чистый, хорошо документированный код

Materio предлагает бесплатный и премиальный уровни. Бесплатная версия является базовой, но работает для большинства приложений, которым требуется панель администратора. Премиум-версия предоставляет больше возможностей, в том числе большее разнообразие диаграмм, карточек, макетов и других компонентов. Узнайте , что предлагает каждый уровень здесь .

Установка Материо

Установка Материо проста. Первым шагом является выбор шаблона Materio на веб-сайте выбора темы. На веб-сайте вы найдете два варианта загрузки темы: Скачать бесплатно и Проверить версию Pro . А пока нажмите «Загрузить бесплатно » . Вам нужно будет войти на сайт выбора темы, чтобы загрузить контент с их веб-сайта.

Загруженный файл будет .zipфайлом. Извлеките его в нужное место. В нем вы найдете другие файлы, в том числе LICENSE, README.md и файл HTML, который перенаправит вас к документации Materio. Вы также найдете версии шаблона Materio для JavaScript и TypeScript:

Откройте ту версию каталога, которая вам больше всего подходит. В каталоге вы можете установить зависимости проекта с помощью вашего любимого менеджера пакетов. Materio рекомендует разработчикам использовать Yarn:

yarn install

После установки зависимостей вы можете запустить шаблон с помощью следующей команды:

yarn run dev

Это запустит приложение Next.js в localhost:3000. Вот целевая страница панели администратора:

Настройка вашего приложения Next.js

В src→viewsкаталоге вы найдете различные компоненты для настройки вашего приложения Next.js, такие как карточки, информационные панели, макеты форм, таблицы и многое другое. Давайте настроим один из компонентов для отображения динамических данных. Мы собираемся настроить StatisticsCardкомпонент для отображения статистики репозитория GitHub.

Во-первых, давайте получим данные на index.jsстранице. Нам нужно импортировать useStateи useEffectиз React:

import { useState, useEffect } from 'react'

Затем в Dashboardкомпоненте создайте useEffectхук. Мы получаем данные в этом хуке:

useEffect(() => {
  const fetchAndSetData = async () => {
    const res = await fetch(
      "https://api.github.com/repos/surajondev/awesome-web3.0", // replace URL with GH repo that you want stats for
    );
    const datajson = await res.json();
    setData(datajson);
  };
  fetchAndSetData();
}, []);

Теперь мы установим данные, которые определены с помощью useEffectхука выше:

const [data, setData] = useState()

После этого нам нужно установить некоторые реквизиты для StatisticsCard:

<StatisticsCard
  stars={data.stargazers_count}
  forks={data.forks_count}
  issues={data.open_issues}
/>;

В src→pages→dashboardкаталоге вы увидите StatisticsCard.jsфайл, в котором находится salesDataмассив, в котором хранятся данные. Вы можете изменить имя массива, чтобы оно лучше отражало данные; Я изменил его на data. Внеся несколько изменений в свойства, мы можем настроить массив данных, чтобы он лучше соответствовал тому, как мы хотим отображать данные нашего репозитория GitHub:

const data = [
  {
    stats: '0',
    title: 'Stars',
    color: 'primary',
    icon: <TrendingUp sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    title: 'Forks',
    color: 'success',
    icon: <AccountOutline sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    color: 'warning',
    title: 'Issues',
    icon: <CellphoneLink sx={{ fontSize: '1.75rem' }} />
  }
]

Теперь нам нужно изменить эти данные в соответствии с реквизитом. Вот звезды, вилки и выпуски в качестве реквизита. Мы присваиваем эти значения массиву данных:

const StatisticsCard = ({ stars, forks, issues }) => {     // extracting the props
  data[0].stats = stars
  data[1].stats = forks
  data[2].stats = issues

После изменения данных мы можем легко увидеть изменения в панели инструментов:

Укладка с Материо

Шаблон Materio использует пользовательский интерфейс Chakra в качестве основы CSS для добавления стилей. Вы также можете удобно настроить тему Materio для следующего:

Добавление точек останова для настройки скорости отклика
Переопределение компонентов, таких как оповещения, аккордеоны, аватары и т. д.
Изменение цветовой палитры сайта
Добавление теней
Изменение расстояния между компонентами
Изменение типографики приложения

В следующих разделах мы рассмотрим, как настроить цветовую палитру и типографику нашего приложения.

Изменение цветовой палитры панели администратора

В src→@core→themeкаталоге вы найдете конфигурацию темы для всех компонентов, о которых мы упоминали ранее. Там вы найдете paletteкаталог, в котором есть index.jsфайл, содержащий информацию, связанную с цветовой палитрой.

В index.jsфайле вы найдете returnраздел, в котором собраны все цвета. Здесь вы можете внести изменения, чтобы отразить желаемую цветовую палитру. Мы изменим некоторые цвета, чтобы отразить другую тему.

Мы можем изменить основные цвета на светлую или темную тему в верхней части файла:

// for customizing the main colors
const lightColor = '128, 0, 128' // colors in RGB
const darkColor = '231, 227, 252' // colors in RGB
const mainColor = mode === 'light' ? lightColor : darkColor

После этого вы можете изменить primaryGradientфункцию, которая возвращает основные цвета градиента:

// for customizing gradient
const primaryGradient = () => {
    if (themeColor === 'primary') {
      return '#800080'
    } else if (themeColor === 'secondary') {
      return '#FF5733'
    } else if (themeColor === 'success') {
      return '#00FF00'
    } else if (themeColor === 'error') {
      return '#FF0000'
    } else if (themeColor === 'warning') {
      return '#FFA500'
    } else {
      return '#007FFF'
    }
  }

Затем в returnразделе вы найдете варианты цвета, такие как основной, дополнительный, успех и т. д. Каждый вариант имеет три основных свойства: светлый, темный и основной. Основной цвет будет применен по умолчанию. При изменении темы будут применены светлые и темные цвета:

primary: {
  light: '#800080',
  main: '#800080',
  dark: '#804BDF',
  contrastText: '#FFF'
},

На изображении ниже показано сравнение темы Materio до и после настройки цветовой палитры:

Внесение изменений в типографику

Далее мы можем изменить типографику проекта. В каталоге темы вы найдете каталог типографики. Когда вы откроете index.jsфайл, вам будут представлены четырнадцать вариантов типографики, доступных в Materio. Вот несколько из них:

    h1: {
      fontWeight: 500,
      letterSpacing: '-1.5px',
      color: theme.palette.text.primary
    },
    h2: {
      fontWeight: 500,
      letterSpacing: '-0.5px',
      color: theme.palette.text.primary
    },
    h3: {
      fontWeight: 500,
      letterSpacing: 0,
      color: theme.palette.text.primary
    },

Вы можете настроить каждый из вариантов в соответствии со своим стилем — вам просто нужно указать свойства CSS с их значением. Здесь вы также можете добавить семейство шрифтов. Настроим h1тег:

h1: {
  fontWeight: 700,
  letterSpacing: '2px',
  fontFamily: 'Inter',
  lineHeight: '10px',
  color: theme.palette.text.primary
},

Вы также можете расширить типографику, добавив больше вариантов:

inputErrorText: {
  fontFamily: 'Inter',
  fontSize: '14px',
  fontStyle: 'normal',
  fontWeight: '400',
  lineHeight: 'normal',
  color: 'red'
}

Теперь, когда вам нужно добавить вариант в компонент, вы можете использовать следующий синтаксис:

import Typography from '@mui/material/Typography' // importing Typography from MUI
// use variant tag to add the name of the typography variant
<Typography variant='inputErrorText'>
    There is an error.
</Typography>

После успешной интеграции вы можете просмотреть его на веб-странице:

Вот как вы можете успешно настроить типографику в пользовательском интерфейсе Materio. Поскольку все темы основаны на пользовательском интерфейсе Chakra , базовые знания об этом фреймворке помогут вам при настройке. В противном случае вы можете легко учиться во время работы, потому что пользовательский интерфейс Chakra интуитивно понятен в освоении.

Заключение

Materio предлагает множество функций, включая вертикальные и горизонтальные меню, нишевые информационные панели, макеты форм, различные макеты карточек, компоненты поиска, таблицы, диаграммы и многое другое. В этом руководстве мы узнали, как легко установить Materio, как заполнить компонент пользовательскими данными и как оформить наше приложение с помощью пользовательского интерфейса Chakra.

Для большего контроля и настройки рассмотрите возможность использования Materio для предоставления страниц аутентификации и входа в панель администратора вашего проекта.

Спасибо за прочтение!

Источник: https://blog.logrocket.com

#nextjs