Ускоренный курс Mantine UI с NEXT.Фреймворк пользовательского интерфейса JS | React

• Manta UI - это фреймворк пользовательского интерфейса React.  

• Он содержит множество компонентов для повторного использования и поддерживает современные фреймворки React.  

• В Manta UI есть пакеты для компонентов, форм, дат, уведомлений, карусели, spotlight и других.  

• Необходимо базовое понимание React.  

• Manta UI огромен, поэтому автор не будет разбирать все компоненты и функции.  

• В уроке будут рассмотрены основные компоненты, крючки и документация.  

• Использование Nexus для создания проекта.  

• Настройка проекта с помощью репозитория шаблонов.  

• Импорт необходимых пакетов и настройка компонентов.  

• Импорт Manta provider и настройка стилей.  

• Создание компонента "Заголовок" и его настройка.  

• Использование различных реквизитов для изменения стилей и компонентов.  

• Компонент "Заголовок" для создания заголовков.  

• Передача различных реквизитов для изменения тегов и стилей.  

• Использование полиморфных компонентов и их настройка.  

• Компонент "Текст" для создания многострочного текста.  

• Использование различных реквизитов для выравнивания, цвета и преобразования текста.  

• Настройка градиентных вариантов и их применение.  

• Градиент можно сделать более заметным, изменив цвет на красный.  

• Полиморфные компоненты позволяют изменять отображаемый компонент за кулисами.  

• Пример: кнопка, которая может быть тегом привязки или наоборот.  

• Компонент Link позволяет использовать разные версии для разных версий React.  

• Пример: переход на страницу "О программе" без обновления страницы.  

• Компонент Anchor также используется для поддержки пользовательского интерфейса.  

• Входные компоненты включают различные элементы ввода, такие как ввод чисел и пароля.  

• Пример: передача массива строковых данных для автозаполнения.  

• Мета-тема хранит цвета, шрифты, интервалы и другие элементы дизайна.  

• Пример: изменение оттенка цвета с помощью номера.  

• Доступ к теме через хук useMantaTheme.  

• Настройка темы через объект переопределения темы.  

• Пример: изменение цветовой схемы приложения на темную.  

• Возможность добавлять новые цвета в тему по умолчанию.  

• Возможность изменять стандартные реквизиты компонентов, такие как цвет и размер кнопки.  

• Пример: добавление реквизита кнопки с размером LG и цветом бирюзовым.  

• Можно изменить стандартные реквизиты компонента, такие как цвет и размер.  

• Поставщик manta подобен поставщику контекста в React, где можно создавать глобальное состояние и применять стили к дочерним компонентам.  

• В MUI есть базовые функции темы, такие как "больше чем" и "меньше чем".  

• Эти функции полезны для создания отзывчивых сайтов.  

• Примеры функций темы: фокусировка кнопок, градиенты, осветление и затемнение цветов.  

• Можно изменить цветовую схему, передав свойство "цветовая схема" в компонент.  

• Пример создания кнопки для переключения между темными и светлыми темами.  

• Проблемы с "пердением" темы при обновлении страницы.  

• Решение проблемы "пердения" темы: сохранение цветовой схемы в локальном хранилище.  

• Пример кода для сохранения цветовой схемы в локальном хранилище.  

• Основные компоненты используют единицы rem для применения стилей.  

• Функции remm и pixel для преобразования значений в пиксели.  

• Пример использования стилизованных реквизитов для настройки стилей компонентов.  

• Обсуждение использования margin-top и margin-bottom.  

• Разделение стилей с помощью разделителей.  

• Передача строковых значений для создания разделителей.  

• Поддержка sxprop в компонентах.  

• Пример использования sxprop для изменения цвета фона.  

• Передача функций и тем в sxprop для создания пользовательских стилей.  

• Использование createStyles для создания и управления стилями.  

• Пример создания стилей для компонента с помощью createStyles.  

• Передача стилей через функцию и объект.  

• Изменение стилей на основе реквизита.  

• Пример создания пользовательского компонента кнопки с разными цветами фона.  

• Использование функции cx для объединения классов.  

• Пример добавления классов на основе условий.  

• Медиа-запросы и ключевые кадры.  

• Переопределение стилей с помощью sts API.  

• Пример использования sts API для изменения стилей компонентов.  

• Импорт и использование компонентов слайдера.  

• Использование класса для выбора элемента.  

• Пример добавления класса к элементу bar.  

• Проверка изменений с помощью стилей.  

• Создание глобальных стилей с помощью функции.  

• Пример изменения цвета фона и шрифта.  

• Использование селекторов CSS для добавления стилей.  

• Использование пакета emotion style для стилизации компонентов.  

• Пример добавления пользовательских стилей.  

• Использование медиазапросов в функции создания стилей.  

• Пример добавления стилей в зависимости от размера экрана.  

• Использование медиазапросов для создания адаптивных стилей.  

• Передача пользовательских значений в медиазапросы.  

• Пример использования медиазапросов с компонентом media query.  

• Использование style props для добавления адаптивных стилей.  

• Пример выравнивания текста в зависимости от точки останова.  

• Добавление пользовательских точек останова в тему.  

• Объяснение работы точек останова и их добавление.  

• Поддержка пользовательских точек останова.  

• Переход к компонентам верстки и их демонстрация.  

• Введение в компонент Flex и его свойства.  

• Пример использования Flex для создания макета.  

• Поддержка всех свойств CSS в качестве реквизитов.  

• Объяснение работы компонента Grid и его использование.  

• Создание сложного макета с помощью Grid.  

• Настройка столбцов и их размеров.  

• Адаптивность столбцов сетки с помощью точек останова.  

• Пример изменения количества столбцов в зависимости от размера экрана.  

• Использование адаптивных точек останова для создания адаптивного макета.  

• Введение в компонент Stack и его использование.  

• Поддержка старых браузеров и использование Flexbox.  

• Введение в компонент Shell и его использование.  

• Пример создания адаптивного приложения с помощью Shell.  

• Добавление компонентов верхнего и нижнего колонтитула в приложение.  

• Добавление семантических тегов для улучшения читаемости кода.  

• Возможность добавления нижнего колонтитула и панели навигации.  

• Панель навигации занимает всю высоту, скрывая заголовок.  

• Решение проблемы с помощью передачи высоты в заголовок.  

• Изменение размеров компонентов при уменьшении экрана.  

• Использование компонента медиазапроса для адаптивного дизайна.  

• Возможность изменения макета с помощью реквизита layout.  

• Скрытые элементы и точки останова для адаптивного дизайна.  

• Использование компонента сайта вне компонента оболочки приложения.  

• Добавление пользовательской полосы прокрутки в навигационную панель.  

• Обзор основных компонентов и крючков в mantain UI.  

• Примеры использования крючков, таких как useIntersection, useClipboard, useLocalStorage и других.  

• Призыв к подписке на канал и благодарность за просмотр.