Тёмный

Библиотека компонентов Ant Design. Быстрый старт 

Михаил Непомнящий
Подписаться 59 тыс.
Просмотров 31 тыс.
50% 1

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

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 77   
@denideni2633
@denideni2633 3 года назад
Очень понравился ваш курс по реакт с Udemy. Сам я обычно смотрю владелинв минина, но когда посмотрел ваш курс, то там никакой минин рядом с вами не стоял)) очень доходчиво объясняете
@mishanep
@mishanep 3 года назад
Спасибо за тёплые слова!
@user-rk5wo6wq7h
@user-rk5wo6wq7h 3 года назад
Мужик сказал - мужик сделал !!! Спасибо огромное ))
@muncuqla_gul8078
@muncuqla_gul8078 5 месяцев назад
Большое спасибо за уроки, они очень полезные
@_Yar_
@_Yar_ Год назад
Спасибо за урок! Очень круто! 👍
@user-bp7jb5of5d
@user-bp7jb5of5d 2 года назад
Михаил, спасибо за видео. Было очень полезно.
@brodyagaPATY
@brodyagaPATY 3 года назад
Спасибо за видео!!! Сейчас приложение разрабатываю, теперь знаю какую ui библиотеку возьму👍
@magacode
@magacode 2 года назад
Спасибо большое! Отличное объяснение!
@wannabecoder3960
@wannabecoder3960 8 месяцев назад
Вышел на работу. Библиотека используется на проекте. ролик помог разобраться. спасибо!
@yaroslavzef7267
@yaroslavzef7267 4 месяца назад
Спасибо Михаил. Полезный обзор
@XYPM4
@XYPM4 3 года назад
Отличное видео. Жаль что так мало разобрали. Мне как раз нужен ant design
@zatochiSiberian
@zatochiSiberian 2 года назад
Отличное видео, спасибо!
@frednoby8531
@frednoby8531 2 года назад
Огонь! Так держать!
@yakut54
@yakut54 3 года назад
спасибо за науку!
@Ruslan_boxeo
@Ruslan_boxeo 3 года назад
Отличное видео, спасибо
@ahliddinmazbutov2245
@ahliddinmazbutov2245 2 года назад
Очень хорошо спасибо
@brodyagaPATY
@brodyagaPATY 3 года назад
Классно было бы если бы написали небольшое приложение с этой библиотечкой))))☺️
@dinmukhamedamirov2704
@dinmukhamedamirov2704 10 месяцев назад
Спасибо большое!
@Al4ii
@Al4ii 3 года назад
Спасибо!
@user-up9zq1nw4n
@user-up9zq1nw4n 3 года назад
Спасибо!)
@SerhiiNesterov
@SerhiiNesterov 2 года назад
Спасибо
@evgeniyn1542
@evgeniyn1542 3 года назад
Спасибо за видео! Кто следующий, material ui ? :)
@mishanep
@mishanep 3 года назад
Может быть. Пока не знаю. Material UI мне не нравится =) По мне, так он сильно устарел и заметно уступает чакре и анту, как по удобству использования, так и используемым подходам.
@STELLS541
@STELLS541 9 месяцев назад
Ролик просто шикарный. Вот решил для себя поизучать готовые ui-библиотеки для каких-то пет-проектов или вроде того, пока впечатления довольно положительные. Правда не оч понравилось то, что вроде как передавать свои стили в компоненты надо не через классы, а через style, ибо через классы часть стилей затирает.
@viacheslavgurin9368
@viacheslavgurin9368 Год назад
🔥🔥🔥
@dellopp130
@dellopp130 3 года назад
Добрый вечер Михаил. Спасибо большое за данное видео, как раз стажируюсь в компании и закрепили меня за новым проектом где используется данная либа. Раньше с ней не работал в доке часто неочевидно описано и приходится просто методом тыка приходить к результату. Если возможно, сделайте такое же подробное видео по работе с формами, в частности все варианты работы с данными, когда кнопки сабмита в футере модалки, работа с form из useForm, начальными состояниями элементов формы (когда они динамичны) и всё остальное чем вы можете поделиться. Ещё раз спасибо, подписываюсь и буду следить за вашими разборами и уроками по antd 👍
@user-pc5zp7gt5h
@user-pc5zp7gt5h 3 года назад
Поддерживаю, по формам бы подробный разбор, пожалуйста пожалуйста!
@uzinfoweb
@uzinfoweb 2 года назад
best tutorial
@user-id5ct2de8v
@user-id5ct2de8v 6 месяцев назад
полезный
@Ksushapi
@Ksushapi Год назад
Спасибо за видео, очень понятно и без воды. Я правильно понимаю, что можно комбинировать ant с tailwind css, добавляя на компоненты анта, вместо обычных css классов, классы тайлвинда , если мне нужна какая-то дополнительная стилизация?
@azizbekkomilov3589
@azizbekkomilov3589 Год назад
Спасибо за видео! Где можно исходники найти ?
@zhanbolatsatybaldinov7642
@zhanbolatsatybaldinov7642 3 года назад
Спасибо за материал. Возникло несколько вопросов, буду благодарен если ответите: 1. Как работает таблица если данных много? 2. Можно ли сортировку/фильтрацию настроить для всех данных, а не текущих из выбранной страницы пагинации? 3. Можно ли прикрутить инпут для фильтрации по тексту по колонке в таблице?
@mishanep
@mishanep 3 года назад
Приветствую! Если данных много, то здесь уже вопрос взаимодействия фронта и бэкенда. Чаще всего в таких случаях фильтрация, сортировка и пагинация осуществляется уже через соответствующие запросы к бэкенду. Если же данные целиком загружены, то сортировка/фильтрация будет сразу для всех данных без доп.запросов к серверу. Фильтрацию, конечно, же прикрутить можно. В любой фильтрации уже идет вопрос по каким полям будет идти сравнение. Опять же, если данных много, то имеет смысл решать через запросы к бэкенду.
@yakut54
@yakut54 3 года назад
REACT NATIVE напомнило.
@user-tg3bj1vu9i
@user-tg3bj1vu9i 2 года назад
Очень понравился курс, а если стили поменять, работа со стилями?
@Nikitosss91
@Nikitosss91 3 года назад
Здравствуйте, Михаил. Можете сделать видео как сделать темы день/ночь ? С любым фреймворком,который выберете. Спасибо)
@mishanep
@mishanep 3 года назад
У меня есть обзор библиотеки компонентов Chakra UI. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--CdrHAImYfk.html Там из коробки идет удобная работа со светлой/темной темами. В видео частично эта тема затронута.
@AndrewFloatrx
@AndrewFloatrx Год назад
рекомендую... либа толковая, юзаем в проде уже второй год...
@Maximurz1k
@Maximurz1k Год назад
На практике фильтры по UX неоч, обычно хотят чтобы были видны выбранные значения хотя бы частично, так что такой вариант отпадает. А ведь еще есть автокомплиты, кастомные контролы
@muncuqla_gul8078
@muncuqla_gul8078 5 месяцев назад
Напишите пожалуйста как применить фильтры к таблице, а именно изменит ширину столбца и высоту строки?Щаранее спасибо
@kostasancez2358
@kostasancez2358 2 года назад
Лес обрабатывать))))
@saltanatamangeldinova2692
@saltanatamangeldinova2692 2 года назад
классное видео и полезное, где можно взять api покемонов ? искала у вас на гите, не нашла
@mishanep
@mishanep 2 года назад
Я уже не помню какое конкретно использовалось в видео, но гугл на запрос pokemon api сразу предлагает ссылку pokeapi.co/ Вероятно оно и было.
@nikomunikabelen8540
@nikomunikabelen8540 Год назад
Спасибо за урок! А где такой API с генерацией объектов с покемонами найти?)
@mishanep
@mishanep Год назад
pokeapi.co/
@hamedjafari2374
@hamedjafari2374 2 года назад
Hello my friend. I had a question. Does the ant design chart in the bar chart also support drill down?
@perstj5746
@perstj5746 6 месяцев назад
May be
@Vova-mq5wy
@Vova-mq5wy 2 года назад
почему так мало лайков ?)
@raybulworker6092
@raybulworker6092 2 года назад
сделай видео как это все кастомизировать через глобальную замену переменных , вот такова контента мало на ютубе , на русском так вообще нету инфы
@ivangolubev7308
@ivangolubev7308 Год назад
А есть ли проблемы с адаптацией под мобильные версии у данной библиотеки(честно видео еще не смотрел, но у element ui под vue такие проблемы были)? И как смотрите на библиотеку PrimeReact, рассматривали её? Знаю, что библиотек много, но все же, а вдруг.
@mishanep
@mishanep Год назад
Про PrimeReact не слышал. Проблем с адаптивом у ant.d не было.
@user-rl8qw2jf8r
@user-rl8qw2jf8r 2 года назад
Здравствуйте, подскажите пожалуйста, если мне надо стилизовать по своему тот же Slider, то просто поверх переписываем стандартные стили ??? Или вот есть макет от дизайнера (орилинальный на ант не похож совсем), можно ли на компонетнах Ant сверстать все приложение ? или использовать только в крайних необходимостях некоторые компоненты, тот же слайдер.
@mishanep
@mishanep 2 года назад
Вы можете переопределить стили, либо извлечь стили самой библиотеки и напрямую задать свою тему. По вариагтам использования решается на конкретном проекте, для каких-то блоков вам библиотека может и не понадобиться.
@YouriKulikov
@YouriKulikov 3 года назад
Можно продолжить
@dispeltr1183
@dispeltr1183 3 года назад
А про material-ui будет подобное видео?
@mishanep
@mishanep 3 года назад
Сообразим) по мне он несколько устарел, но раз вы уже не первый кто спрашивает, то поставлю в план.
@MrGorbick
@MrGorbick 3 года назад
Подскажите, как изменить значение брейкпоинтов. К примеру, md: '768px', на md: '772px'?
@mishanep
@mishanep 3 года назад
Это вопрос работы с темой. github.com/ant-design/ant-design/blob/master/components/style/themes/default.less#L285 По сути брейкпойнты хранятся в конкретных less переменных. Их можно переопределить.
@MrGorbick
@MrGorbick 3 года назад
@@mishanepА случайно видео не намечается по переопределению переменных, а то написано так, что не разобрать)
@mishanep
@mishanep 3 года назад
@@MrGorbick Не планировал =) Там основная сложность в том, что для работы с препроцессором less нужно настроить сборщик приложения (webpack). Если какой-то принципиальной задачи использовать именно ant.design нет, то можно взять chakra ui. Там вся темизация идет через обычный JS и ничего дополнительно для сборки перенастраивать не требуется.
@maxgib2489
@maxgib2489 2 года назад
Здравствуйте! Подскажите) я хочу сделать множественную загрузку с upload, с чего начать? Я добавил только то что загружается одна картинка и все, при загрузке второй она стирается
@mishanep
@mishanep 2 года назад
Как и во всех последующих случаях, начинать надо с изучения API конкретного компонента. Что он предлагает и как. В случае с файл-лоадеров нужно просто добавить булевый ключ multiple.
@maxgib2489
@maxgib2489 2 года назад
Спасибо, я решил это ещё в тот день! А ваш ответ увидел сейчас, спасибо вам за то что помогаете таким как я! Удачи всем! Не сдавайтесь в обучении!
@user-yu3he6rb1e
@user-yu3he6rb1e Год назад
А я в точности все делаю, но не рисуется таблица. Все перепробовал
@Alex-hs8xj
@Alex-hs8xj 3 года назад
в AntDesin есть возможно сть вывести label над input?
@mishanep
@mishanep 3 года назад
Да, есть. Возможный вариант решения описан здесь github.com/ant-design/ant-design/issues/14063
@Alex-hs8xj
@Alex-hs8xj 3 года назад
@@mishanep спасибо! в моем случае оказалось проще использовать лайбл формика
@uncle-xxi
@uncle-xxi 3 года назад
про spin и rotate напутал я думаю.
@alexnikolaienko3478
@alexnikolaienko3478 2 года назад
Привет, у меня возникла такая проблема, в ключе "address" у меня лежит объект, который сожержит нужный мне ключ с "city" . Уже голову сломал, как мне в dataIndex запихнуть ключ лежащий во вложенности?
@mishanep
@mishanep 2 года назад
А в чем конкретно сложность? Без контекста всё равно не понятна проблема.
@alexnikolaienko3478
@alexnikolaienko3478 2 года назад
@@mishanep разобрался. В моей структуре данных есть вложенность. country: [{"city": "New York", "street": "First ave."}, ....] Обращение сделал через ["country", "city"]
@argentmize
@argentmize 8 месяцев назад
Блин, я думал это по blazor гайд...
@_kie
@_kie 3 года назад
Когда услышал, что эти ребята работают над АлиЭкспресс - вздрогнул. Али - это прямо пример, как не надо делать фронт :)
@yokooomori2439
@yokooomori2439 2 месяца назад
ну ты крутой но не черта не понятно, не из за тебя а из за вообще всего как это сделано. почему нельзя просто сказать напиши красивый сайт как я хочу и он сам написался.... СЛОЖНААА всё это
@mishanep
@mishanep 2 месяца назад
Сегодня есть и такое v0.dev
@yokooomori2439
@yokooomori2439 2 месяца назад
@@mishanep Огромное спасибо, это мне точно поможет!
@alexandrsargsyan2202
@alexandrsargsyan2202 2 года назад
Спасибо большое! Отличное объяснение!
Далее
Курс по Ant Design. Урок #1
39:28
Просмотров 15 тыс.
React-приложение на TypeScript
41:29
Просмотров 65 тыс.