Библиотека компонентов Ant Design. Быстрый старт
HTML-код
- Опубликовано: 30 июн 2024
- AntDesign - это основа для AliExpress, Baidu и многих других крупных китайских порталов. Библиотека дает шикарный набор компонентов по работе с формами, многофункциональные таблицы и много всего другого.
В рамках видео мы разберем варианты использования таблицы, попутно задействовав пяток-другой дополнительных компонентов.
00:00 Введение
01:18 Особенности AntDesign
04:41 Обзор компонентов
16:53 Установка и подключение AntDesign
18:45 Добавление шапки сайта PageHeader
21:22 Подготовка данных для таблицы
26:44 Разметка страницы Row, Col
27:54 Кастомизация таблицы
30:12 Сортировка таблицы
31:27 Фильтр в колонке таблицы
34:27 Добавление картинок Image
36:22 Добавление key к данным таблицы
37:23 Работа с пагинацией
39:44 Компонент формы Slider
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Очень понравился ваш курс по реакт с Udemy. Сам я обычно смотрю владелинв минина, но когда посмотрел ваш курс, то там никакой минин рядом с вами не стоял)) очень доходчиво объясняете
Спасибо за тёплые слова!
Спасибо за видео!!! Сейчас приложение разрабатываю, теперь знаю какую ui библиотеку возьму👍
Михаил, спасибо за видео. Было очень полезно.
Спасибо за урок! Очень круто! 👍
Мужик сказал - мужик сделал !!! Спасибо огромное ))
Большое спасибо за уроки, они очень полезные
Спасибо большое! Отличное объяснение!
Отличное видео, спасибо!
Вышел на работу. Библиотека используется на проекте. ролик помог разобраться. спасибо!
Спасибо Михаил. Полезный обзор
Отличное видео, спасибо
спасибо за науку!
Отличное видео. Жаль что так мало разобрали. Мне как раз нужен ant design
Огонь! Так держать!
Очень хорошо спасибо
Классно было бы если бы написали небольшое приложение с этой библиотечкой))))☺️
Спасибо большое!
Спасибо!
Спасибо!)
Спасибо за видео, очень понятно и без воды. Я правильно понимаю, что можно комбинировать ant с tailwind css, добавляя на компоненты анта, вместо обычных css классов, классы тайлвинда , если мне нужна какая-то дополнительная стилизация?
Спасибо
Добрый вечер Михаил.
Спасибо большое за данное видео, как раз стажируюсь в компании и закрепили меня за новым проектом где используется данная либа. Раньше с ней не работал в доке часто неочевидно описано и приходится просто методом тыка приходить к результату. Если возможно, сделайте такое же подробное видео по работе с формами, в частности все варианты работы с данными, когда кнопки сабмита в футере модалки, работа с form из useForm, начальными состояниями элементов формы (когда они динамичны) и всё остальное чем вы можете поделиться. Ещё раз спасибо, подписываюсь и буду следить за вашими разборами и уроками по antd 👍
Поддерживаю, по формам бы подробный разбор, пожалуйста пожалуйста!
Спасибо за видео! Где можно исходники найти ?
Очень понравился курс, а если стили поменять, работа со стилями?
best tutorial
Ролик просто шикарный.
Вот решил для себя поизучать готовые ui-библиотеки для каких-то пет-проектов или вроде того, пока впечатления довольно положительные. Правда не оч понравилось то, что вроде как передавать свои стили в компоненты надо не через классы, а через style, ибо через классы часть стилей затирает.
Спасибо за видео! Кто следующий, material ui ? :)
Может быть. Пока не знаю. Material UI мне не нравится =) По мне, так он сильно устарел и заметно уступает чакре и анту, как по удобству использования, так и используемым подходам.
🔥🔥🔥
полезный
Спасибо за материал. Возникло несколько вопросов, буду благодарен если ответите:
1. Как работает таблица если данных много?
2. Можно ли сортировку/фильтрацию настроить для всех данных, а не текущих из выбранной страницы пагинации?
3. Можно ли прикрутить инпут для фильтрации по тексту по колонке в таблице?
Приветствую!
Если данных много, то здесь уже вопрос взаимодействия фронта и бэкенда. Чаще всего в таких случаях фильтрация, сортировка и пагинация осуществляется уже через соответствующие запросы к бэкенду.
Если же данные целиком загружены, то сортировка/фильтрация будет сразу для всех данных без доп.запросов к серверу.
Фильтрацию, конечно, же прикрутить можно. В любой фильтрации уже идет вопрос по каким полям будет идти сравнение. Опять же, если данных много, то имеет смысл решать через запросы к бэкенду.
Здравствуйте, Михаил. Можете сделать видео как сделать темы день/ночь ? С любым фреймворком,который выберете. Спасибо)
У меня есть обзор библиотеки компонентов Chakra UI.
ruclips.net/video/-CdrHAImYfk/видео.html
Там из коробки идет удобная работа со светлой/темной темами. В видео частично эта тема затронута.
классное видео и полезное, где можно взять api покемонов ? искала у вас на гите, не нашла
Я уже не помню какое конкретно использовалось в видео, но гугл на запрос pokemon api сразу предлагает ссылку pokeapi.co/ Вероятно оно и было.
Здравствуйте, подскажите пожалуйста, если мне надо стилизовать по своему тот же Slider, то просто поверх переписываем стандартные стили ??? Или вот есть макет от дизайнера (орилинальный на ант не похож совсем), можно ли на компонетнах Ant сверстать все приложение ? или использовать только в крайних необходимостях некоторые компоненты, тот же слайдер.
Вы можете переопределить стили, либо извлечь стили самой библиотеки и напрямую задать свою тему. По вариагтам использования решается на конкретном проекте, для каких-то блоков вам библиотека может и не понадобиться.
Спасибо за урок!
А где такой API с генерацией объектов с покемонами найти?)
pokeapi.co/
Напишите пожалуйста как применить фильтры к таблице, а именно изменит ширину столбца и высоту строки?Щаранее спасибо
А есть ли проблемы с адаптацией под мобильные версии у данной библиотеки(честно видео еще не смотрел, но у element ui под vue такие проблемы были)? И как смотрите на библиотеку PrimeReact, рассматривали её? Знаю, что библиотек много, но все же, а вдруг.
Про PrimeReact не слышал. Проблем с адаптивом у ant.d не было.
На практике фильтры по UX неоч, обычно хотят чтобы были видны выбранные значения хотя бы частично, так что такой вариант отпадает. А ведь еще есть автокомплиты, кастомные контролы
REACT NATIVE напомнило.
Hello my friend. I had a question. Does the ant design chart in the bar chart also support drill down?
May be
А про material-ui будет подобное видео?
Сообразим) по мне он несколько устарел, но раз вы уже не первый кто спрашивает, то поставлю в план.
рекомендую... либа толковая, юзаем в проде уже второй год...
Здравствуйте!
Подскажите) я хочу сделать множественную загрузку с upload, с чего начать? Я добавил только то что загружается одна картинка и все, при загрузке второй она стирается
Как и во всех последующих случаях, начинать надо с изучения API конкретного компонента. Что он предлагает и как. В случае с файл-лоадеров нужно просто добавить булевый ключ multiple.
Спасибо, я решил это ещё в тот день! А ваш ответ увидел сейчас, спасибо вам за то что помогаете таким как я! Удачи всем! Не сдавайтесь в обучении!
Подскажите, как изменить значение брейкпоинтов. К примеру, md: '768px', на md: '772px'?
Это вопрос работы с темой.
github.com/ant-design/ant-design/blob/master/components/style/themes/default.less#L285
По сути брейкпойнты хранятся в конкретных less переменных. Их можно переопределить.
@@mishanepА случайно видео не намечается по переопределению переменных, а то написано так, что не разобрать)
@@MrGorbick Не планировал =) Там основная сложность в том, что для работы с препроцессором less нужно настроить сборщик приложения (webpack).
Если какой-то принципиальной задачи использовать именно ant.design нет, то можно взять chakra ui. Там вся темизация идет через обычный JS и ничего дополнительно для сборки перенастраивать не требуется.
сделай видео как это все кастомизировать через глобальную замену переменных , вот такова контента мало на ютубе , на русском так вообще нету инфы
Лес обрабатывать))))
Можно продолжить
в AntDesin есть возможно сть вывести label над input?
Да, есть. Возможный вариант решения описан здесь
github.com/ant-design/ant-design/issues/14063
@@mishanep спасибо! в моем случае оказалось проще использовать лайбл формика
Привет, у меня возникла такая проблема, в ключе "address" у меня лежит объект, который сожержит нужный мне ключ с "city" . Уже голову сломал, как мне в dataIndex запихнуть ключ лежащий во вложенности?
А в чем конкретно сложность? Без контекста всё равно не понятна проблема.
@@mishanep разобрался. В моей структуре данных есть вложенность. country: [{"city": "New York", "street": "First ave."}, ....] Обращение сделал через ["country", "city"]
А я в точности все делаю, но не рисуется таблица. Все перепробовал
почему так мало лайков ?)
про spin и rotate напутал я думаю.
Блин, я думал это по blazor гайд...
Когда услышал, что эти ребята работают над АлиЭкспресс - вздрогнул. Али - это прямо пример, как не надо делать фронт :)
ну ты крутой но не черта не понятно, не из за тебя а из за вообще всего как это сделано.
почему нельзя просто сказать напиши красивый сайт как я хочу и он сам написался....
СЛОЖНААА всё это
Сегодня есть и такое v0.dev
@@mishanep Огромное спасибо, это мне точно поможет!
Спасибо большое! Отличное объяснение!