Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2



Книга Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2



Продолжаем серию статей из 3 частей по визуализации данных с помощью React, Material UI, Tailwind CSS и Nivo.


В 1-й части мы создали каркас для веб-приложения, содержащий 3 отдельные страницы: Home, About и Insights.


В этой, 2-й части, будем использовать Tailwind CSS в качестве фреймворка для работы со стилями веб-приложения.


Предварительные условия


Если у вас еще нет каркаса веб-приложения, выполните шаги, указанные в 1-й части. Затем интегрируйте в проект Tailwind CSS.


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


Создание цветовой схемы


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


Источник

Как большой любитель синего цвета, я выбрал схему, приведенную выше. Для использования ее в приложении, надо скопировать HEX-код и добавить его в файл tailwind.config.js, как показано здесь:


module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
"half-baked": {
50: "#f1f9fa",
100: "#dceff1",
200: "#bde0e4",
300: "#9aced5",
400: "#5aa9b6",
500: "#3f8e9b",
600: "#377483",
700: "#32606c",
800: "#30505a",
900: "#2b444e",
950: "#192c33",
},
},
},
},
plugins: [],
};

После обновления конфигурационного файла Tailwind CSS будет автоматически генерировать утилитарные классы на основе выбранных цветов. Например, чтобы изменить цвет фона на первый цвет, нужно применить его к HTML-компоненту, указав в имени класса bg-half-baked-50. Таким образом, получаем последовательный и легко настраиваемый способ управления цветами во всем проекте.




Применение Tailwind CSS в App.js


Теперь можно применить новую цветовую схему и глобальные стили к приложению. Для этого замените текущий код в App.js на следующий:


import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";

const Home = () => (
<div>
<h2 className="text-center font-bold text-4xl">Home</h2>
</div>
);
const About = () => (
<div>
<h2 className="text-center font-bold text-4xl">About</h2>
</div>
);
const Insights = () => (
<div>
<h2 className="text-center font-bold text-4xl">Insights</h2>
</div>
);

function App() {
const [drawerOpen, setDrawerOpen] = useState(false);

const toggleDrawer = (open) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}

setDrawerOpen(open);
};

return (
<Router>
<div className="bg-zinc-900 text-half-baked-50">
<Drawer
anchor="left"
open={drawerOpen}
onClose={toggleDrawer(false)}
PaperProps={{ style: { width: "15%" } }}
>
<List>
<ListItem button key="home">
<Link to="/" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="Home" />
</Link>
</ListItem>
<ListItem button key="about">
<Link to="/about" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="About" />
</Link>
</ListItem>
<ListItem button key="insights">
<Link to="/insights" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="Insights" />
</Link>
</ListItem>
</List>
</Drawer>

<nav className="flex p-4 space-x-4 bg-half-baked-950">
<button onClick={toggleDrawer(true)} style={{ cursor: "pointer" }}>

</button>
</nav>

<Routes>
<Route path="/about" element={<About />} />
<Route path="/insights" element={<Insights />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}

export default App;

В приведенном выше коде мы обновили заголовки каждой страницы, сообщив им следующие стили Tailwind CSS.



  • text-center: этот класс центрирует текст по горизонтали внутри родительского элемента (в данном случае элемента <h2>). Он обеспечивает выравнивание текста по центру контейнера.

  • font-bold: этот класс применяет к тексту жирный шрифт.

  • text-4xl: этот класс устанавливает размер текста “4xl” в Tailwind CSS, который является предопределенным классом размера текста. Фактический размер может варьироваться в зависимости от конфигурации Tailwind CSS, но обычно этот размер шрифта крупнее стандартного.


Мы также обновили элемент <div> на каждой странице с помощью следующих классов.



  • bg-zinc-900: этот класс устанавливает цвет фона <div> в цвет с названием “zinc-900”, который представляет собой оттенок серого (может варьироваться в зависимости от конфигурации Tailwind CSS). Tailwind CSS использует подход, основанный на использовании утилит, где цвета предопределены и могут применяться по имени.

  • text-half-baked-50: этот класс устанавливает цвет текстового контента <div> в цвет с именем “half-baked-50”. Обратите внимание на применение названия цветовой палитры “half-baked” в файле tailwind.config.js.


Наконец, мы применили следующие классы Tailwind CSS к компоненту навигации.



  • flex: этот класс применяет Flexbox к элементу <nav>, превращая его во flex-контейнер. Flexbox  —  это модель макета CSS, которая позволяет создавать гибкие и отзывчивые макеты. Элементы внутри гибкого контейнера могут быть легко выравнены и распределены внутри контейнера.

  • p-4: этот класс добавляет внутренний отступ (паддинг) к элементу <nav>. Класс p-4 указывает на то, что размер паддинга должен составлять 1rem (является общепринятой единицей измерения в веб-разработке).

  • space-x-4: этот класс добавляет горизонтальный интервал между дочерними элементами <nav>. Класс space-x-4 указывает на то, что между дочерними элементами должен быть горизонтальный интервал в 1rem.

  • bg-half-baked-950: этот класс устанавливает цвет фона <nav> в цвет с именем “half-baked-950”, который в нашем случае является темно-бирюзовым цветом и применяется в качестве баннера по горизонтали.


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


Локальный браузер: домашняя страница

Локальный браузер: навигация



Заключение


Мы применили Tailwind CSS в приложении React. Приступив к созданию стилей приложения, в следующей части этой серии статей перейдем к разработке дэшборда с помощью компонентов Nivo.



22   0  

Comments

    Ничего не найдено.