Material ui: The React component library you always wanted

Layout для Material-UI. Создание layout на основе библиотеки… | by Daria Sidorova | NOP::Nuances of Programming

Пример отзывчивого Layout из material.io

Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на основе этих компонентов. Поэтому приходится комбинировать Drawer, Header (AppBar), Content и Footer самостоятельно. Для тех, кто не разбирается в Material-UI, потребуется как минимум 3–4 часа, чтобы разобраться (с высокой вероятностью придется в дальнейшем все переделывать 😭).

Причины, по которым создание layout отнимает так много времени:

1. Необходимо понимание CSS на уровне intermediate и advanced, а также навыки работы с flexBox.
2. Множество вариантов для различных размеров экрана (отзывчивость).
3. Множество зависимых функций. Например, если Drawer находится близко к Header, то второй уменьшается в ширине, чтобы заполнить экран и содержимое.

Предлагаю готовое решение. Я разработал код, который представляет собой комбинацию компонентов Material-UI и базового контекста react.

yarn add @material-ui/core

Посмотреть демо-версию можно здесь.

На изображении представлено взаимодействие между компонентами.

Все просто. Отображаемый компонент Root является Provider для конфигурации layout (подробнее об этом позже). Каждый дочерний элемент (Nav, Header, Content и Footer) присоединяется к контексту и ведет себя по-разному в зависимости от переменной. Рассмотрим каждую переменную в конфигурации отдельно.

В конфигурации можно установить 9 переменных.

1. navVariant — тот же вариант, который допускает Drawer. Устанавливается различным образом в зависимости от экрана.

// example
const config = {
navVariant: {
xs: 'temporary', // recommended in mobile
sm: 'persistent',
md: 'permanent',
}
}

2. navWidth — ширина навигации (белая область). Ее также можно установить числом или в качестве объекта (в зависимости от экрана).

Пример навигации (drawer)

3. navAnchor — расположение навигации. По умолчанию установлено left, который редко изменяется. Однако он поддерживает отзывчивый шаблон (объект) и при желании можно внести изменения.

4. С помощью collapsible страницу навигации можно свернуть. Кнопка сворачивания отображается автоматически. Он также поддерживает отзывчивый шаблон (объект).

5. collaspedWidth — ширина для навигации в свернутом состоянии. Поддерживает отзывчивый шаблон (объект).

6. clipped размещает заголовок на середину экрана (навигация находится за заголовком, а не ниже). Поддерживает отзывчивый шаблон (объект), однако обычно является одинаковым на различных устройствах.

7. headerPosition — расположение официального AppBar (Header — это AppBar). Поддерживает отзывчивый шаблон (объект).

8. С помощью squeezed заголовок и содержимое остаются на экране при изменении ширины навигации. Это означает, что можно увидеть, как они растягиваются и сжимаются (также оказывают влияние на дочерние элементы, находящиеся внутри них, поскольку ширина является динамической). Поддерживает отзывчивый шаблон (объект).

Отсутствие squeezed (ошибка)При наличии squeezed (правильный вариант)

9. footerShrink. Поддерживает отзывчивый шаблон (объект).

Ошибка footerShrinkПравильная версия footerShrink

Вот и все. Разве может быть еще проще?

Игровая площадка для каждого пресета. Попробуйте!

Для тех, кому не понравились эти пресеты, я создал Layout Builder. Попробуйте прямо сейчас.

Читайте также:

• React Native vs Flutter
• 9 UI-библиотек веб-компонентов, которые пригодятся в 2019 году
• 12 UI Grid-систем и библиотек для React актуальных в 2019 году

Перевод статьи siriwatknp: Introducing Layout for Material-UI

Полное руководство по React JS material-ui

26. 06.2018 Комментарии к записи Полное руководство по React JS material-ui отключены 1,821 Просмотров

От автора: в React JS material-ui — это часть Material Design. Material Design — это язык дизайна, впервые представленный Google в 2014 году. Это визуальный язык, который использует макеты на основе сетки, гибкую анимацию и переходы, дополнения и эффекты глубины, такие как освещение и тени. Цель Material Design сводится к трем вещам: Создание, Унификация и Настройка.

Создание — Material Design направлен на предоставление визуального языка, который синтезирует классические принципы дизайна. Унификация — он нацелен на разработку единой базовой системы, которая объединяет пользовательский интерфейс на разных платформах, устройствах и методах ввода. И Настройка обеспечивает визуальный язык и гибкую основу для инноваций и брендинга.

В этой статье мы рассмотрим, как создавать приложения React в стиле Material Design. Существуют различные библиотеки, которые помогают в этом, но для этой статьи мы будем использовать библиотеку material-ui.

Приступаем к работе

material-ui — это набор компонентов React, который реализует Google Material Design (material-ui недавно выпустили v1 библиотеки). Эти компоненты работают изолированно, это означает, что они являются само-поддерживающими и вводят только те стили, которые они должны отображать.

Чтобы начать работу с материалом-ui, все, что вам нужно, это запустить команду терминала, приведенную ниже.

npm install @material-ui/core

Далее, давайте рассмотрим некоторые из основ material-ui, относящихся к Material Design, и посмотрим, как она настраивается.

Типографика

Когда речь заходит о Material Design, шрифтом по умолчанию является Roboto. Однако material-ui не поставляется с Roboto по умолчанию. Шрифт можно импортировать в проект React с использованием одного из двух методов. Из CDN:

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

Установить с помощью NPM

Вы можете установить его в качестве пакета npm, введя в терминале команду:

npm install typeface-roboto --save

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

import 'typeface-roboto'

material-ui также предоставляет компонент под названием Typography. Компонент Typography в основном позволяет отображать текст в приложении.

<Typography variant="title" color="inherit">Some text in here</Typography>

Свойство variant помогает применять стили оформления темы, а color — это цвет компонента. Он поддерживает цвета тем, которые подходят для компонента.

CSS Baseline

Если вы писали код front-end, вы уже должны знать о normalize.css. Если нет, это набор для нормализации элементов HTML и атрибутов стилей. material-ui предоставляет собственную версию normalize.css — CssBaseline, компонент, который обеспечивает изящный, последовательный и простой набор базовых стилей. CSSBaseline делает следующее:

Закрепляет отступы во всех браузерах

Применяет цвет фона Material Design по умолчанию.

Включает сглаживание шрифтов для лучшего отображения шрифта Roboto

Базовый размер шрифта не указывается в html, но предполагается, что это 16px (размер браузера по умолчанию)

Сетка

Адаптивный пользовательский интерфейс Material Design основан на макете с 12 столбцами. Эта сетка создает визуальную согласованность между макетами.

Система сетки material-ui характеризуется следующим:

Использует Flexbox

Содержит два типа макетов: контейнеры и элементы

Ширина элементов задается в процентах, поэтому они всегда являются гибкими и их размер указан относительно их родительского элемента

Элементы имеют отступы для создания интервала между отдельными элементами.

Существует пять контрольных точек сетки: xs, sm, md, lg и xl

Иконки

Иконки — важная часть Material Design, они используются в кнопках для обозначения действия, для передачи информации и т.д. Они используются для обозначения команды, файла, устройства или каталога.

Иконки также используются для представления таких действий, как «В корзину», «Печать» и «Сохранить», которые обычно встречаются в панелях приложений, панелях инструментов, кнопках и списках.

Иконки в material-ui могут отображаться с использованием двух методов: Icon для отображения шрифтов иконок и SvgIcon для визуализации SVG контуров.

Компонент SvgIcon принимает элемент SVG-контура в качестве своего дочернего элемента и преобразует его в компонент React, который отображает контур, и делает возможным определение стилей иконки и реакцию на события мыши. Это можно увидеть в следующем примере:

Material- ui также содержит пакет, который поставляется с предустановленными иконками, которые будут использоваться в приложении React. Это совсем другой пакет, и он включает официальные иконки Material, преобразованные в компоненты SvgIcon. Вы можете установить его с помощью следующей команды:

npm install @material-ui/icons

Кнопки

Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием. Они помогают сообщать о действии, которое может предпринять пользователь. Поскольку компоненты material-ui изолированы, вам нужно импортировать компонент Button.

import Button from '@material-ui/core/Button';
<Button color="primary">Hello World</Button>

Компонент Button может принимать множество реквизитов, таких как цвет, вариант, размер и т. д. Полный список вы можете посмотреть здесь.

Кнопки в Material-ui и Material Design в целом могут принимать любую из следующих форм:

Плоские кнопки

Плоские кнопки — это кнопки только с текстом. Они не имеют цвета фона и не имеют границы. Они могут использоваться в диалогах, панелях инструментов или встраиваться в элементы. Они не имеют заливки, но при печати заполняются цветом.

<Button color="primary">Primary</Button>

Контурные кнопки

Контурные кнопки — это текстовые кнопки средней выразительности. Они ведут себя как плоские кнопки, но имеют контур и обычно используются для важных действий, но не являются основными кнопками действия в приложении. Их внешний вид обычно характеризуется границей и обозначением цвета фона при наведении.

<Button variant="outlined">Default</Button>

Поднятые кнопки

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

<Button variant="raised" color="secondary">Secondary</Button>

Гибкие кнопки действия

Гибкие кнопки действия (FAB) представляют основные действия, такие как составление нового электронного письма, добавление нового контакта или удаление изображения.

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

<Button variant="fab" color="primary" aria-label="add"><AddIcon /</Button>

Компоненты material-ui

material-ui содержит много компонентов пользовательского интерфейса, которые помогают создавать приложение React в теме Material Design. Давайте рассмотрим некоторые компоненты material-ui. Для каждого из компонентов приведен пример, и вы можете просмотреть код на CodeSandbox, перейдя по соответствующим ссылкам.

Панель приложения

Панель приложения, ранее известная как панель действий в Android, выполняет роль меню навигации.

Это панель инструментов, используемая для брендинга, навигации, поиска и действий. Чтобы использовать панель приложения, необходимы эти два компонента из material-ui:

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

Навигация

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

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

Вкладки

Вкладки позволяют легко просматривать и переключаться между различными представлениями. Компонент вкладок может быть простой вкладкой без добавлений, как показано в первом примере ниже, или прокручиваемой вкладкой с несколькими внутренними вкладками. Вкладка также может состоять из иконок в качестве заголовков / ярлыков.

Списки

Списки представляют несколько пунктов, расположенных вертикально, которые составляют единый элемент. Списки состоят из непрерывного столбца строк. Каждая строка содержит плитку. Первичные действия представлены плитками, а дополнительные — иконками и текстом.

Карточки

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

Модальные компоненты

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

Управляет стеком диалога

Создает фон, для отключения взаимодействия ниже модального компоненты

Корректно управляет фокусом, переходя к модальному контенту и сохраняя его, пока модальный компоненты не будет закрыт

Отключает прокрутку содержимого страницы при открытии

Автоматически добавляет соответствующие роли ARIA

Список сетки

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

Дополнительный пример списка Grid можно увидеть ниже, он использует GridListTileBar для добавления наложения в каждый GridListTile. Наложение может содержать заголовки, подзаголовки и вторичное действие — в этом примере IconButton — которые могут использоваться для передачи дополнительной информации.

Таблицы

В таблицах данных отображаются наборы необработанных данных. Они обычно используются в стационарных корпоративных продуктах.
Таблица данных содержит строку заголовка вверху, в которой перечислены названия столбцов, а затем строки данных. Для доступности первый столбец установлен в качестве элемента th со scope — «row». Это позволяет экранным дикторам идентифицировать значение ячейки по имени строки и столбца.

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

Заключение

Вопрос в том, должны ли вы использовать Material Design в своем проекте React? Ответ на этот вопрос зависит от использования вашего проекта и того, чего вы пытаетесь достичь. Material Design может дать рекомендации по улучшению пользовательских интерфейсов для приложений. Это может вдохновить ваших дизайнеров задуматься о иерархии информации, основываясь на руководящих принципах.

В то же время, если вы пытаетесь провести ребрендинг, Material Design может и не быть тем, что вы ищете. Вы хотите, чтобы ваш бренд выглядел как сотни других веб-сайтов в Интернете? Вы также можете изучить другие библиотеки Material Design, такие как response-md, materialize (CSS framework).

Автор: Yomi

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

Редакция: Команда webformyself.

Готовые к использованию компоненты, бесплатны навсегда

MUI Core

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

Начало работы

Поиск библиотек React UI

2Spot MUI

3Выбрать MUI

Компоненты MUI работают изолированно. Они самодостаточны и будут внедрять только те стили, которые им нужны для отображения.

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

Температурный диапазон

Подвал

Подвал

0,5 Звезд1 Звезда1,5 Звезда2 Звезда2,5 Звезда3 Звезда3,5 Звезда4 Звезда4,5 Звезда5 ЗвездаПустой сила ледников, постоянство жизни и спокойствие Высокой Сьерры. Он славится своими гигантскими древними секвойями и гранитными скалами Эль-Капитан и Хаф-Доум.

Лучшие в мире команды разработчиков доверяют MUI предоставление непревзойденных возможностей как для разработчиков, так и для пользователей.

Библиотека компонентов

Более 40 компонентов строительных блоков

Мы создали базовые компоненты для вашей системы проектирования, что позволит вам еще быстрее запустить классный продукт, о котором вы мечтали. Мы получили вашу спину!

Гораздо больше

 

   }>
    Добавить в корзину
  
  }>
    Добавить в корзину
  
  }>
    Добавить в корзину
  
 

Собственный стиль!

Создайте свою собственную систему дизайна, используя сложные функции тем. Вы также можете начать с использования Google Material Design.

Темы

Создайте свою дизайн-систему такой, какой вы хотите ее видеть

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

Ультрафиолет

Подвал • Рядом с собой

 <Карта
  вариант = "в общих чертах"
  х = {{
    р: 1,
    дисплей: «гибкий»,
    flexDirection: {xs: 'столбец', sm: 'строка'},
  }}
>
  
  
    <Типография
      вариант = "тело1"
      цвет = "текст.основной"
      fontWeight={600}
      х = {{
        textAlign: {xs: 'центр', sm: 'начало'},
        мт: {кс: 1,5, см: 0},
      }}
    >
      ультрафиолет
    
    <Типография
      компонент = "дел"
      вариант = "заголовок"
      цвет = "текст. вторичный"
      fontWeight={500}
      sx={{ textAlign: {xm: 'центр', sm: 'начало' } }}
    >
 
      Подвал • Вне себя
    
    <Стек
      направление = "ряд"
      интервал = {1}
      х = {{
        м: 2,
        justifyContent: {xs: 'space-between', sm: 'flex-start'},
      }}
    >
      
        
      
      <Кнопка со значком
        aria-label={пауза? 'воспроизведение' : 'пауза'}
        sx={{мх: 1}}
        onClick={() => setPaused((val) => !val)}
      >
        {пауза?  : }
       
      
        
      
    
  
 

Стилизация

Быстрое добавление и настройка любых стилей с помощью утилит CSS

Утилиты CSS позволяют работать быстрее и упрощают работу разработчика при стилизации любого компонента.

123 Main St, Phoenix, AZ

$280 000 — $310 000

Уровень достоверности 85%

 
  
  
    <Типографский вариант="body2" color="text.secondary">
      123 Main St, Финикс, Аризона
    
    <Компонент типографики="div" fontWeight="bold">
      280 000 – 310 000 долларов США
    
    <Коробка
      х = {{
        мл: -1,
        мт: 0,75,
        пикс: 1,
        ру: 0,5,
        границаРадиус: 1,
        дисплей: «гибкий»,
        типографика: 'заголовок',
        bgcolor: (тема) =>
          theme. palette.mode === 'темный' ? 'первичный.900' : "основной.50",
        цвет: (тема) =>
          theme.palette.mode === 'темный' ? '#fff' : 'основной.700',
      }}
    >
      
      Уровень достоверности 85%
    
  
 

Сообщество

Получайте и помогайте, присоединившись к нашему сообществу участников

Основные компоненты были созданы многими руками по всему миру. Присоединяйтесь к сообществу, чтобы помочь нам расширить его еще больше!

Узнайте больше

3,2 м

Еженедельные загрузки на NPM

78K

Звезды на GitHub

2,4K

Вкладчики с открытым исходным источником

17K

Свитрины в Твиттере

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

Установка. самый популярный в мире фреймворк React UI.

Установка по умолчанию

Запустите одну из следующих команд, чтобы добавить пользовательский интерфейс материалов в свой проект:

npm

 npm install @mui/material @emotion/react @emotion/styled
 

пряжа

 пряжа добавить @mui/material @emotion/react @emotion/styled
 

Со стилевыми компонентами

Пользовательский интерфейс материалов использует Emotion в качестве механизма стилей по умолчанию. Если вместо этого вы хотите использовать стилизованные компоненты, выполните одну из следующих команд:

npm

 npm install @mui/material @mui/styled-engine-sc styled-components
 

пряжа

 пряжа добавить @mui/material @mui/styled-engine-sc styled-components
 

Посетите руководство по движку Styled для получения дополнительной информации о том, как настроить styled-components.

Одноранговые зависимости

react >= 17.0.0 и react-dom >= 17.0.0 являются одноранговыми зависимостями.

Шрифт Roboto

Material UI предназначен для использования шрифта Roboto шрифт по умолчанию. Вы можете добавить его в свой проект с помощью npm или yarn через Fontsource или через CDN Google Fonts.

нпм

 нпм установить @fontsource/roboto
 

пряжа

 пряжа добавить @fontsource/roboto
 

Затем вы можете импортировать его в свою точку входа следующим образом:

 импорт '@fontsource/roboto/300. css';
импортировать '@fontsource/roboto/400.css';
импортировать '@fontsource/roboto/500.css';
импортировать '@fontsource/roboto/700.css';
 

Fontsource можно настроить для загрузки определенных поднаборов, насыщенности и стилей. Конфигурация типографики Material UI по умолчанию зависит только от веса шрифта 300, 400, 500 и 700.

Google Web Fonts

Чтобы установить шрифт Roboto в свой проект с помощью Google Web Fonts CDN, добавьте следующий фрагмент кода в файл 9 вашего проекта.0120 <голова /> тег:

 <ссылка
  отн = "таблица стилей"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
 

Значки

Чтобы использовать компонент значка шрифта или предварительно созданные значки материалов SVG (например, те, которые можно найти в демонстрационных значках), необходимо сначала установить шрифт значков материалов. Вы можете сделать это с помощью npm или yarn или с помощью CDN Google Web Fonts.

нпм

 нпм установить @mui/icons-material
 

пряжа

 пряжа добавить @mui/icons-material
 

Google Web Fonts

Чтобы установить шрифт Material Icons в свой проект с помощью Google Web Fonts CDN, добавьте следующий фрагмент кода в тег вашего проекта:

Чтобы использовать компонент Font Icon , вы должны сначала добавить шрифт Material Icons.