Рубрики
Без рубрики

Познакомьтесь с Material-ui – ваша новая любимая библиотека пользовательского интерфейса

Code Realm Mateal-ui – ваш новый любимый интерфейс пользовательского интерфейса UibleupDate (17/05/2018): Material-ui v1.0.0 отсутствует! Проверьте этот пост Olivier.huh? Еще одна библиотека? Что не так с Bootstrap? И почему не v0.20? Большие вопросы! Давайте начнем с краткого введения. В

Автор оригинала: FreeCodeCamp Community Member.

по коду царстве

Хм? Еще одна библиотека? Что не так с Bootstrap? И почему не v0.20?

Большие вопросы! Давайте начнем с краткого введения. В двух словах Material-ui – это проект с открытым исходным кодом, в котором есть Реагировать Компоненты, которые реализуют Дизайн материала Google Отказ

Он начался в 2014 году, недолго после реакции вышла на публику, и имеет Вырос в популярности с тех пор. С Более 35 000 звезд на Github Материал-интерфейс является одним из лучших библиотек интерфейсов пользовательских интерфейсов для реакции.

Его успех не пришел без проблем, хотя. Разработанный с меньшим количеством Material-ui v0.x был склонен к общим подводным камням CSS, таких как глобальный объем, который ведет проект на CSS-in-js траектория. Вот как Следующий пришел в 2016 году.

Путешествие к лучшему стилю По мере того как Olivier Tassinari ставит его, начался с встроенных стилей, но их неоптимальная производительность и поддержка ограниченной функции (думайте, что псевдоселекторы или медиа-запросы), в конечном итоге сделали переход команды на JSS Отказ И мальчик они сделали умный выбор.

Какая шумиха с выпуском V1?

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

  • Динамические стили, генерируемые во время выполнения
  • вложенные темы с интуитивно понятными переопределениями
  • Уменьшенное время загрузки с расщеплением кода

И Многое другое Отказ Библиотека также достаточно зрелая, чтобы его можно было бы использовать в производстве, чтобы команда предложила V1 для Все новые проекты идти вперед.

Хорошо, мы собираемся построить приложение или что?

Рад, что вы спросили! Для этой демонстрации мы построим простое приложение для фитнеса. Теперь все надоело делать приложения, верно?

Чтение великолепно и все, но смотреть часто веселее! Проверьте этот плейлист, который я сделал на Youtube, если вы хотите создать более продвинутое приложение.

Хорошо, ты меня убедил. Как мне начать?

Сначала мы будем загрузить наше приложение с помощью Create-React-App

create-react-app mui-fitnesscd mui-fitnesscode .

А как насчет материала-ui?

Если у вас есть пряжа, установка так же просто, как

yarn add @material-ui/core

В противном случае с NPM

npm i @material-ui/core

Не так давно мы бы уточняли @next Теги, чтобы потянуть в последнем председателе (например, он мог бы выглядеть как v1.0.0-beta.47 ). Теперь, когда V1, так и v0.x находятся под Материал-ui Область применения, нам нужно ссылаться на ядро библиотеки с /ядро нацелиться на последний выпуск. Не пропустите эту последнюю часть, иначе вы получите стабильный 0,20 Зависимость!

Подожди, это действительно это?

Почти! Одна последняя вещь – шрифты. Мы пойдем с рекомендуемыми Робото шрифт от CDN Google:

В качестве альтернативы вы можете вытащить его из НПМ с

yarn add typeface-roboto# or npm i typeface-roboto

В этом случае вам нужно иметь импорт в корне вашего проекта

// Make sure you only load 300, 400, & 500 font weights though!import 'typeface-roboto'

Готово! Что мне делать дальше?

Ну, давайте рефактором нашим App.js компонент, прежде чем мы пойдем дальше

import React, { Component } from 'react'
export default class App extends Component {  state = {    exercises: [],    title: ''  }
  render() {    return 

Exercises

}}

И почему не убирать index.js Пока мы на этом?

import React from 'react'import { render } from 'react-dom'import App from './App'
render(, document.getElementById('root'))

Не стесняйтесь удалить оставшиеся файлы под SRC Как нам не понадобится.

Где находится материал-ui?

Достаточно честно, пришло время увидеть его в действии. Давайте изменим уродливую H1 красиво Типография Заголовок:

import Typography from '@material-ui/core/Typography'
...
  render() {    return (              Exercises          )  }}

Тогда иди вперед и бегите Пряжа начать чтобы увидеть магию.

Мы к хорошему статую! Типография Компонент поставляется с заранее определенным набором Тип размеров Отказ Другое вариант s включают в себя Body1 , Название , Дисплей2 , и так далее. Среди других встроенных реквизитов выровнять Что мы используем здесь, чтобы отцентрировать текст горизонтально, и Gutterbottom который добавляет нижнюю маржу.

Почему бы нам не расширить это в форму, поэтому мы можем создать наши собственные упражнения? Начнем с Текстовое поле и связывать это с Название на государстве

import Typography from '@material-ui/core/Typography'import TextField from '@material-ui/core/TextField'
...
  handleChange = ({ target: { name, value } }) =>    this.setState({      [name]: value    })
  render() {    const { title } = this.state    return (      ...      
) }}

Конечно, нам нужно было сделать реагировать счастливым путем упаковки Типография и Форма с родительским элементом. Что может быть лучшей возможностью для фона, подобной бумажной карте? Давайте дойдете до Бумага потом

import Paper from '@material-ui/core/Paper'
...
  render() {      const { title } = this.state      return         ...          }  }}

Это также о времени начать использование именованных импорта (при условии, что наша настройка WebPack позволяет встряхивать дерево):

import { Paper, Typography, TextField } from '@material-ui/core'

Милая! А что хорошая форма без кнопки отправки? Кнопка S – это степл компонента в материал-интерфейсе; Вы увидите их везде. Например,

import {  Paper,  Typography,  TextField,  Button } from '@material-ui/core'...                    }}

Это должно хорошо читать. Тип является обычным реактивным опоры, цвет и вариант Специфичны материально-UI и составляют прямоугольник в форме кнопки. Другой вариант будет Fab Например, для плавающей кнопки.

Это не значит многое. Мы должны перехватить событие Form Prem

    return       ...      
...
}}

а затем справиться с этим с

  handleCreate = e => {    e.preventDefault()
    if (this.state.title) {      this.setState(({ exercises, title }) => ({        exercises: [          ...exercises,          {            title,            id: Date.now()          }        ],        title: ''      }))    }  }

WHOA! О чем это загадочный код? Очень быстро, мы

  1. Предотвратите перезагрузку страницы по умолчанию
  2. Проверьте, если Название поле не пустое
  3. Установите состояние с помощью Функция Updater Чтобы уменьшить обновления ASYNC
  4. Разрушение Упражнения и Название от Превзойти объект
  5. Разложить Упражнения на следующем состоянии с новым объектом упражнения
  6. Сбросить Название Чтобы очистить входное поле

Думаю, я должен был упомянуть, что я тоже влюблен в ES6. Разве мы не все?

Но как мы их перечисляем?

Сейчас самое время. Есть ли компонент списка? Конечно, ты глупый гусь!

Внутри Список мы будем петь через наш Упражнения и вернуть ListiTem С некоторыми Listitexext для каждого

import { List, ListItem, ListItemText } from '@material-ui/core'
...
  render() {    const { title, exercises } = this.state    return           ...              {exercises.map(({ id, title }) =>                                        )}            }}

Давайте также сложный код несколько начальных упражнений, чтобы получить что-то на экране. Вы догадались, Троица всех тренировок поднятия веса, дамы и 500 лет:

  state = {    exercises: [      { id: 1, title: 'Bench Press' },      { id: 2, title: 'Deadlift' },      { id: 3, title: 'Squats' }    ],    title: ''  }

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

Мы можем использовать Listitemsecondaryacty сделать именно это. Размещены на данный момент элемента списка, он может удерживать вторичный элемент управления, например Iconbutton с каким-то действием

import {  /*...*/,  ListItemSecondaryAction,  IconButton} from '@material-ui/core'
...
                                                 this.handleDelete(id)}              >                {/* ??? */}                                    
...

И давайте не будем забывать Handler Delete:

  handleDelete = id =>    this.setState(({ exercises }) => ({      exercises: exercises.filter(ex => ex.id !== id)    }))

который просто будет фильтровать наши упражнения на тех, кто не соответствует ID того, который нужно удалить.

Можем ли мы иметь значок мусорной бин внутри кнопки?

Да, это было бы отлично! Хотя вы могли бы использовать Материальные иконки от CDN Google напрямую с Значок или Svgicon Компоненты, часто предпочтительнее идти с готовым предустановителем.

К счастью, есть материал-интерфейс Пакет для тех

yarn add @material-ui/icons# or npm i @material-ui/icons

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

Допустим, мы хотели добавить значок мусора. Мы впервые отправились на Материал. Айконы Чтобы узнать свое точное имя

Затем мы включаем это имя в Pascalcase в нашем пути импорта

import Delete from '@material-ui/icons/Delete'

Так же, как с компонентами материала-интерфейса, если ваша настройка имеет встряхивание деревьев, вы можете сократить импорт в

import { Delete } from '@material-ui/icons'

Что особенно полезно при импорте несколько значков одновременно.

Теперь, когда у нас есть наш значок мусора, давайте покажим его внутри нашей кнопки удаления

 this.handleDelete(id)}>  

Как я могу заставить форму выглядеть менее уродливым?

Ах, стиль. Я думал, ты никогда не спросишь! Нежное прикосновение CSS не повредит. Итак, мы импортируем внешнюю таблицу стилей с глобальными стилями? Или, возможно, используйте CSS модули и назначьте имена наличии на наших элементах? Не совсем.

Под капотом материал-пользовательские вилки A CSS-In-JS библиотека, известная как React-JSS Отказ

Это реагированная интеграция JSS Библиотека Тот же автор, Олег Изонен. Помните, что мы коснулись этого в начале? Его основная идея состоит в том, чтобы позволить вам определить стили в JavaScript. Что делает JSS выделяться среди Другие libs Хотя это его поддержка SSR, небольшого размера пучка и богатой поддержки плагинов.

Давайте попробуем! В нашем Приложение Компонент, создайте объект стилей, как вы бы встроенные стили. Затем придумайте ключ, например корень Ссылаясь на корне Бумага Элемент и выписывайте некоторые стили в камеру

const styles = {  root: {    margin: 20,    padding: 20,    maxWidth: 400  }}

Далее импорт с улицей HOC от Материал-UI

import { withStyles } from '@material-ui/core/styles'

и оберните Приложение Компонент с ним, прохождение Стили объект как arg

export default withStyles(styles)(  class App extends Component {    ...  })

Это будет вводить Классы принцип Приложение Содержащие динамически генерируемое имя класса для нашего корень элемент

Название класса гарантированно будет уникально, и он часто будет сокращен в производственной сборке. Затем мы назначаем это Бумага через классное значение атрибут

    render() {      const { title, exercises } = this.state      const { classes } = this.props
      return         ...          }

Как эта волшебная работа? Оказывается, с улицей несет ответственность за грязную работу. За кулисами он ввел массив стилей в дом под Le> Теги. Вы можете обнаружить их, если вы копаете INT o с инструментами DEV

Вы также можете увидеть других Стиль Теги, связанные с родными компонентами, такие как MUILISTITEM для ListiTem компонент, который мы импортировали ранее. Те, кто автоматически вводится по требованию, для каждого элемента UI, который вы импортируете.

Это означает, что Материал-интерфейс никогда не будет загружать какие-либо стили для компонентов, которые мы не используем Отказ Следовательно, повышенная производительность и быстрее время загрузки. Это очень отличается от Bootstrap , который требует загрузки всего монолитной связки CSS, будь то использование его огромного ассортимента классов или нет.

Давайте также стиль форму, чтобы она выглядела аккуратно

const styles = {  root: {    ...  },  form: {    display: 'flex',    alignItems: 'baseline',    justifyContent: 'space-evenly'  }}

Это сделает текстовое поле и кнопку приятно распределены. Не стесняйтесь ссылаться на Выровняйте предметы и Обосновать-контент В CSS-CRICKS вам необходимо понадобиться дальнейшее разъяснение на макете Flexbox.

Конечно, но потом потом по тематике?

с улицей HOC адаптирован для настройки одноквартирной компоненты, но он не подходит для повторных перезаписи. Всякий раз, когда вам нужно применить глобальные изменения на все компоненты в Material-ui, ваш первый инстинкт должен был добраться до Тема объект.

Темы предназначены для управления цветами, расстоянием, тенями и другими атрибутами стиля ваших элементов UI. Материал-интерфейс поставляется со встроенным свет и темный Типы темы, свет – это по умолчанию.

Если мы превратим наше Стили в анонимную функцию, она получит Тема объект как arg, поэтому мы можем осмотреть его

const styles = theme => console.log(theme) || ({  root: ...,  form: ...})

Как вы настраиваете свою тему через Переменные конфигурации , как палитра , Тип , типография И т. Д. Чтобы иметь ближе взглянуть на все вложенные свойства и варианты, посетите Тема по умолчанию Раздел документов материала-интерфейса.

Допустим, мы хотели изменить основной цвет из синий к Оранжевый Отказ Во-первых, нам нужно создать тему с CreateMuitheme помощник в index.js.

import { createMuiTheme } from '@material-ui/core/styles'
const theme = createMuiTheme({ /* config */ })

В материал-интерфейсе цвета определены под палитра Собственность Тема Отказ Цветовая палитра подразделяется на намерения, которые включают Первичный , вторичный и Ошибка . Отказ Чтобы настроить намерение, вы можете просто предоставить цветной объект

import { orange } from '@material-ui/core/colors'
const theme = createMuiTheme({  palette: {    primary: orange  }})

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

const theme = createMuiTheme({  palette: {    primary: {      light: orange[200] // same as '#FFCC80',      main: '#FB8C00', // same as orange[600]      dark: '#EF6C00',      contrastText: 'rgb(0,0,0)'    }  }})

Как видите, отдельные цвета могут быть выражены как строка Hex, либо RGBA ( # FFCC80 ) и A Hue/Shade Pair ( Orange [200] ).

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

import { /*...*/, MuiThemeProvider } from '@material-ui/core/styles'
const theme = createMuiTheme({  palette: {    primary: orange  }})
render(        ,  document.getElementById('root'))

MuithemeProvider Затем пропустит Тема Всем его дочерним элементам через контекст React.

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

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

const styles = ({ spacing: { unit } }) => ({  root: {    margin: unit,    padding: unit * 3,    maxWidth: 400  },  form: ...}

Тема. Spacing.unit приходит в 8px По умолчанию, но если он используется равномерно через приложение, когда нам нужно обновить его значение, а не погибнуть по всей кодовой базе, нам нужно всего лишь изменить его в одном месте, то есть в наших параметрах объекта, который мы переходим на . CreateMuitheme Отказ

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

Обратите внимание, что приведенный выше пример – это только демо. Он повторно создает новую тему каждый раз, когда вариант изменяется, что приводит к появлению нового объекта CSS, который переписан и впрыскивается в DOM. Чаще всего, чем нет, ваша тема Config останется статикой.

Есть гораздо более интересные функции, которые мы не покрывали. Например, материал-интерфейс поставляется с opt-in CSSBaseline Компонент, который применяет нормализацию кросс-браузера, таких как сброс полей или семейство шрифтов (очень похоже на Normalize.css делает).

Что касается компонентов, у нас есть наш стандарт Сетка С помощью 12-колоночной макеты и пятью просмотра просмотра ( XS , SM , MD , LG и XL ). У нас также знакомые компоненты, такие как Диалог , Меню и Вкладки , а также элементы, такие как Чип и Подсказка Отказ Действительно, есть целая скользкость других, и, к счастью, они все очень хорошо документированы с Runnable Demo Code от CodeSandbox

Кроме того, материал-интерфейс следующий также работает с SSR , если вы в этом. Кроме того, хотя он поставляется с JSS из коробки, это может я могу работать с любым Другая библиотека , как стилизованные компоненты или даже необработанные CSS.

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

Я надеюсь, что вы нашли этот читатель полезны! И если вам так сильно понравится, что вы взволнованы, чтобы узнать больше о материальном интерфейсе или реагировать, затем проверьте мой YouTube Channel может быть?

Спасибо, что зашли! И большая благодаря команде в Call-em-all и все покровители, которые помогли построить эту потрясающую библиотеку ❤️

Ваше здоровье,

Алекс