- Главная
- Курс Mantine
Тег
Курс Mantine
Введение в Mantine и быстрый старт проекта
Каждый фронтенд-разработчик хочет собирать интерфейсы быстро, красиво и без лишней головной боли. Mantine — это именно та UI-библиотека, которая даёт всё необходимое из...
ПодробнееАнатомия темы Mantine – дизайн-система мечты
Одна из главных суперсил Mantine — это гибкая система тем, которая позволяет превратить библиотеку в идеального помощника под любой дизайн. Всё начинается с MantineProvider,...
ПодробнееЦветовые схемы Mantine – light, dark и auto
Современный пользователь ожидает, что интерфейс подстроится под его предпочтения — светлый, тёмный или автоматический режим. Mantine даёт всё необходимое для реализации этой...
ПодробнееГибкие методы стилизации компонентов Mantine
Mantine даёт разработчику целый арсенал способов стилизации — от простых пропсов вроде color и size до мощных CSS-модулей с полной изоляцией стилей. Где использовать быстрые...
ПодробнееРабота с формами – @mantine/form, хук useForm
Формы — это сердце любого интерактивного приложения, но управление их состоянием в React часто превращается в болото из useState и обработчиков. Mantine предлагает...
ПодробнееПродвинутая валидация с Mantine. Массивы
Простые формы — это лишь верхушка айсберга. В реальных проектах нам часто приходится работать с динамическими списками, вложенными объектами и сложными правилами валидации,...
ПодробнееMantine: компоненты ввода — от текста до файлов
В Mantine каждому типу данных соответствует свой компонент, который выглядит современно, работает предсказуемо и легко настраивается. Вам не придётся изобретать велосипед —...
ПодробнееMantine: Button, ActionIcon и Loader — всё в одном
Кнопка — это главный триггер действий в любом интерфейсе, но в Mantine она превращается в настоящий инструмент управления вниманием и состоянием. Здесь есть и классический...
ПодробнееMantine: AppShell, Navbar, Header — компоновка
AppShell, Header и Navbar — это готовый каркас приложения от Mantine, с которого начинается любой проект. От их правильной настройки зависит удобство всей навигации и...
ПодробнееGrid и Flex в Mantine: адаптивная верстка
Разбираемся, чем Grid отличается от Flex в Mantine и когда какой инструмент выбрать. Учимся делать раскладку отзывчивой через адаптивные брейкпоинты, а заодно...
ПодробнееМодальные окна и уведомления в Mantine UI
В этом уроке разбираемся, как показывать пользователю всплывающие модальные окна с помощью компонента Modal и информировать его о событиях через систему уведомлений...
ПодробнееРабота со списками: Table, Badge, Avatar
Три ключевых компонента Mantine для отображения списков — Table, Badge и Avatar. Вы узнаете, как строить таблицы с динамическими данными, отмечать статусы...
ПодробнееХуки useDisclosure, useToggle, useCounter
Три небольших, но очень полезных хука Mantine — useDisclosure, useToggle и useCounter. Вы узнаете, как управлять открытием модальных окон, переключать значения одним...
ПодробнееХуки состояния в Mantine: три инструмента
В этом уроке разбираем три хука Mantine для управления состоянием: useInputState, useListState и useSetState. Узнаем, как они убирают рутинный код при работе с полями...
ПодробнееuseLocalStorage и useSessionStorage в Mantine
Хуки useLocalStorage и useSessionStorage из пакета @mantine/hooks позволяют работать с браузерным хранилищем так же просто, как с обычным useState. Узнайте, чем...
ПодробнееПродвинутые хуки Mantine: гайд и примеры
Три продвинутых хука из @mantine/hooks: useDebouncedValue, useMediaQuery и useClipboard. Вы узнаете, как отложить реакцию на быстрый ввод, менять структуру...
ПодробнееРасширения Mantine: dates, charts, dropzone
Разбираем три официальных пакета Mantine — dates, charts и dropzone. Вы научитесь подключать пикеры дат, строить графики на Recharts и добавлять загрузку файлов...
ПодробнееMantine: ресурсы, сообщество и вдохновение
В последнем уроке курса по Mantine расскажем, где искать официальную документацию, живое сообщество и вдохновляющие примеры интерфейсов. Вы узнаете, как быть в курсе...
Подробнее