Перейти к контенту

Инструкция по установке

Установите Material-UI, самый популярный в мире фреймворк для пользовательского интерфейса React.

Material-UI доступен в виде пакета npm .

npm

Для установки и сохранения в вашем package.json зависимости, запустите:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Обратите внимание, что react > = 16.8.0 и react-dom > = 16.8.0 являются одноранговыми зависимостями.

Шрифт Roboto

Material-UI был разработан на основе шрифта Roboto. Поэтому обязательно следуйте этим инструкциям. Например, через Google Web Fonts:

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

Иконочный шрифт

Вот некоторые инструкции как это сделать. Вот некоторые инструкции как это сделать. Например, через Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

SVG Иконки

Для того, чтобы использовать предварительно собранные SVG-иконки Material, такие как те, которые используются для демонстрации, сначала необходимо установить пакет @material-ui/icons:

// через npm
npm install @material-ui/icons

// через yarn
yarn add @material-ui/icons

CDN

Вы можете начать использовать Material-UI с минимальной интерфейсной инфраструктурой, что отлично подходит для прототипирования.

Предоставляются два файла в формате UMD:

Вы можете следовать этому примеру CDN для быстрого старта.

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

В ссылках на UMD-файлы используется тег latest для указания на последнюю версию библиотеки. Этот указатель нестабильный, он изменяется при появлении новых версий. Вы можете указывать конкретную версию, например, v4.4.0.

Design resources

figma sketch adobe-xd

A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:

  • Figma: A large UI kit with over 600 handcrafted Material-UI components.
  • Sketch: Sketch for Material-UI — A large UI kit with over 600 handcrafted Material-UI's symbols 💎.
  • Adobe XD: A large UI kit with over 600 handcrafted Material-UI symbols.
  • Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.