Пример пользовательского интерфейса React Material — ведущая тема сегодня. Компоненты React реализуют материальный дизайн Google. Макеты Material Design обеспечивают единообразие между платформами, средами и размерами экрана за счет использования единообразных элементов и интервалов. Material-UI поддерживает последние стабильные версии для всех браузеров и платформ. Они также поддерживают Internet Explorer 11. Вам не нужно предоставлять какие-либо полифилы JavaScript, поскольку мы управляем неподдерживаемыми функциями браузера внутренне и изолированно. Давайте возьмем Руководство по примерам материала React с нуля.
конечно. React Пример пользовательского интерфейса материала
Давайте сначала установим React.js, используя следующие команды.
# 1: Установите React.js
npx create-react-app materialuicd materialuinpm start
Если вы столкнулись с какой-либо проблемой при компиляции, создайте файл .env в корне и добавьте следующая строка кода.
SKIP_PREFLIGHT_CHECK = true
# 2: Установить Material-UI
Введите следующую команду, чтобы установить
npm install @ material-ui/core --save # oryarn add @m aterial-ui/core
Теперь измените следующий код внутри файла App.js .
//App.jsimport React, {Component} из 'react'; import Button из '@ material-ui/core/Button'; класс App расширяет Component {render () {return (); }} экспортировать приложение по умолчанию;
Сохраните файл и перейдите в браузер, и вы увидите, что мы успешно интегрировали UI материала.
#SVG Icons
Вы можете установить предварительно созданные значки SVG с помощью пакета @ material-ui/icons.
npm install @ material-ui/icons --save # oryarn add @ material-ui/icons
#Fonts
Вы можете включить таблицы стилей в файл index.html .
Мы можем использовать кнопки, а также значки, используя следующий код.
// Приложение. jsimport React, {Component} из 'react'; import Button из '@ material-ui/core/Button'; импортировать закладки из '@ material-ui/icons/Bookmarks'; класс App расширяет Component {render () {return ( ); }} экспортировать приложение по умолчанию;
Вы можете использовать material.io/tools/icons, чтобы найти конкретный значок. При импорте значка имейте в виду, что имена значков —
Важные реквизиты для компонента Button включают:
- вариант : визуальный стиль компонента, либо содержать , выделенный , fab или пусто для стиля ссылки по умолчанию.
- color : один из основных , вторичный или default , который имеет тот же цвет, как если бы он оставлен пустым. Мы рассмотрим настройку этих цветов позже.
- mini : если для варианта установлено значение fab (плавающее действие button), то размер кнопки уменьшается.
#Navbar
Давайте создадим компонент внутри папки src с именем Navbar.js и добавьте следующий код.
//Navbar.jsimport React from 'response '; импортировать AppBar из' @ material-ui/core/AppBar '; импортировать панель инструментов из' @ material-ui/core/Toolbar '; const NavBar = () => {return ( Пример пользовательского интерфейса React Material )} экспорт NavBar по умолчанию;
Теперь импортируйте Navbar.js компонент внутри компонента App.js .
//App.jsimport React, {Component} из 'response'; кнопка импорта из '@ material-ui/ core/Button '; импортировать закладки из' @ material-ui/icons/Bookmarks '; импортировать панель навигации из' ./Navbar';class App extends Co mponent {render () {return ( ); }} экспортировать приложение по умолчанию;
Теперь вы можете видеть, что мы реализовали базовый дизайн панели навигации.
#TextField
Добавьте следующий код в файл App.js .
//App.jsimport React, {Component} from 'react'; import Button from '@ material-ui/core/Button'; import Bookmarks from '@ material-ui/icons/Bookmarks'; import TextField from '@ material-ui/core/TextField'; import Navbar from './Navbar '; класс App расширяет Component {render () {return (
); }} экспортировать приложение по умолчанию;
Сохраните файл, и вы увидите текстовое поле. TextField, импортированный из @ material-ui/core/TextField, ведет себя как стандартный компонент ввода React .
#Cards
Создайте один файл с именем Card.js внутри папки src . . Добавьте следующий код в файл Card.js .
//Card.jsimport React from 'react'; import PropTypes из 'prop-types'; import {withStyles} из '@ material-ui/core/styles'; импортировать Card из '@ material-ui/core/Card'; импортировать CardActionArea из '@ material-ui/core/CardActionArea'; импортировать CardActions из '@ material- ui/core/CardActions '; импорт CardContent из' @ material-ui/core/CardContent '; импорт CardMedia из' @ material-ui/core/CardMedia '; импорт кнопки из' @ material-ui/core/Button '; импорт Типографика из '@ material-ui/core/Typography'; импортировать IMG из './MZ.png';const styles = {card: {maxWidth: 345,}, media: {height: 140,},}; функция MediaCard (реквизиты) {const {классы} = реквизиты; return ( Цукерберг Ящерицы - широко распространенная группа чешуекрылых рептилий, насчитывающая более 6000 видов на всех континентах, кроме Антарктиды );} MediaCard.propTypes = {classes: PropTypes.object.isRequired,}; экспорт по умолчанию withStyles (стили) (MediaCard);
Сохраните файл и импортируйте Card.js внутри файла App.js .
//App.jsimport React, {Component} из 'response'; кнопка импорта из '@ material- ui/core/Button '; импортировать закладки из' @ material-ui/icons/Bookmarks '; импортировать TextField из' @mater ial-ui/core/TextField '; импортировать панель навигации из' ./Navbar '; импортировать карту MediaCard из'./Card '; класс App расширяет Component {render () {return (
); }} экспортировать приложение по умолчанию;
#Theming
Material-UI использует основанный на JavaScript подход к тематизации своих компонентов, который называется CSS-in-JS . С помощью этого подхода имена классов CSS создаются с использованием объектов JavaScript.
Чтобы передать объект styles в наш компонент, мы будем использовать функцию withStyles , чтобы вернуть компонент более высокого порядка, который дает имена наших классов как свойство, называемое classes .
const MyComponent = (props) => {const classes = props.classes; return (//материал );} экспорт по умолчанию withStyles (styles) (MyComponent);
Создание настраиваемой темы
Чтобы создать собственную тему, используйте функцию createMuiTheme и передайте ее возвращаемое значение элементу MuiThemeProvider . в корне вашего приложения.
import {createMuiTheme, MuiThemeProvider} from '@ material-ui/core/styles'; const theme = createMuiTheme (); const App = props => (//ваше приложение );
Теперь все дочерние элементы MuiThemeProvider имеют единообразно настраиваемый стиль!
Функция createMuiTheme обычно принимает объект для определения темы:
const theme = createMuiTheme ({palette: {primary: '# e89eef' , secondary: '# 336b87'}});
Все цвета, включая основной и вторичный цвета, которые мы использовали ранее в этом руководстве, являются тематическими. Полный набор опций можно найти в официальной тематической документации. Material-UI — отличный способ без особых усилий добавить безупречный внешний вид элементам управления вашего веб-приложения React.
Наконец, Руководство по примерам пользовательского интерфейса React Material окончено.
