Скачать "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fjx5hdo50a2M%252Fmaxresdefault.webp&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Оглавление
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FB91wc5dCEBA%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FF627pKNUCVQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FMJzbJQLGehs%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F_oO4Qi5aVZs%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fb9eMGE7QtTk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FdyFVwXROzZk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FmJ3bGvy0WAY%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
привет и добро пожаловать на проектный курс00:00:03
где вы создадите и развернете лучшие00:00:07
реагируйте на приложение панели администратора, которое вы00:00:10
когда-либо видел00:00:12
я так рад этому00:00:14
это приложение панели управления полностью00:00:16
мобильный адаптивный и настраиваемый00:00:20
можно выбрать между шестью красивыми темами00:00:22
цвета, а также переключаться между00:00:25
темный и светлый режим нашей админ-панели00:00:29
включает в себя одну панель управления00:00:31
три страницы00:00:33
четыре приложения и семь00:00:35
полнофункциональные диаграммы00:00:38
возможности различных видов00:00:40
приложения, которые вы можете создавать с помощью00:00:42
навыки, которые вы получите на этом курсе,00:00:44
бесконечно, без лишних слов, давай00:00:47
взгляните на то, что вы узнаете, как00:00:49
постройте с нуля в этом видео и00:00:53
просто представьте себе все разные виды00:00:55
приложения, которые вы сможете использовать00:00:57
ваша собственная панель управления включает в себя00:01:01
прекрасный вид на все самое00:01:03
важные показатели, такие как доход00:01:06
обзор продаж последних транзакций и00:01:09
подробнее первая страница - это таблица заказов00:01:13
и включает в себя систему нумерации страниц00:01:16
страница сотрудников – это вторая таблица и00:01:19
он включает в себя полностью функциональный00:01:22
функции поиска и фильтрации и00:01:25
наконец, таблица страниц клиентов00:01:28
полностью редактируемый, что означает, что вы можете00:01:30
выберите несколько строк и удалите их как00:01:34
а также редактировать каждое поле отдельно00:01:37
это не специализированная панель управления00:01:40
это означает, что вы можете использовать определенные00:01:42
его части для абсолютно любого приложения, которое вы00:01:45
могу подумать, поэтому я включил00:01:48
четыре приложения, которые имеют решающее значение почти00:01:51
каждая приборная панель00:01:52
первое приложение является полностью функциональным00:01:55
календарь и когда я говорю полностью функциональный00:01:58
я имею в виду, что вы можете перетаскивать события00:02:01
и отредактируйте начало местоположения заголовка и00:02:05
дата окончания и все остальные мелочи00:02:08
подробно, у меня такое ощущение, будто я на телевизионных распродажах00:02:11
покажи, сказав это, но это еще не все00:02:14
вы даже можете изменить вид календаря00:02:17
со дня00:02:18
неделя00:02:19
месяц и даже список повестки дня00:02:22
разве это не безумие, второе приложение - это00:02:25
канбан-доска, ну, вы знаете, просто как00:02:28
все приложение Trello или Jira прямо внутри00:02:31
нашей информационной панели вы узнаете, как00:02:34
сделать это тоже00:02:36
тогда у нас есть полноценное то, что вы00:02:39
посмотри, что ты получишь, редактор, который ты можешь сделать00:02:42
текст жирным шрифтом, вы можете добавлять изображения и00:02:44
существенно изменить текст любым способом00:02:47
вы можете подумать, и, наконец, у нас есть00:02:50
Приложение для выбора цвета очень полезно, если вы00:02:53
хотите, чтобы ваши пользователи могли выбирать00:02:54
определенные цвета, например, по теме00:02:57
их приложения и теперь самое интересное00:03:00
начинается, вы узнаете, как создать семь00:03:03
различные виды диаграмм00:03:05
давайте проверим их один за другим00:03:08
первый график — это линейный график, который вы00:03:10
можно навести курсор на строки, чтобы получить больше00:03:12
информация об этих замечательных подсказках00:03:15
вторая диаграмма — это диаграмма с областями, которую вы00:03:18
можно нажать на определенное значение, чтобы скрыть или00:03:21
показать его с графика на следующих диаграммах00:03:24
классическая гистограмма и круговая диаграмма00:03:27
и наконец у нас есть еще немного кастомов00:03:30
графики финансовых свечей отлично подходят для00:03:33
отслеживание акций00:03:35
и у нас есть таблица сопоставления цветов справа00:03:38
здесь и, наконец, пирамидальная диаграмма00:03:41
это диаграммы, которые вам на самом деле не нужны00:03:43
видишь это часто и если хочешь00:03:45
развивая их, вы бы потратили недели00:03:47
о попытках добиться идеального внешнего вида00:03:50
снова возможности разных00:03:52
виды приложений, которые вы можете сделать00:03:54
используя навыки, которые вы получите в этом00:03:56
конечно бесконечны00:03:58
пользователи также могут свернуть боковую панель, чтобы00:04:01
просматривать контент целиком и00:04:04
также будут рассмотрены некоторые дополнительные виджеты00:04:06
как корзина для покупок, чат00:04:08
уведомления и профиль пользователя, ох и00:04:12
я чуть не забыл упомянуть нашего администратора00:04:15
панель управления полностью адаптирована для мобильных устройств00:04:19
так как вы можете видеть боковую панель автоматически00:04:22
схлопывается, и если мы откроем его, мы сможем двигаться00:04:25
между всеми нашими страницами, естественно00:04:28
такое ощущение, что это родной мобильный телефон00:04:31
приложение00:04:32
параллельно с созданием этого феноменального00:04:34
приложение в этом видео вы узнаете00:04:37
передовые методы реагирования, такие как00:04:40
перехватчики структуры папок и файлов, а также00:04:44
ссылок у нас будет много разных00:04:46
компоненты на разных страницах, поэтому00:04:48
я научу тебя масштабировать свой00:04:51
меньшие приложения реагируют на более высокие00:04:54
размер корпоративного уровня, который вы собираетесь00:04:56
также изучите расширенное управление состоянием00:04:59
все приложение с использованием реакции00:05:03
контекстное API00:05:04
и самое главное вы научитесь00:05:07
использовать sync fusion syncfusion - это00:05:11
лучший в мире набор компонентов пользовательского интерфейса для00:05:15
создание мощных веб-версий для настольных компьютеров и мобильных устройств00:05:18
приложений включает в себя более 170000:05:22
компоненты для всех основных платформ и00:05:25
конечно, мы сосредоточимся на response.js00:05:29
разработку приложений с использованием своих00:05:31
компоненты сэкономят вам часы времени00:05:34
и вы получите профессионала00:05:36
и красивый готовый к производству00:05:38
приложение, все компоненты00:05:41
по умолчанию реагирует, поэтому у вас нет00:05:43
делать дополнительную работу, чтобы сделать их мобильными00:05:47
дружелюбный и, что самое приятное, это00:05:49
Лицензия сообщества syncfusion обеспечивает00:05:52
бесплатный доступ ко всем синхронизациям Fusion00:05:54
компоненты для индивидуальных разработчиков и00:05:57
малый бизнес00:05:59
это означает, что вы сможете получить00:06:02
все, что я упомянул в этом видео00:06:05
совершенно бесплатно все передовые00:06:08
компоненты включены00:06:10
функции, которые займут у вас недели00:06:12
или даже месяцы можно выразить в часах00:06:16
используя свои компоненты00:06:17
всего за 30–40 строк кода00:06:20
вы можете построить очень сложный календарь00:06:23
редактор и диаграмма00:06:25
почти все компоненты нашего приложения имеют00:06:28
построен с использованием таблиц синхронизации00:06:31
редакторы графиков, календарей и, по сути,00:06:35
все, что вы можете увидеть здесь00:06:37
все очень просто в использовании00:06:39
настраиваемый и отзывчивый00:06:42
Box Syncfusion является спонсором00:06:45
это видео, но мне искренне нравится00:06:48
их программное обеспечение, и я бы порекомендовал его00:06:50
каждому из вас я собираюсь00:06:53
обязательно использую его на своем предприятии00:06:56
проекты уровня00:06:57
и если ты похож на меня, когда я впервые услышал00:07:00
насчет синфузии, ты собираешься быть00:07:01
спрашиваю, эй, но разве нет материала пользовательского интерфейса?00:07:05
чакра или и дизайн00:07:07
это также некоторые другие библиотеки пользовательского интерфейса00:07:10
верно00:07:11
эти библиотеки пользовательского интерфейса хороши, но они00:07:13
просто не используйте сложные компоненты, как00:07:16
syncfusion делает syncfusion — это просто00:07:19
универсальное решение для строительного комплекса00:07:22
приложения быстрее и, как я уже сказал, полностью00:07:25
бесплатно для индивидуальных разработчиков и небольших00:07:28
бизнес, так что наслаждайтесь еще раз, я так00:07:32
рад, что могу поделиться этим с тобой и подарить00:07:34
вам подробное руководство по созданию00:07:37
лучшая панель администратора в Интернете00:07:41
если это видео наберет 20 000 лайков, я сделаю это00:07:44
создавайте больше таких видео00:07:47
так что подпишитесь, поставьте лайк и дайте мне знать, что00:07:50
вы хотели бы видеть следующее в комментариях00:07:53
в конце мы также развернем приложение, чтобы00:07:55
что вы можете поделиться им со своими друзьями00:07:57
помести это в свое портфолио и найди работу00:08:00
как только вы его развернете, поделитесь им в Твиттере00:08:03
Instagram или Linkedin и отметьте нас, мы сделаем00:08:07
с радостью поделитесь вашими публикациями в наших социальных сетях00:08:09
медиаканалы для всего мира00:08:12
видеть00:08:13
с учетом сказанного, давайте сразу перейдем к делу00:08:15
код00:08:17
[Музыка]00:08:25
как мы всегда делаем при освоении JavaScript00:08:28
мы собираемся начать с нуля00:08:30
начало00:08:31
это означает, что мы сейчас находимся на рабочем столе00:08:34
мы можем щелкнуть правой кнопкой мыши и создать новый00:08:36
папку, мы можем назвать ее примерно так00:08:39
панель приборов00:08:41
как только у вас появится папка, вы сможете ее открыть00:08:43
выберите свой редактор кода в этом00:08:46
случае мы будем использовать код Visual Studio00:08:49
единственное, что вам нужно сделать, это просто00:08:51
перетащите папку в свой00:08:53
окно кода Visual Studio, как только вы это сделаете00:08:55
что вы можете расширить свою визуальную студию00:08:57
код, и вы можете перейти к просмотру и терминалу00:09:02
Код Visual Studio имеет отличный00:09:04
интегрированный терминал, который мы собираемся00:09:05
используйте для настройки и инициализации нашей реакции00:09:09
приложение00:09:10
Итак, давайте начнем с запуска mpx create00:09:14
тире реагирует на приложение тире, а затем косую черту с точкой00:09:17
чтобы создать его в текущем репозитории00:09:20
мы можем нажать y, чтобы установить следующее00:09:22
пакеты00:09:24
и этот процесс обычно занимает всего00:09:26
около минуты, так что я сделаю паузу00:09:29
записываю и я скоро вернусь00:09:31
и вот мы идем00:09:33
теперь, если вы откроете файловый менеджер00:09:35
вы увидите, что у нас есть несколько00:09:38
файлы и папки здесь00:09:39
самая важная папка сейчас это00:09:41
будет исходная папка, которая00:09:43
содержит все наше реагирующее приложение00:09:47
что мне всегда нравится делать с созданием00:09:49
реагирующие приложения полностью удаляют00:09:51
исходная папка, так как она содержит несколько файлов00:09:53
нам не обязательно это нужно, так что в самый раз00:09:56
щелкните и удалите его, а затем щелкните правой кнопкой мыши00:09:59
прямо здесь и создайте новый пустой источник00:10:02
папку, с которой мы можем сразу начать00:10:05
создание некоторых необходимых файлов для каждого00:10:07
одно реагирующее приложение00:10:09
и конечно самое главное00:10:11
тот00:10:12
файл index.js00:10:14
это файл, в который мы импортируем реакцию00:10:18
от реакции00:10:20
и это также единственный файл, где мы00:10:23
импортировать реакцию dom из реакции-дома, так что в00:10:28
здесь мы подключаем наше реагирующее приложение к00:10:30
настоящий дом, чем мы также можем заняться здесь00:10:33
это приложение для импорта00:10:36
от00:10:37
приложение00:10:38
и этого еще не существует, но мы00:10:40
собираюсь создать его очень скоро, так что просто00:10:42
приложение слэша и, наконец, мы можем сказать00:10:46
реагировать дом00:10:47
точечный рендеринг00:10:49
и тогда в качестве первого параметра мы можем00:10:51
предоставьте наше приложение, и мы сможем сказать запятую00:10:54
точка документа получить элемент по идентификатору, а затем00:10:58
root, это обязательно зацепит00:11:00
наше реагирующее приложение на корневой элемент div00:11:03
сейчас, конечно, мы используем это приложение, но оно00:11:06
еще не существует, так что давайте продолжим и00:11:08
создайте его, мы можем щелкнуть правой кнопкой мыши источник00:11:10
папку и нажмите новый файл и давайте00:11:13
создайте файл с именем app.js00:11:17
внутри там мы можем использовать немного крутого00:11:19
ярлык под названием Rafce, который собирается00:11:22
создать компонент функции стрелки реагирования00:11:25
с экспортом, если у вас это не сработало00:11:28
это должно означать, что у вас нет00:11:30
фрагменты es7 plus, поэтому просто введите es7 plus00:11:35
реагировать на сокращение, реагировать на нативные фрагменты и00:11:38
установите это расширение00:11:40
тогда вы сможете просто ввести00:11:42
rafce и получите этот шаблонный код00:11:46
отлично, теперь у нас есть index.js и00:11:49
наши приложения, так что сейчас самое время00:11:52
установить все необходимое00:11:54
зависимости, которые мы собираемся использовать для00:11:56
этот проект00:11:57
и мы, конечно, можем сделать это внутри00:12:00
наш package.json00:12:02
сделать вашу жизнь проще и сделать00:12:04
уверен, что этот проект работает именно так00:12:06
так и должно быть на долгие годы, я00:12:09
собираюсь дать вам мой package.json, так что00:12:12
внизу в описании будет00:12:14
быть gistub gist, содержащим все00:12:17
код, на который я буду ссылаться00:12:19
это видео, так что просто зайдите на этот github00:12:21
суть найдите package.json и вставьте его00:12:24
прямо здесь, как вы можете видеть это00:12:26
package.json будет иметь00:12:28
версия названия проекта, и она будет00:12:31
иметь точные версии конкретных00:12:33
зависимости00:12:34
это делается для того, чтобы гарантировать, что мы работаем над00:12:38
одинаковые версии зависимостей, поэтому даже если00:12:40
ты смотришь это видео два года00:12:42
после публикации оно все еще00:12:44
теперь отлично подойдет вам, так как00:12:46
вы можете видеть, что мы просто используем простой00:12:49
реагировать здесь у нас есть реакция реагировать дом реагировать00:12:53
значки и панель реагирования маршрутизатора, а также00:12:56
ничего серьезного00:12:58
но, как вы можете видеть, большая часть00:12:59
зависимости на самом деле исходят из00:13:02
добавить синхронизацию00:13:04
итак, здесь мы получим их потрясающие00:13:07
Входные данные раскрывающегося списка сеток календарной диаграммы00:13:11
канбан-доски, всплывающие окна, редакторы форматированного текста00:13:14
и компоненты расписания00:13:16
это сделает наше приложение00:13:19
лучшая панель управления в Интернете, так что00:13:22
единственное, что вам нужно сделать, чтобы установить00:13:24
эти зависимости перейти к просмотру00:13:26
а затем терминал00:13:28
и, наконец, вам нужно ввести npm install00:13:32
Dash Dash Legacy Dash Peer Dash Глубина00:13:36
это обязательно установится00:13:38
только правильные зависимости и, наконец,00:13:41
мы можем нажать Enter00:13:44
этот процесс займет около00:13:46
минута, так что, пока это работает, пойдем00:13:48
вперед и настроим наши стили00:13:50
что вы можете сделать, так это создать новый00:13:54
файл index.css в исходной папке00:13:57
индексная точка CSS00:13:59
внутри здесь вы можете скопировать и вставить00:14:02
файл, который вы также можете найти в папке00:14:04
описание00:14:05
это будет простой файл00:14:07
содержащий импорт для красивого вида00:14:09
шрифт00:14:10
мы сбрасываем поля и отступы00:14:12
на корпусе и импортируем попутный ветер00:14:15
чтобы мы могли использовать этот великий попутный ветер00:14:17
параметры стиля в следующем файле, который мы будем00:14:20
мне понадобится, оно будет называться точкой приложения00:14:23
CSS00:14:24
внутри нашего приложения у нас будет CSS00:14:26
еще несколько стилей, которые вы снова можете найти00:14:29
эти стили внизу в описании00:14:31
внутри той же самой сути GitHub00:14:34
здесь мы просто сбрасываем некоторые из00:14:36
необходимые стили и убедиться, что00:14:38
все выглядит хорошо00:14:40
и пока мы создавали эти файлы00:14:42
похоже, наше приложение установлено00:14:45
это здорово, что мы сможем его запустить00:14:47
достаточно скоро, чтобы проверить, что все в порядке00:14:50
хорошо00:14:51
но прежде чем мы это сделаем, нам просто нужно00:14:53
настроить попутный ветер попутный ветер - это потрясающе00:14:56
css framework, который позволяет вам00:14:58
быстро создавать современные веб-сайты без00:15:01
когда-либо покидая ваш html или в нашем случае00:15:04
jsx00:15:05
вместо отдельных файлов CSS00:15:08
вы сможете использовать служебные классы00:15:10
например, гибкое дополнение в верхнем 4 текстовом центре00:15:13
и т. д., чтобы упростить стилизацию00:15:16
компоненты на вашем веб-сайте для его установки00:15:18
мы можем пройти этот процесс правильно00:15:19
здесь, но мы уже сделали большую часть00:15:22
эти вещи, установив все00:15:23
необходимые зависимости, которые были00:15:25
включен в мой package.json, так что просто00:15:28
завершить дела, нам нужно добавить два новых00:15:32
файлы00:15:33
за пределами исходной папки, что означает в00:15:35
в корень нашего каталога вы можете справа00:15:37
нажмите прямо здесь и создайте новый файл00:15:40
это будет называться попутным ветром00:15:43
точечная конфигурация00:15:44
dot js внутри этого github прямо в00:15:47
описание, вы сможете найти это00:15:49
файл прямо здесь, это просто быстрая настройка00:15:52
также указание размеров шрифтов некоторых шрифтов00:15:56
в качестве цвета фона, чтобы сделать наши00:15:58
рабочий процесс стал намного более плавным и последним00:16:01
нужный нам файл также будет находиться в00:16:03
корень нашего каталога, и он будет00:16:06
называться конфигурацией krakow dot00:16:09
точка JS00:16:11
внутри этой сути GitHub ты будешь00:16:13
смог найти00:16:14
файл craco.config.js, так просто00:16:17
скопируйте и вставьте это прямо сюда00:16:20
я знаю, что мы сделали много копий и00:16:22
вставка для начала но это потому что00:16:24
это только начало, поэтому нам нужно убедиться00:16:27
правильно все настроить, чтобы00:16:29
наш рабочий процесс разработки настолько быстр и00:16:32
как можно более гладко00:16:35
тратить это время на настройку00:16:36
необходимо, потому что с этого момента мы просто00:16:39
сосредоточьтесь на создании фактического кода в00:16:42
таким образом вам не придется беспокоиться о00:16:44
какие-то ошибки или несоответствия у вас будут00:16:47
способен просто программировать и учиться этому00:16:50
много00:16:51
Итак, с учетом сказанного, я думаю, теперь нам следует00:16:55
будьте готовы запустить наше приложение00:16:57
и посмотреть, что происходит, вы можете нажать00:17:00
Ctrl тильда или перейти к просмотру, а затем00:17:02
Терминал00:17:03
и, наконец, вы можете запустить npm start00:17:07
это только что запустило наше приложение00:17:09
localhost 3000, и вы сможете00:17:12
посмотри это в своем браузере00:17:14
если сильно увеличить масштаб, то можно увидеть, что мы00:17:16
иметь небольшое приложение прямо здесь, что означает00:17:19
что наше приложение работает00:17:21
чтобы убедиться, что попутный ветер правильный00:17:23
подключены к нашему приложению, мы из00:17:25
конечно, придется вернуться к index.js и00:17:29
мы должны импортировать это00:17:31
CSS-файл00:17:33
поэтому прямо над нашим приложением импорта мы можем сказать00:17:36
импортировать, а затем в строке с косой чертой00:17:39
индексная точка CSS00:17:41
это будет импортировать весь попутный ветер00:17:43
утилиты, мы также можем перейти к app.js и00:17:47
внутри мы можем импортировать строку00:17:50
точечный слэш00:17:52
приложение.css00:17:54
вот и все00:17:56
и, наконец, вместо того, чтобы просто печатать приложение00:17:58
в div прямо здесь00:18:00
давайте изменим это на h100:18:03
и давайте дадим ему имя класса, равное00:18:05
что-то вроде подчеркивания и текста00:18:09
тире 3xl00:18:11
это действительно должно увеличить шрифт00:18:13
размер, и это должно сделать наш текст00:18:16
подчеркнутый00:18:17
так что давайте сохраним это, и если мы вернемся к00:18:19
наше приложение теперь можно даже масштабировать, потому что00:18:22
вы можете видеть, что это действительно работает00:18:24
попутный ветер связан, потому что класс00:18:26
подчеркнутое имя действительно применило его00:18:29
Ну и замечательно00:18:31
теперь мы готовы приступить к настройке нашего00:18:34
структура файлов и папок, как у меня00:18:36
упоминалось в начале, это происходит00:18:39
это будет довольно большое приложение с большим количеством00:18:42
разных компонентов много данных00:18:44
передвигаться и с большим количеством00:18:46
отдельные страницы, поэтому крайне важно, чтобы00:18:50
мы создаем правильную структуру проекта00:18:52
с самого начала и когда я говорю проект00:18:54
структуру, я в первую очередь имею в виду файл и00:18:56
структура папок и способы, которыми00:18:59
мы собираемся соединить эти файлы00:19:01
Итак, что мы можем сделать для начала, это создать00:19:04
несколько разных папок, все эти файлы00:19:06
и папки будут внутри00:19:08
исходную папку, поэтому щелкните ее правой кнопкой мыши и00:19:11
нажмите создать новую папку00:19:13
мы можем начать с одного из самых00:19:15
важные папки, и это00:19:17
папку компонентов, затем мы собираемся00:19:19
есть второй, который будет00:19:21
называемые контексты, здесь мы собираемся00:19:24
используйте наш API контекста реагирования и, наконец,00:19:28
у нас будет один для страниц00:19:31
страницы похожи на компоненты, но00:19:33
где один компонент не может быть использован00:19:35
внутри других компонентов в случае страниц00:19:38
одна страница может включать и в большинстве случаев00:19:42
будет включать больше компонентов00:19:44
будет четвертая папка00:19:47
вот здесь и эта папка называется00:19:50
данные этой папки данных00:19:52
будет включать в себя множество изображений, а также демо-версию00:19:55
данные, которые мы можем использовать во всей нашей00:19:57
приложение00:19:58
так что внизу в описании самое00:20:01
вероятно, в той же самой сути github вы00:20:03
сможете найти ссылку для скачивания00:20:06
заархивированную папку с данными, вы можете разархивировать ее и00:20:09
просто вставьте это прямо сюда00:20:11
это будет выглядеть примерно так00:20:14
как вы можете видеть, у нас много00:20:16
разные изображения разных людей00:20:18
которые будут использовать нашу панель управления00:20:20
а также различные изображения продуктов из00:20:23
очки для маленьких автомобилей и часов00:20:26
и, наконец, у нас есть огромные фиктивные данные00:20:29
файл, который не содержит абсолютно никакой логики00:20:33
так что не пугайтесь этого здесь, мы просто00:20:36
иметь коллекцию разных массивов00:20:39
и объекты, которые представляют наши данные00:20:42
таким образом вам не придется беспокоиться о00:20:45
написание всего этого скучного кода означает00:20:47
просто объекты и массивы разных00:20:49
строки, такие как разные позиции00:20:52
элементы в определенных диаграммах или некоторых00:20:54
названия, описания, изображения и т. д.00:20:57
все хорошо составлено для вас00:21:00
прямо здесь, и мы сможем просто00:21:02
импортируйте его на разные страницы внутри00:21:05
наша панель управления00:21:06
это сэкономит нам много времени00:21:09
и он собирается сделать это видео таким00:21:11
гораздо более познавательный00:21:13
я не хочу тратить твои 10 часов00:21:15
время00:21:16
чтобы ты напечатал это, я хочу это00:21:18
видео должно быть как можно короче, но как можно00:21:21
вы знаете, с видеороликами по освоению JavaScript00:21:23
это может занять несколько часов00:21:24
но в течение этого времени я хочу00:21:27
ты выучишь как можно больше, я хочу, чтобы ты00:21:30
усваивать знания, которые действительно00:21:32
имеет значение, так что с учетом сказанного у нас теперь есть00:21:35
наш app.js, наш index.js, и у нас есть00:21:39
эти четыре разные папки, которые мы00:21:41
скоро заполню файлами, а теперь давайте00:21:45
начнем с нашего основного файла, который является00:21:48
приложение.js00:21:50
внутри здесь мы, конечно, можем сначала00:21:52
начнем с импорта, поэтому мы собираемся00:21:54
импорт реагирует, а также00:21:58
внутри фигурных скобок используйте крючок эффекта00:22:01
от реакции00:22:03
мы также собираемся импортировать кое-что00:22:05
из React Router dom, и это00:22:08
браузер-маршрутизатор00:22:10
а также маршруты00:22:13
и, наконец, один маршрут, так что это00:22:16
исходит из React Dash Router Dash dom00:22:21
нам также понадобится значок, чтобы мы могли00:22:23
скажем, импорт фи. настройки и все00:22:27
исходя из значков реакции тире вперед00:22:30
слэш фи00:22:32
наконец-то мы импортируем всплывающую подсказку00:22:35
компонент, поэтому компонент всплывающей подсказки00:22:39
так00:22:40
и это будет исходить от00:22:42
добавить синхронизацию00:22:44
косая черта ej200:22:47
тире реагирует тире всплывающие окна поехали00:22:52
думаю, это будет все, что мы00:22:53
нужно сейчас, конечно, позже мы00:22:56
собираемся импортировать все наши компоненты и00:22:58
страницы в один файл, но пока00:23:01
нам пора идти00:23:03
что мы можем сделать, так это сосредоточиться на фактическом00:23:05
структуру, поэтому вместо этого h1 мы можем00:23:09
создайте div прямо здесь и внутри него00:23:12
div мы можем создать маршрутизатор браузера00:23:15
компонент внутри этого браузера-маршрутизатора00:23:18
у нас может быть div00:23:20
и у этого div будет класс00:23:22
имя00:23:23
гибкий00:23:25
родственник00:23:26
и в темном режиме мы хотим установить фон00:23:30
главная черта00:23:31
тире темный тире фон00:23:34
это сила попутного ветра ты просто00:23:37
сделал div flex00:23:39
мы присвоили ему относительную позицию и00:23:41
установить темный цвет фона00:23:44
внутри у нас будет один00:23:46
больше div, и этот div будет иметь00:23:50
имя класса00:23:51
равен фиксированному00:23:53
правый тире 400:23:55
нижнее тире 4, и мы также можем дать ему00:23:58
встроенный стиль, который будет устанавливать z00:24:01
индекс примерно от тысячи до00:24:04
сделать так, чтобы он отображался поверх всех остальных элементов00:24:07
внутри там мы можем отрендерить наш первый00:24:10
синхронизировать компонент Fusion когда-либо00:24:12
и это будет всплывающая подсказка00:24:15
всплывающая подсказка компонента будет иметь свое00:24:18
собственный закрывающий тег00:24:20
и в качестве реквизита он примет00:24:22
содержимое равно настройкам00:24:25
и он примет эту позицию00:24:27
равен вершине00:24:29
вот и все00:24:31
и теперь внутри мы можем просто00:24:33
создать кнопку00:24:35
так00:24:36
вот и внутри этой кнопки мы00:24:40
можно поместить значок настроек fi как00:24:43
самозакрывающийся значок00:24:45
теперь, чтобы иметь возможность увидеть изменения, которые00:24:47
мы пишем в браузере, это может быть00:24:49
хорошая идея поставить наш браузер и нашу00:24:52
редактор бок о бок, и вот, поехали.00:24:55
просто оттащил мой редактор в сторону, и мы00:24:58
можете увидеть этот замечательный значок настроек на00:25:00
внизу он слишком мал на 10000:25:03
но если немного увеличить, то можно увидеть00:25:05
это действительно хорошо00:25:06
так что теперь мы можем навести на него курсор и00:25:09
вы можете увидеть эту замечательную подсказку, это00:25:12
первый компонент синхронизации, который00:25:15
мы использовали, но, конечно, собираемся00:25:17
скоро используй еще много00:25:19
теперь давайте немного стилизуем эту кнопку00:25:22
поэтому давайте присвоим ему тип, равный00:25:24
застегивать00:25:26
и давайте также дадим ему имя класса00:25:28
равно текстовому тире 3 xl, это будет00:25:32
сделаем иконку намного больше, мы можем дать00:25:34
это п00:25:35
3 свойство или дополнительное тире 3.00:25:38
при наведении мы можем сделать рывок00:25:42
тень тире xl, так что теперь, если мы наведем курсор00:25:45
ты видишь эту красивую тень00:25:48
мы также можем сказать, что hover Dash BG Dash Light00:25:52
штрих-серый, так что это изменит00:25:55
цвет фона при наведении00:25:57
что-то вроде этого, конечно, произойдет00:25:59
очень скоро буду выглядеть намного лучше00:26:02
но теперь давайте просто добавим текстовое тире00:26:05
белый цвет, который сделает это00:26:07
совершенно белый и невидимый00:26:10
но то, что мы можем сделать сейчас, находится ниже этого00:26:13
имя класса, которое мы можем предоставить в строке00:26:16
стили, поэтому я скажу стиль00:26:19
поместите туда объект и установите00:26:22
фон должен быть равен00:26:25
а сейчас мы можем просто сказать синий00:26:28
вот и все, конечно, это не то00:26:30
фактический цвет, который мы хотим, мы хотим получить00:26:33
цвет нашей темы помните во вступлении00:26:37
я сказал, что мы сможем изменить00:26:39
цвет темы нашего приложения, чтобы00:26:42
здесь действительно важно, и, наконец, мы00:26:45
можно установить радиус границы00:26:47
что-то вроде 5000:26:49
сделать это в круг00:26:51
выглядим намного лучше, мы действительно можем00:26:53
уменьшите масштаб сейчас, и мы все еще можем видеть это00:26:55
внизу справа, и если мы наведем на него курсор00:26:58
мы видим, что настройки сейчас выглядят великолепно00:27:01
конечно, это действительно ужасный синий цвет00:27:04
но мы скоро добавим тематизацию00:27:06
так что вы сможете выбирать между многими00:27:09
различные предопределенные цвета00:27:11
просто чтобы дать вам представление о том, как00:27:13
готовый сайт будет выглядеть как вы00:27:15
это видно прямо здесь, внизу справа00:27:17
у нас есть тот же значок, и если мы нажмем00:27:20
появится красивая боковая панель и00:27:23
тогда ты сможешь сменить тему00:27:25
цвет и, следовательно, цвет00:27:27
круг тоже меняется00:27:29
и как только мы реализуем эту тему00:27:31
функциональность, которую мы сможем изменить00:27:33
этот фон динамически и это00:27:35
единственная причина, почему это написано в00:27:38
встроенный стиль, а не внутри этого00:27:40
имя класса отличное00:27:42
теперь мы можем приступить к делу00:27:44
создание боковой панели00:27:46
чтобы мы могли перейти под всплывающую подсказку справа00:27:49
здесь, а также под этим div00:27:52
там мы можем проверить, есть ли меню00:27:54
в настоящее время активен, поэтому мы можем сказать активен00:27:57
меню00:27:58
если это правда, то мы хотим визуализировать00:28:01
div, в котором будет боковая панель00:28:03
там00:28:04
если это не так00:28:06
тогда мы можем снова отрендерить div, но00:28:09
внутри здесь мы собираемся немного00:28:11
другой боковой панели это не произойдет00:28:13
быть видимым, потому что ширина будет00:28:15
быть установлен на ноль00:28:17
но что это за активное меню?00:28:20
ну, скоро эта переменная станет00:28:23
исходя из нашего контекста, но пока00:28:26
давайте просто заявим об этом прямо здесь00:28:28
константное активное меню00:28:30
равно и давайте установим его равным00:28:34
правда в начале00:28:35
отлично, теперь мы видим боковую панель справа00:28:38
здесь00:28:39
теперь давайте немного стилизуем эти элементы управления00:28:42
я могу дать вам лучшее представление о том, как00:28:44
это будет выглядеть как00:28:46
конечно, ты можешь посетить магазинчик00:28:48
панель мониторинга для приложения Cell Dot, а затем00:28:51
ты можешь увидеть сам, но я оставлю00:28:53
этот сайт прямо здесь и всякий раз, когда мы00:28:56
начну внедрять новую функцию, я00:28:58
собираюсь показать вам, что мы пытаемся00:29:00
достичь с помощью кода, который мы будем00:29:01
пишем, поэтому в данном случае мы, конечно,00:29:04
пытаюсь реализовать эту боковую панель00:29:07
появляться и исчезать, чтобы сделать это, давайте00:29:11
примените некоторые имена классов к нашему div, эти00:29:14
имена классов будут00:29:16
имя класса равно w тире 72, что00:29:20
означает ширину около 18 баран00:29:24
тогда мы тоже это исправим00:29:27
а также укажите имя класса боковой панели00:29:30
в темном режиме мы собираемся установить фон00:29:33
тире вторичное00:29:34
тире темный тире bg, а также обычно00:29:39
задний фон будет белым, так что теперь это00:29:42
собираюсь дать ему немного тени00:29:44
ниже, я не уверен, что вы это видите00:29:46
это едва видно, но после того, как мы00:29:48
реализовать все стили, которые он собирается00:29:50
быть ясно видимым теперь, конечно,00:29:53
боковой панели здесь не будет00:29:55
просто текст на боковой панели, скоро мы00:29:57
собираюсь реализовать настоящую боковую панель00:30:00
компонент, а пока давайте просто оставим его00:30:03
как текст и продолжайте создавать app.js00:30:06
код00:30:07
если боковая панель не активна, мы можем00:30:09
просто установите имя класса00:30:11
быть равным w00:30:13
тире 0, что означает, что ширина равна 0, а также00:30:18
в темном режиме00:30:20
bg тире вторичное тире темное тире фон00:30:24
так что теперь, если мы переключим это на ложь00:30:28
вручную00:30:29
вы можете заметить, что что-то не так00:30:31
выглядит правильно, посмотрим00:30:34
и, как вы можете видеть, теперь мы это потеряли00:30:36
боковая панель и только текст, который здесь00:30:39
видно, так что, конечно, просто боковая панель00:30:42
этого позже не будет00:30:44
как только мы реализуем этот компонент00:30:47
теперь под этим динамическим блоком кода мы00:30:50
может иметь div00:30:51
и это будет div для нашего00:30:53
Панель навигации00:30:55
поэтому давайте применим другой класс00:30:57
названия в зависимости от того, открыто ли меню00:31:00
в настоящее время активен, поэтому мы можем сказать класс00:31:02
имя, а затем сделайте это динамическим блоком00:31:05
кода00:31:06
если активное меню истинно00:31:09
затем мы хотим применить строку, которая00:31:12
будет выглядеть примерно так00:31:14
темный00:31:15
BG Dash Главная черта BG00:31:19
обычно BG Dash Main Dash BG00:31:23
Мин тире h тире экран00:31:26
на средних аппаратах МЛ-7200:31:30
и w тире полное, так что это если меню00:31:34
активен00:31:36
тогда если меню не активно00:31:39
тогда мы сможем скопировать почти все00:31:42
этого00:31:43
давайте скопируем и вставим это сюда00:31:45
нам понадобится темный фон, основной фон00:31:49
нам понадобится минимальный экран00:31:51
и нам также понадобится полная буква w, но мы00:31:54
не нужно00:31:55
mdml72 вместо этого нам нужно иметь00:31:58
гибкая черта 2.00:32:01
как вы можете видеть, это довольно00:32:03
аналогично, когда он открыт или закрыт00:32:06
и что мы можем сделать, это создать шаблон00:32:10
строка, а затем замените весь код00:32:12
это повторяется, это небольшой урок00:32:15
просто javascript как уменьшить00:32:18
повторяющийся код00:32:20
Итак, сначала давайте найдем все части00:32:22
код, который повторяется00:32:24
так здесь похоже все00:32:27
включая W полный00:32:29
единственное, что отличается, это00:32:31
MD и Flex прямо здесь00:32:33
поэтому внутри имени класса давайте создадим00:32:36
строка шаблона, которая выглядит следующим образом00:32:39
и эта строка шаблона будет00:32:41
включить все общие классы00:32:44
так что все плюс полная черта00:32:47
так что теперь мы избавились от всего этого00:32:50
вот и все, и единственная разница в том, что00:32:54
md и flex, так что теперь внутри этого00:32:58
строка шаблона, мы можем просто сказать, если00:33:00
меню активно, затем примените mdml и00:33:04
обычно применяют flex200:33:07
таким образом мы сэкономили много кода и00:33:10
добился того же вида00:33:12
теперь внутри этого div мы собираемся00:33:14
есть еще один div00:33:16
и у этого div будет класс00:33:19
имя, равное фиксированному00:33:21
и я знаю, что это может выглядеть немного00:33:23
поначалу странно, особенно если у тебя есть00:33:25
никогда не использовал попутный ветер, но попутный ветер есть00:33:28
действительно полезно и позволяет вам больше00:33:30
легко писать стили00:33:32
если вы никогда не использовали его раньше00:33:35
я бы настоятельно рекомендовал вам открыть00:33:37
их документы параллельно с этим00:33:39
редактор и всякий раз, когда я печатаю определенный00:33:42
стиль, например, с полным тире, ты можешь00:33:45
просто зайди в поиск и напиши это00:33:47
и нажмите прямо здесь00:33:49
это покажет вам, что именно00:33:52
это имя класса, например, w-400:33:56
собираюсь занять всю ширину div00:33:59
а еще есть отличное расширение, так что00:34:02
если вы зайдете в расширения и наберете00:34:04
попутный ветер00:34:05
там вы можете найти CSS попутного ветра00:34:07
IntelliSense00:34:08
это расширение произойдет, когда вы00:34:11
наведите указатель мыши на определенное свойство, и вы получите00:34:13
полное объяснение того, что именно CSS00:34:17
стили применяются к этому классу, поэтому w00:34:21
тире полное просто устанавливает ширину 10000:34:25
и еще раз, когда я пройду через все00:34:27
имена классов, и я записываю их, если00:34:30
что-то не знакомо, просто пауза00:34:33
видео, а затем скопируйте это имя класса00:34:36
вставьте его в документацию по таблицам и узнайте, что00:34:39
речь идет о том, что это лучший способ учиться00:34:42
и совершенствоваться как разработчик00:34:45
с учетом сказанного, давайте создадим еще один div00:34:48
внутри нашего текущего div00:34:50
и у этого div будет класс00:34:53
имя00:34:54
равен фиксированному00:34:57
MD статический00:34:59
BG Dash Главная черта BG00:35:03
в темном режиме bg тире основная тире темная тире00:35:08
бг00:35:09
у него будет стиль навигационной панели и00:35:12
мы ворвемся туда, мы сможем00:35:15
просто введите navbar сейчас, но позже00:35:18
мы собираемся использовать настоящую панель навигации00:35:21
компонент00:35:22
помни, сейчас мы просто собираемся00:35:24
через настройку app.js, а затем00:35:26
скоро мы заменим все00:35:28
этих текстов прямо здесь с реальными00:35:31
компоненты00:35:32
теперь ниже этого div и друг под другом00:35:35
div, мы можем создать основной div для00:35:38
маршрутизация00:35:40
так что это будет пустой элемент div с00:35:42
никаких названий классов, и вот мы здесь00:35:45
будут наши маршруты00:35:48
элемент маршрутов принадлежит реакции00:35:50
Дом маршрутизатора, и это контейнер для00:35:53
вложенное дерево элементов, которое разветвляется на00:35:56
конкретное место, поэтому мы собираемся00:35:58
внутри там разные маршруты00:36:01
каждый маршрут представляет собой самозакрывающийся тег, который00:36:04
есть путь00:36:06
в этом случае первый будет00:36:08
быть просто косой чертой или домом00:36:11
и тогда у него есть элемент, который вы00:36:13
хочу сделать00:36:14
в этом случае элемент может быть строкой00:36:17
электронной коммерции00:36:21
вот и все, вы можете увидеть это прямо здесь00:36:23
правая сторона00:36:25
конечно наши элементы не собираются00:36:27
быть простыми строками, каждый элемент собирается00:36:30
быть отдельной страницей00:36:33
но давайте сначала продолжим и создадим все00:36:35
маршруты, а затем мы собираемся00:36:37
заменить все эти элементы фактическими00:36:40
страницы00:36:41
я собираюсь немного расширить это00:36:44
вот и все00:36:45
и тогда у нас будет второй00:36:46
маршрут00:36:47
путь будет прямой косой чертой00:36:51
электронная коммерция00:36:52
и тогда мы тоже хотим показать то же самое00:36:54
вкладка электронной коммерции вот такая00:36:57
это будет домашняя страница, поэтому, если00:37:00
мы немного расширим это и перейдем к00:37:02
электронная коммерция, вы можете видеть, что у нас есть это00:37:04
отличный вид прямо здесь00:37:06
то же самое произойдет, если мы просто пойдем00:37:08
косая черта, мы покажем то же самое00:37:11
компонент00:37:12
теперь нам нужно реализовать маршрутизацию для00:37:14
все остальные страницы для заказов00:37:17
сотрудники, клиенты и так далее, так что давайте00:37:21
добавьте их прямо сейчас00:37:23
мы даже можем добавить некоторые комментарии, перейдя00:37:26
над нашими маршрутами, контролируя и00:37:28
затем нажмите косую черту00:37:30
это будет наша панель управления00:37:34
ниже у нас будет что-то вроде00:37:36
наши страницы00:37:38
мы собираемся создать самозакрывающийся00:37:40
компонент маршрута00:37:41
и первая страница в нашем списке собирается00:37:43
называться приказами00:37:45
и мы можем визуализировать строку элемента00:37:48
заказы00:37:49
тогда мы можем продублировать это два раза00:37:51
вторая страница будет вперед00:37:54
сократить сотрудников00:37:56
и затем он собирается отобразить00:37:58
компонент сотрудников, который мы собираемся00:38:00
создать позже00:38:02
третий будет клиентами00:38:05
и этот элемент будет клиентами00:38:08
мы просто следуем этой структуре00:38:10
Прямо здесь00:38:11
теперь у нас будет четыре разных00:38:13
маршруты приложений и, наконец, семь00:38:15
различные графики маршрутов00:38:17
так что давайте освободим немного места00:38:19
давайте добавим комментарий для приложений00:38:23
и мы можем просто дублировать один из00:38:26
маршруты выше00:38:27
первым приложением будет канбан00:38:30
доска00:38:31
этот клон jira или trello00:38:34
и он отобразит то же самое00:38:35
компонент00:38:37
мы можем повторить это еще три раза00:38:40
тогда у нас будет редактор00:38:43
и то же самое здесь, компонент редактора00:38:47
тогда у нас будет календарь00:38:49
а также компонент календаря00:38:52
наконец-то у нас будет цвет00:38:54
выбор тире00:38:56
а также элемент будет00:38:58
выбор цвета00:39:01
написано вместе вот так00:39:04
и, наконец, мы можем продублировать один маршрут00:39:07
мы можем освободить место для наших диаграмм00:39:10
и есть семь или восемь разных00:39:13
графики, первый из которых — это линия, поэтому мы можем00:39:16
просто скажи строку прямо здесь00:39:18
и мы можем дублировать это множество разных00:39:20
раз для каждого типа диаграммы00:39:23
у нас будет диаграмма областей00:39:25
то же самое, вот здесь, гистограмма00:39:29
и элемент панели00:39:31
круговая диаграмма00:39:33
вот так, а также элемент пи00:39:36
тогда у нас есть финансовые возможности00:39:39
диаграмма00:39:40
Прямо здесь00:39:42
у нас есть диаграмма сопоставления цветов00:39:46
такой цвет00:39:47
картографирование00:39:49
а еще у нас есть пирамида00:39:52
диаграмма00:39:54
пирамида, а также элемент пирамиды00:39:59
и последний в нашем списке — это00:40:01
диаграмма с накоплением, поэтому мы можем сказать «сложенная»00:40:04
Прямо здесь00:40:06
вот и все, теперь у нас есть все это00:40:09
разные маршруты, и если мы наберем строку00:40:12
прямо здесь вы должны увидеть00:40:14
линия едва в правом верхнем углу00:40:17
конечно, мы сделаем такой вид00:40:20
станет намного лучше, как только мы реализуем00:40:22
эти компоненты, так что сейчас может быть лучшим00:40:26
пора это сделать, мы можем пойти дальше и00:40:28
доработать структуру файлов и папок00:40:31
путем создания всех компонентов и00:40:34
все страницы, которые нам понадобятся00:40:36
на протяжении всего этого приложения00:40:39
это потребует некоторой тяжелой работы00:40:42
но это сделает нашу жизнь намного проще00:40:45
позже, потому что мы сможем просто00:40:47
импортируйте все компоненты, которые у нас уже есть00:40:50
создано так с учетом сказанного00:40:52
давайте добавим шаблонную структуру для00:40:55
все наши компоненты, а также все00:40:58
наши страницы00:40:59
мы можем начать с компонентов00:41:01
курс00:41:02
внутри папки компонентов мы можем00:41:04
создайте новый файл с именем button.jsx00:41:09
внутри каждого нового компонента, который мы создаем00:41:12
мы собираемся запустить00:41:13
команда rafce, которая создаст00:41:16
простая файловая структура00:41:19
теперь мы можем создать новую папку на этот раз00:41:21
внутри папки компонентов под названием00:41:24
графики00:41:25
внутри там мы можем создать наш первый00:41:27
диаграмма под названием линия00:41:29
диаграмма00:41:30
точка JSX00:41:32
снова просто запустите raf00:41:36
давайте повторим процесс для другого00:41:38
диаграмма под названием pi dot jsx и снова введите00:41:42
р-а-ф-с-е00:41:44
мы можем продолжить это с помощью искровой линии00:41:47
dot jsx — это еще одна диаграмма00:41:51
и, наконец, мы собираемся импортировать00:41:53
сложенный00:41:55
dot jsx — это еще одна диаграмма00:41:58
мы закончили с диаграммами, так что вы00:42:00
можем просто закрыть эту папку, и мы сможем00:42:02
приступим к добавлению новых компонентов в00:42:04
папка компонентов00:42:06
под нашей кнопкой мы собираемся разместить00:42:09
тележка00:42:10
jsx00:42:11
снова просто запустите raf00:42:14
ниже этого у нас будет00:42:16
чат.jsx00:42:19
опять просто р-а-ф-с-е00:42:22
тогда у нас будут диаграммы00:42:25
заголовок00:42:26
dot jsx и снова можно ввести rafce00:42:31
давайте продолжим, мы собираемся00:42:32
создать footer.jsx00:42:36
и повторите процесс00:42:38
ниже нижнего колонтитула у нас будет наш00:42:40
заголовок00:42:42
jsx00:42:43
затем под заголовком мы собираемся00:42:45
есть наша панель навигации00:42:48
jsx00:42:49
под панелью навигации у нас будет наш00:42:52
уведомление00:42:54
точка jsx под уведомлением о том, что мы00:42:56
у боковой панели будет точка jsx00:43:00
осталось еще два, и мы собираемся00:43:02
есть компонент под названием theme00:43:05
настройки00:43:06
dot jsx и, наконец, последний компонент00:43:10
это профиль пользователя00:43:13
точка JSX00:43:15
и, наконец, запустите там раф-рейс00:43:19
и это вся наша структура всех00:43:23
компонентов, которые мы собираемся00:43:25
используйте сейчас, чтобы их было легче экспортировать, мы00:43:28
можно создать новый файл с именем index.jsx00:43:33
ниже в описании вы сможете00:43:35
чтобы найти суть GitHub для этого индекса00:43:38
файл00:43:39
и после того, как вы скопируете и вставите это сюда, вы00:43:41
мы видим, что мы просто экспортируем все00:43:44
из необходимых компонентов мы просто00:43:46
созданный прямо во всем нашем00:43:48
приложение00:43:49
это позволит нам просто00:43:52
импортируйте их все в одну строку00:43:55
большой00:43:56
теперь просто завершить работу над файлом и следовать00:43:58
структуру мы можем повторить ту же самую00:44:00
вещь для наших страниц00:44:02
будет довольно много страниц00:44:05
так что потерпите, мы можем это сделать, но00:44:08
как я уже сказал, это займет еще немного00:44:10
время в начале, но когда мы начинаем кодировать00:44:13
все будет так много00:44:16
быстрее, потому что мы сделали это в начале00:44:18
Итак, давайте создадим нашу первую страницу, которая будет00:44:20
будет называться Calendar.jsx00:44:23
и вы также можете ввести rafce00:44:26
внутри страниц, которые мы собираемся также00:44:28
у нас есть графики, которые будут00:44:31
папку внутри этой папки с графиками, которую мы00:44:34
можем создать нашу первую диаграмму под названием Area00:44:37
точка JSX00:44:38
снова р-а-ф-с-е, я даже не думаю, что00:44:41
приходится больше об этом упоминать, потому что00:44:43
ты уже делаешь это так быстро00:44:46
тогда у нас будет точка в формате jsx00:44:49
и снова рафс00:44:51
у нас будет следующий, который00:44:53
будет звонить00:44:55
маппинг.jsx00:44:57
после этого у нас будет наш00:44:59
финансовый00:45:01
jsx нам также понадобится линейная диаграмма, так что давайте00:45:05
просто введите строку с точкой jsx, которая нам тоже понадобится00:45:09
круговая диаграмма, скажем, pi dot jsx, мы00:45:12
нужна пирамида00:45:14
такая пирамида00:45:16
jsx00:45:17
и, наконец, нам нужен stacked.jsx00:45:22
это все диаграммы, и мы просто00:45:24
осталось еще несколько страниц00:45:27
поэтому внутри папки страниц создайте00:45:29
новый файл под названием color00:45:32
сборщик00:45:33
jsx00:45:34
затем мы создадим customer.jsx00:45:38
и похоже, я забыл сделать рафс00:45:40
не забудь это сделать, потому что00:45:42
тогда компонент не будет существовать тогда00:45:45
у нас будет ecommerce.jsx00:45:48
у нас также будет редактор00:45:52
jsx, у нас будет00:45:55
сотрудники00:45:57
jsx, наконец, нам нужен канбан00:46:01
jsx00:46:04
и наконец нам нужны заказы00:46:08
dot jsx и, как мы уже сделали с00:46:10
компоненты, мы также можем сделать то же самое00:46:12
со страницами создать новую00:46:15
index.jsx и ниже в00:46:18
описание в github gist, вам следует00:46:20
сможем найти файл, куда мы экспортируем00:46:23
со всеми этими страницами мы закончили00:46:26
всю структуру файлов и папок и00:46:29
с этого момента все будет просто течь00:46:31
плавно, так что теперь все, что вы можете сделать, это нажать00:46:34
в любом месте вашей визуальной студии00:46:37
Ctrl или команда, а затем продолжайте нажимать w00:46:40
закрыть все открытые файлы00:46:43
делая это, ты также собираешься00:46:45
обратите внимание, если в каком-то файле отсутствует rafce00:46:48
на случай, если вы пропустили это, давайте закроем все00:46:50
из них и да, похоже, есть00:46:52
кое-что, где я пропустил рафс, так что я00:46:56
добавлю это прямо сейчас00:46:58
вот и все00:47:00
и это обязательно закроется00:47:02
все ваши открытые в данный момент файлы00:47:04
теперь у нас чистая рабочая среда00:47:08
мы можем вернуться к app.js и теперь можем00:47:11
импортируйте все эти компоненты и страницы, чтобы00:47:15
чтобы сделать это над нашим приложением импорта css, мы00:47:18
можно сказать импорт в фигурных скобках00:47:21
панель навигации00:47:23
нижний колонтитул00:47:24
боковая панель00:47:26
тема00:47:27
настройки, и они берутся из00:47:30
из-за этого компоненты косой черты00:47:33
index.js, мы можем импортировать все00:47:36
в одну строку00:47:37
а затем мы займемся импортом00:47:40
электронная коммерция00:47:41
заказы00:47:43
календарь сотрудников00:47:46
сложенный00:47:48
пирамида00:47:50
клиенты00:47:53
канбан00:47:55
область00:47:57
бар00:47:59
Пи00:48:00
финансовый00:48:02
палитра цветов, а также отображение цветов00:48:07
и, наконец, редактор, и это00:48:10
исходя из этой косой черты страниц00:48:14
вот и все, теперь у нас должно быть00:48:16
все, что нам нужно, похоже, у нас есть00:48:19
проблема внутри наших компонентов00:48:22
внутри файла index.jsx00:48:25
пойдем туда00:48:27
это похоже на определение правила00:48:29
импортировать без цикла00:48:31
не был найден, потому что у меня есть это00:48:34
линия прямо здесь для тебя, она не пойдет00:48:36
быть там, пока я разрабатываю это00:48:39
проект, я использовал eslint, но теперь мы00:48:41
мне это не нужно, так как мы собираемся сохранить00:48:43
наш код чист с самого начала00:48:46
отлично, и теперь мы можем видеть наш код таким, какой он есть00:48:49
было, если мы перейдем на локальный хост 3000, мы сможем00:48:52
см. электронную коммерцию прямо здесь, но, конечно00:48:54
мы только что создали эти компоненты и мы00:48:56
никогда не используйте их сейчас вместо00:48:59
боковая панель прямо здесь мы можем просто открыть00:49:02
новый самозакрывающийся компонент00:49:04
называется боковой панелью00:49:06
теперь ничего не изменится для00:49:08
панель навигации, боковая панель или что-то еще00:49:11
потому что эти компоненты представляют собой просто00:49:13
div, содержащий тот же текст, но этот00:49:16
позволит нам реализовать00:49:18
реальная логика внутри каждого из них00:49:21
компоненты00:49:22
так что давайте просто продолжим через это00:49:25
и давайте изменим весь этот текст00:49:26
элементы в соответствующие им00:49:28
компоненты, поэтому нам придется сделать это для00:49:31
боковая панель два раза для навигационной панели справа00:49:34
здесь00:49:35
и тогда нам придется делать это для каждого00:49:37
один из этих компонентов00:49:39
Самый быстрый способ сделать это — удерживать00:49:42
Alt в Windows, а затем нажмите00:49:45
сразу после входа в вступительную строку00:49:48
все эти маршруты00:49:49
так что просто удерживайте Alt и затем щелкните правой кнопкой мыши00:49:52
после открывающей строки в двойных кавычках00:49:56
так что продолжайте делать это для каждого00:49:58
элемент00:50:00
вот и давайте повторять это до тех пор, пока00:50:02
конец00:50:05
вот и все00:50:06
и теперь что вы можете сделать, это нажать00:50:08
Backspace, чтобы удалить первое отверстие00:50:12
знак00:50:13
откройте фигурную скобку, потому что нам нужно00:50:15
быть там внутри00:50:17
откройте тег, вот так00:50:19
теперь удерживайте Ctrl, а затем нажмите стрелку00:50:22
правильно еще раз00:50:24
закройте фигурную скобку и нажмите кнопку00:50:27
косая черта и закрывающий тег, чтобы закрыть00:50:30
маршрут также00:50:31
с этим00:50:32
мы эффективно изменили все наши00:50:36
строки на компоненты00:50:38
я знаю, что это было что-то вроде пальца00:50:40
тренировка, и она действительно проверила вашу00:50:42
умение использовать сочетания клавиш00:50:44
эффективно00:50:45
но если это не сработало для тебя00:50:48
просто вручную измените каждый00:50:50
нить00:50:51
из этого00:50:53
в это00:50:55
это заставит это работать и это00:50:57
так у нас будут все наши компоненты00:50:59
теперь мы можем приступить к делу и начать00:51:01
работали над этим всю нашу работу00:51:05
настройка теперь у нас есть весь файл и00:51:07
структура папок всех наших страниц и00:51:10
наши компоненты, а также приложение js00:51:13
сделанный00:51:14
конечно, мы потратили много времени на00:51:16
настройка, и наше приложение выглядит не так00:51:19
хорошо, кажется, ничего не видно, но00:51:22
очень скоро, просто потому, что мы00:51:24
потратил некоторое время на правильный файл00:51:26
структуру, мы сможем очень легко00:51:29
создайте наше приложение и начните кодировать00:51:32
сразу отличная работа по созданию этого00:51:35
здесь и сейчас начинается веселье00:51:38
и, наконец, мы готовы начать кодирование00:51:41
из нашей боковой панели, тогда мы сможем00:51:43
посмотри, что происходит, но даже прямо сейчас00:51:46
мы должны быть в состоянии увидеть что-то00:51:48
экран подозрительно слишком белый00:51:51
достаточно00:51:52
так что мы можем пойти проверить00:51:55
открой консоль и посмотри00:51:57
электронная коммерция не определена00:52:00
здесь должна была быть электронная коммерция00:52:03
с маленькой буквы c00:52:05
так что давай быстро исправим это прямо здесь00:52:08
и здесь тоже00:52:10
как только мы это исправим и перезагрузим00:52:12
страница00:52:13
похоже, у нас все еще есть ошибка00:52:16
все в порядке, давайте откроем консоль00:52:18
еще раз00:52:20
и похоже, что линия не определена, поэтому00:52:24
давайте посмотрим, импортируем ли мы строку00:52:25
правильно00:52:27
похоже, мы не настолько, на что способны00:52:30
do находится под страницами, мы можем добавить эту строку00:52:34
импорт в конце00:52:36
похоже, я это пропустил00:52:38
как только мы добавим его сюда и перезагрузим страницу00:52:41
у нас больше нет ошибок и мы можем00:52:43
начнем кодировать нашу боковую панель, мы собираемся00:52:46
чтобы включить его, установив true прямо здесь00:52:49
вот и мы можем переключиться на наш00:52:52
киберкомпонент, удерживая Ctrl, а затем00:52:55
щелкнув левой кнопкой мыши, мы идем00:52:58
теперь давайте перетащим наш редактор еще немного00:53:00
сторону, и давайте начнем работать над нашим00:53:03
боковая панель внутри нашей боковой панели, которую мы сначала00:53:06
нужно иметь немного импорта00:53:08
нам нужно импортировать компонент ссылки как00:53:11
а также компонент навигационной ссылки00:53:14
от реакции00:53:16
маршрутизатор даш дом00:53:18
это позволит нам переключиться00:53:20
между несколькими разными страницами в нашем00:53:22
приложение00:53:24
так что я просто собираюсь немного потянуть это00:53:26
подробнее здесь, а затем мы сможем импортировать несколько00:53:28
значки00:53:30
первый значок, который нам нужен, будет00:53:32
импортировать в фигурные скобки si00:53:36
магазин, где00:53:38
и это будет исходить от реакции00:53:41
значки косая черта, нам тоже нужен такой00:53:44
тем более это будет импорт00:53:47
Мэриленд00:53:48
контур00:53:49
отмена00:53:50
и это будет исходить от00:53:52
реагировать тире00:53:55
косая черта, мд00:53:58
наконец, нам нужна та самая всплывающая подсказка00:54:00
компонент, чтобы мы могли сказать всплывающую подсказку импорта00:54:03
компонент из которого будет добавлен00:54:06
синхронизация слияния00:54:07
косая черта ej2 и дальше пошло00:54:10
реагировать00:54:12
всплывающие окна00:54:14
вот и все00:54:15
мы также собираемся импортировать все00:54:17
разные ссылки, поэтому импортируйте ссылки00:54:20
и это будет исходить от00:54:22
точка косая черта данные косая черта манекен так00:54:26
это пустышки или демо-данные, это все00:54:29
импорт, который нам нужен сейчас, и мы00:54:32
наконец-то можем начать кодировать нашу боковую панель00:54:35
наша боковая панель будет элементом div и00:54:38
точнее, это будет div00:54:40
с довольно большим количеством имен классов, чтобы мы могли00:54:43
добавить свойство имени класса00:54:45
и мы можем сказать00:54:46
мл-3 для оставшейся маржи00:54:49
h-экран, что означает полную высоту00:54:52
на средних устройствах произойдет переполнение00:54:55
быть скрытым00:54:57
обычно переполнение будет установлено на00:54:59
авто на средних устройствах и при наведении00:55:04
для переполнения будет установлено значение auto00:55:08
так00:55:09
и наконец пб-1000:55:12
как и в дополнении снизу, теперь внутри там00:55:14
нам также нужно знать, доступно ли меню00:55:16
активный00:55:17
эта информация будет поступать от нашего00:55:20
контекст состояния, но поскольку у нас нет00:55:22
контекст уже, скажем так00:55:25
константное активное меню равно true просто00:55:28
фиктивная переменная, скоро мы собираемся00:55:31
чтобы сделать это динамичным00:55:32
поэтому мы можем открыть новый динамический блок00:55:34
код и скажите, активно ли меню или активно00:55:38
меню и конец00:55:40
в этом случае мы можем сделать это рендеринг00:55:43
из пустого фрагмента реакции и внутри00:55:46
этого фрагмента у нас будет00:55:48
div00:55:49
у этого div будет имя класса00:55:52
равно гибкому00:55:54
оправдать тире между элементами и элементами00:55:57
Центр приборной панели внутри, мы хотим00:56:00
отобразить одну ссылку вот так00:56:03
и эта ссылка будет указывать только на00:56:06
косая черта00:56:08
он также будет иметь нажатие00:56:09
свойство00:56:10
который на данный момент будет просто00:56:13
пустая функция обратного вызова, которую мы собираемся00:56:14
реализовать это очень скоро00:56:16
и у него будет несколько названий классов00:56:20
поэтому имя класса будет тире элементов00:56:23
центр00:56:24
и непосредственно перед тем, как мы начнем вводить00:56:26
имена классов, возможно, было бы неплохо00:56:28
уже добавил что-то в ссылку, поэтому мы00:56:30
можно увидеть, что мы меняем00:56:32
здесь мы собираемся это отрендерить00:56:34
значок магазина си00:56:37
и рядом с ним мы скажем00:56:39
шопи это воображаемое имя нашего00:56:42
компонент, мы можем поместить его внутри диапазона00:56:45
такой элемент00:56:47
вот и все00:56:49
так что теперь, если мы сохраним это и перезагрузим00:56:51
страница, вы можете видеть, что теперь у нас есть это00:56:53
боковая панель во всю высоту, появляющаяся на00:56:55
левая сторона и это уже выглядит так00:56:58
намного лучше00:56:59
поэтому давайте продолжим добавлять имена классов в00:57:01
эту ссылку мы собираемся пропустить00:57:03
свойство Dash 3, а также ml-3, которое00:57:07
собираюсь подтолкнуть его немного слева00:57:10
у него будет МТ-4, который собирается00:57:12
оттолкнуть его от вершины00:57:15
это будет гибкий контейнер, который00:57:17
собирается сделать так, чтобы элементы появлялись в00:57:19
строка, в которой будет текст00:57:22
xl, чтобы сделать его больше, а также00:57:25
тире шрифта очень жирный00:57:27
мы также собираемся отслеживать его00:57:29
рывок вот так00:57:32
и, наконец, в темном режиме текст00:57:35
будет белым, и обычно текст00:57:38
это будет текстовый планшет00:57:40
90000:57:41
вот и все00:57:43
так что, как вы можете видеть, использование попутного ветра может быть00:57:45
действительно мощный, всего за несколько классов00:57:48
имена, которые могут вам понравиться00:57:50
боковая панель и ссылка прямо здесь и сейчас внизу00:57:53
по этой ссылке мы хотим отобразить всплывающую подсказку00:57:56
компонент00:57:57
этот компонент всплывающей подсказки будет иметь00:57:59
контент, равный меню00:58:02
так00:58:03
а также у него будет позиция00:58:06
и эта позиция будет нижней00:58:09
центр вот так00:58:11
внутри мы можем отобразить кнопку00:58:14
скажем, кнопка, и эта кнопка00:58:17
просто буду иметь схему MD00:58:19
отменить значок самозакрывания, как вы можете видеть00:58:22
оно появилось прямо здесь, вверху справа00:58:25
это закроет нашу боковую панель00:58:28
конечно, это слишком мало00:58:30
прямо сейчас, так что давай сделаем его немного больше00:58:33
давайте применим несколько свойств к нашему00:58:35
кнопка00:58:36
мы можем сказать, что тип равен кнопке00:58:39
мы также можем присвоить ему свойство onclick00:58:42
что на данный момент мы оставим как есть00:58:45
пустая функция обратного вызова позже00:58:47
мы собираемся сделать это действительно близко00:58:49
боковая панель00:58:50
и мы также можем дать ему имя класса00:58:53
равно текстовому тире xl00:58:56
также закругленное тире полное00:58:59
p-3 для заполнения00:59:02
при наведении мы хотим установить тире заднего плана00:59:05
светло-серый00:59:07
верхний предел поля, где будет установлен mt00:59:09
до 400:59:11
это будет элемент уровня блока00:59:13
и на средних устройствах это будет00:59:16
скрытый00:59:17
вот и все00:59:18
так что теперь это уже похоже на00:59:20
отличная боковая панель, конечно, она не работает00:59:23
пока что-нибудь, но достаточно скоро это будет00:59:26
что мы можем сделать, это ниже этого div, мы можем00:59:29
создайте еще один div, это будет00:59:32
для наших реальных товаров00:59:34
поэтому имя класса div здесь равно00:59:38
мт-10, чтобы отделить его немного от верхнего00:59:42
изменчивый раздел00:59:44
там мы хотим перебрать наши ссылки и00:59:47
что на самом деле представляют собой те ссылки, которые мы представляем00:59:50
импортируя их из фиктивных данных, но если00:59:52
вы в любой момент захотите проверить, что00:59:54
это удерживая Ctrl, нажмите прямо здесь и00:59:57
как вы можете видеть, это массив с01:00:00
несколько объектов01:00:01
каждый объект имеет заголовок и ссылку01:00:04
свойство, указывающее на конкретные вещи01:00:07
страницы указывают на три разные ссылки01:00:10
например, заказы сотрудникам и клиентам01:00:12
у каждого свой значок01:00:15
так что давайте пройдемся по этим ссылкам01:00:18
что мы можем сделать, так это сохранить link.map, мы01:00:21
будет функция обратного вызова для01:00:23
каждый элемент или каждая ссылка01:00:26
и мы можем получить мгновенный возврат за01:00:28
каждый из этих предметов01:00:30
каждая ссылка будет элементом div01:00:33
и у этого div будет класс01:00:35
имя равно текстовому тире, серому тире 400.01:00:40
у него также будет тире на полях 3 или01:00:43
м 3 и пустые 4 поля сверху 4 и это01:00:48
будет в верхнем регистре01:00:50
внутри мы хотим отрендерить01:00:52
название предмета с точкой теперь, если вы сохраните это01:00:56
вы можете видеть, что заголовки наших ссылок01:00:57
появиться прямо здесь, и это выглядит так01:01:00
больше похоже на обычную боковую панель01:01:02
так что похоже, что я сделал небольшой01:01:04
ошибка01:01:05
этого имени класса здесь не было01:01:07
должен был перейти в этот div, этот div был01:01:11
просто предполагается, что ключ равен01:01:14
item.title, чтобы сделать его уникальным01:01:16
но это имя класса должно было идти01:01:19
на элементе p внутри него, так что правильно01:01:22
здесь у нас есть элемент p, который имеет это01:01:24
item.title внутри него, и тогда мы сможем01:01:27
визуализировать это имя класса в этом элементе b01:01:31
теперь под этим тегом b мы на самом деле01:01:33
собираюсь пробежаться по ссылкам, так что давайте01:01:35
откройте новый динамический блок кода и01:01:38
скажите, что пункты точечные ссылки точечная карта и здесь01:01:42
мы получим настоящую ссылку и мы01:01:44
может иметь мгновенный возврат еще раз01:01:47
по сути, это цикл внутри01:01:49
петля01:01:50
внутри здесь мы собираемся визуализировать01:01:52
компонент навигационной ссылки, подобный этому01:01:55
и их будет немало01:01:57
свойства, первый из которых будет01:02:00
2 куда мы указываем01:02:02
и это будет динамично, поэтому мы сможем01:02:04
визуализировать строку шаблона01:02:06
скажи косую черту, знак доллара, фигурный01:02:08
имя точки ссылки на фигурные скобки01:02:12
ключ также будет связан01:02:14
имя, так как нам нужно сделать его уникальным на01:02:17
щелчок тоже будет пока просто01:02:20
пустая функция обратного вызова, но мы01:02:22
скоро реализую логику01:02:25
и затем нам нужно указать имя класса01:02:27
и стиль01:02:29
теперь имя класса будет немного01:02:31
отличается от того, что мы обычно делаем, что01:02:34
мы можем сказать, это имя класса, а затем внутри01:02:37
оттуда мы собираемся позвонить01:02:39
функция01:02:40
эта функция будет принимать состояние01:02:44
чтобы мы могли деструктурировать значение фигурных01:02:47
брекеты, а затем мы получим01:02:49
активное состояние01:02:51
за каждый конкретный товар01:02:53
и затем на основе этого состояния мы можем01:02:55
отображать разные имена классов, это01:02:58
передано нам напрямую с помощью навигации01:03:01
компонент ссылки, принадлежащий реагирующему маршрутизатору01:03:04
Дом, что мы можем сделать, это определить вверху01:03:07
два разных имени класса для активного и01:03:11
не активные ссылки01:03:13
давайте сделаем это прямо здесь, сказав const01:03:16
активная ссылка01:03:18
равно строке, это будет01:03:20
гибкий01:03:22
пункты в центре тире01:03:24
разрыв тире 501:03:26
pl для заполнения слева, 4 pt для заполнения сверху01:03:29
три01:03:30
отступы снизу pb тире 2.501:03:34
закругленная черточка LG01:03:37
и текстовое тире белое, а также текстовое тире01:03:41
Мэриленд01:03:42
и, наконец, m-2 для запаса 2. Теперь мы01:03:46
будет константная нормальная ссылка01:03:49
Прямо здесь01:03:50
и это также будет строка01:03:53
мы собираемся скопировать весь активный01:03:55
связь01:03:56
и просто замените последние несколько свойств01:03:59
нам не нужен М-201:04:02
скорее мы собираемся добавить текстовое тире01:04:05
серый01:04:06
700, так как мы собираемся это сделать01:04:08
серый нам не нужен этот белый цвет01:04:10
вот здесь мы еще добавим темноту01:04:14
режим01:04:15
текстовое тире серое тире 20001:04:18
в темном режиме и при наведении мы собираемся01:04:21
добавить текстовое тире черного цвета01:04:24
и просто при наведении мы собираемся изменить01:04:26
фон к светло-серому01:04:30
и m будет равно 2 для поля 2.01:04:34
теперь мы можем использовать эти две ссылки вниз01:04:36
ниже01:04:37
мы можем сказать, активен ли он01:04:40
затем мы собираемся отобразить активный01:04:43
связь01:04:44
иначе мы собираемся отрендерить01:04:47
нормальная ссылка01:04:49
и если мы сохраним это01:04:51
конечно, мы пока ничего не видим01:04:52
потому что мы не ввели никаких ссылок01:04:54
Прямо здесь01:04:55
так что мы можем сделать это внутри навигации01:04:58
ссылка, мы можем отобразить значок точки ссылки01:05:02
и ниже мы можем визуализировать диапазон01:05:04
элемент01:05:05
у которого есть имя класса01:05:08
равно капитализации01:05:12
и внутри него мы можем визуализировать01:05:14
имя точки ссылки01:05:16
вот и все, если мы спасем тебя01:05:19
видите, у нас есть эти замечательные элементы списка01:05:23
на нашей боковой панели, которая автоматически01:05:25
прокручивается, и теперь у нас есть эти замечательные01:05:28
разделы или заголовки, и если вы действительно01:05:31
наведите курсор на ссылку и вы увидите, что мы01:05:33
возьми этот красивый пункт списка, он ищет01:05:37
большой01:05:38
и снова причина, по которой мы сделали это таким01:05:40
просто, потому что мы используем попутный ветер01:05:43
и мы просто вводим все01:05:44
конкретные имена классов прямо внутри нашего01:05:47
код01:05:48
большой01:05:49
определенно тот факт, что у нас было это01:05:51
фиктивные данные помогли, потому что у нас не было01:05:53
выписать все конкретные имена01:05:55
для разных элементов списка01:05:57
и иконки были выбраны заранее так01:06:00
Замечательно01:06:01
судя по виду, это будет так01:06:04
наша боковая панель, но что вы скажете, что мы01:06:07
внедрить наш API контекста реагирования сейчас01:06:10
это позволит нам отслеживать01:06:12
состояния навигационной панели01:06:15
выяснить, должен ли он быть открыт в данный момент01:06:17
или закрыто01:06:18
так что давай сделаем это прямо сейчас01:06:21
чтобы создать наш контекст, мы можем закрыть01:06:23
открытые в данный момент файлы01:06:25
а затем перейти к источнику01:06:28
контекст, а затем создайте новый файл01:06:31
называется01:06:32
поставщик контекста01:06:34
dot js внутри которого мы можем импортировать01:06:38
реагировать01:06:40
а также создать контекст01:06:43
использовать контекст01:06:45
и, наконец, используйте состояние, и это01:06:48
исходя из реакции01:06:50
конечно, я ошибся в контексте01:06:52
вот так давайте это исправим01:06:54
и тогда нам придется сказать константное состояние01:06:57
контекст01:06:59
равно01:07:00
создаем контекст, а затем мы называем это как01:07:03
функция01:07:04
ниже мы можем определить нашу начальную01:07:06
состояние01:07:08
и это начальное состояние — не что иное, как01:07:10
чем простой объект01:07:12
наш чат вначале будет настроен01:07:14
ложному01:07:16
и этот чат означает, что это сейчас01:07:19
открыт или закрыт01:07:21
тогда у нас будет тележка, которая01:07:23
также по умолчанию будет установлено значение01:07:26
ЛОЖЬ01:07:27
у нас также есть наш профиль пользователя01:07:30
для которого установлено значение false01:07:33
и наконец мы получили наше уведомление01:07:36
для которого также установлено значение false01:07:38
так что это просто состояние всех этих01:07:40
разные вещи, на которые мы можем нажать и01:07:43
открыть01:07:44
вначале для них установлено значение false01:07:47
теперь мы можем сказать экспортировать константный контекст01:07:51
поставщик01:07:53
этот поставщик контекста является базовой реакцией01:07:57
Компонент функции стрелки, который в реквизите01:08:00
имеет детскую собственность01:08:02
внутри там мы можем объявить все01:08:05
различные виды государства и, конечно же,01:08:07
мы можем что-то вернуть01:08:09
обычно то, что вы возвращаете внутри01:08:11
поставщик контекста — это контекст состояния01:08:15
поставщик точек01:08:17
так01:08:18
но вернуть это01:08:20
обычно то, что вы возвращаете внутри01:08:22
поставщик контекста01:08:24
является поставщиком точек контекста состояния01:08:28
самое главное, что это01:08:30
поставщик должен иметь значение01:08:32
свойство01:08:34
поэтому мы можем немного расширить его и создать01:08:36
стоимость собственности прямо здесь, которая является01:08:39
объект01:08:40
какие бы ценности вы ни проходили здесь01:08:43
они будут пропущены через все01:08:45
компоненты внутри всего нашего01:08:47
приложение01:08:48
поэтому, конечно, нам придется пройти01:08:50
состояние — это наша боковая панель, открытая в данный момент или01:08:53
он закрыт?01:08:56
и вторая по важности вещь с01:08:58
наш контекст таков, что ты всегда возвращаешься01:09:01
дети внутри него01:09:03
это означает, что все, что вы обертываете01:09:05
контекст со всем, что находится внутри него01:09:08
будет отображаться, поэтому, если вы обернете это01:09:11
всю страницу с контекстом, который вы все еще01:09:13
хочу вернуть эту реальную страницу правильно01:09:16
вот тут-то и появляются дети01:09:18
возвращает базовый компонент ниже01:09:21
этот контекст, но теперь давайте добавим01:09:25
все состояния или вся логика01:09:27
наше приложение, что наш контекст01:09:30
собираюсь иметь01:09:31
первый, о котором мы уже говорили01:09:33
о состоянии, так скажем, используется01:09:37
государственный фрагмент01:09:38
это будет называться активным меню и01:09:42
установите активное меню и в начале оно01:09:45
будет установлено значение true01:09:47
вот и все01:09:49
теперь мы можем просто пройти01:09:52
это состояние перешло к значению, поэтому01:09:55
прямо здесь значение — это объект01:09:58
и мы скажем активное меню01:10:01
активное меню01:10:03
или, как вы уже знаете, если у вас есть оба01:10:06
ключ и значение одного и того же значения01:10:08
тогда вы можете просто опустить последнее01:10:11
вот и все01:10:12
Итак, теперь вопрос в том, как мы можем использовать01:10:14
это активное меню внутри нашей боковой панели01:10:18
или компоненты приложения, мы можем экспортировать01:10:21
const что-то, называемое использованием01:10:24
государственный контекст01:10:26
и это просто функция, которая возвращает01:10:29
вызов используемого контекста01:10:32
но мы передаем, в каком контексте мы хотим01:10:35
использовать01:10:36
поэтому мы говорим: «Эй, дай мне данные»01:10:38
из контекста, используя контекст01:10:41
и указываем какой из штатов01:10:43
контекст в нашем приложении, который мы собираемся01:10:45
иметь один контекст, но в большем01:10:47
приложений, вы можете иметь несколько01:10:49
поставщики контекста01:10:51
в любом случае, как только вы создадите свой01:10:53
провайдер, которому вы визуализируете детей и01:10:55
передать значения, которые вам нужно обернуть01:10:58
приложение с этим01:10:59
чтобы мы могли зайти внутрь нашего index.js01:11:04
внутри здесь мы можем импортировать01:11:07
поставщик контекста01:11:09
и это происходит от точечной косой черты01:11:12
контексты, поставщик контекста с косой чертой01:11:16
единственное, что вам нужно сделать, это обернуть01:11:19
ваше приложение с поставщиком контекста, поэтому мы01:11:22
могу сказать прямо здесь01:11:23
поставщик контекста01:11:25
и мы можем разместить наше приложение прямо внутри01:11:28
это вроде так01:11:29
конечно, давай сюда запятую поставим01:11:32
и давайте расположим все правильно01:11:35
вот и все01:11:36
так что теперь внутри нашего приложения мы можем использовать все01:11:40
из этих ценностей01:11:42
и вопрос, конечно, как и01:11:44
Ответ довольно прост01:11:46
мы импортируем это, используя контекстный хук состояния, который мы01:11:51
созданный01:11:52
от01:11:53
точечный слэш01:11:55
контекстная косая черта01:11:57
поставщик контекста01:11:59
и мы называем это крючком вверху01:12:01
константа01:12:03
и мы извлекаем те ценности, которые хотим получить01:12:05
в этом случае мы хотим получить активный01:12:08
меню01:12:10
это равносильно использованию контекста состояния и01:12:13
мы называем это крючком01:12:15
нам больше не нужно использовать этот статический01:12:17
ценить01:12:18
вот и все, теперь если мы вернемся к нашему01:12:21
приложение01:12:22
давайте посмотрим, где мы используем этот активный элемент01:12:24
меню01:12:25
это прямо здесь, так что давайте зайдем внутрь01:12:28
нашу боковую панель и действительно сделайте это01:12:30
функции делают что-то вроде открытия и01:12:33
закрыть меню01:12:34
нам придется повторить то же самое, что и мы01:12:36
только что сделано, и это импортировать01:12:39
контекст состояния использования01:12:41
от01:12:42
Контекст точечной косой черты Контекст прямой косой черты01:12:45
провайдер, вот и мы используем его как01:12:48
крючок прямо здесь, константа01:12:51
активное меню01:12:53
и это исходит от01:12:55
использовать контекст состояния, конечно, здесь мы01:12:59
нам не нужно просто активное меню01:13:02
функцию настройки для меню, чтобы01:13:04
мы можем открыть и закрыть его01:13:06
поэтому, если мы вернемся к нашему провайдеру контекста01:13:10
то, что мы можем сделать, это параллельно с активным01:13:13
меню мы также можем передать активный набор01:13:16
меню01:13:17
таким образом, внутри нашего01:13:21
боковая панель01:13:23
мы тоже можем это получить01:13:25
набор01:13:26
активное меню01:13:29
теперь внутри этого щелчка мы действительно можем01:13:32
закройте боковую панель, чтобы мы могли сказать01:13:36
является01:13:37
функция обратного вызова01:13:39
установить активное меню01:13:41
к01:13:42
ЛОЖЬ01:13:43
и пока мы здесь, мы также можем изменить01:13:45
Вот этот01:13:46
вместо этого мы собираемся на самом деле01:13:48
сделаем что-нибудь другое, что мы собираемся сделать01:13:49
вызвать установленное активное меню01:13:52
но в данном случае мы хотим изменить01:13:54
меню, используя предыдущее значение этого01:13:56
меню01:13:57
и вы можете сделать это, добавив обратный вызов01:14:00
функционировать внутри вас тут же01:14:02
могу получить предыдущую01:14:04
активное меню, что означает предыдущее состояние01:14:07
и затем вы можете использовать это предыдущее состояние01:14:09
чтобы включить или выключить его, мы идем так01:14:13
это значок отмены01:14:15
и что у нас сейчас есть что-то вроде01:14:17
этот когда вы нажимаете на нее, она исчезает01:14:20
но в настоящее время у нас нет возможности01:14:23
верните его, потому что наша панель навигации01:14:25
содержит кнопку, которая должна быть там01:14:28
вернуть его обратно, так что это определенно01:14:30
что-то, что мы должны сделать01:14:32
и это будет наш следующий шаг к01:14:35
реализовать панель навигации01:14:38
давай вернемся к нашему приложению, давай найдем01:14:40
где мы используем панель навигации01:14:42
и давайте удержим Ctrl и перейдем к нему01:14:46
наконец, давайте начнем с реализации01:14:48
панель навигации01:14:49
нашу панель навигации будет немного сложнее использовать01:14:52
развиваться, и это займет некоторое время, но01:14:54
поверь мне, когда я говорю это01:14:56
как только мы закончим с панелью навигации и01:14:58
боковая панель, которую мы можем просто просмотреть01:15:01
все остальное будет потрясающе01:15:03
и вы просто начнете видеть все01:15:05
функционал появляется сразу01:15:07
обычно навигационная панель и боковая панель этого не делают01:15:10
кажутся такими хитрыми, что они почти не такие01:15:13
существует прямо здесь, но есть некоторые01:15:15
функциональность, пытаюсь выяснить, это она01:15:17
в данный момент открыт или нет и один раз01:15:20
мы это выяснили, тогда мы будем01:15:22
способен очень быстро все закодировать01:15:25
Итак, начнем с панели навигации01:15:27
прямо здесь мы можем импортировать эффект использования01:15:30
крючок, и нам также понадобится много разных01:15:34
значки01:15:35
так что давайте импортируем ИИ01:15:38
контур01:15:39
меню01:15:40
и это будет происходить из значков реагирования01:15:44
косая черта ИИ01:15:46
нам также нужно будет импортировать файл Fi01:15:50
Покупка01:15:51
тележка01:15:52
и это будет исходить от реакции01:15:54
значки тире, косая черта, фи01:15:58
тогда нам нужно будет импортировать bs01:16:01
Чат ушел, и это исходит от реакции01:16:05
значки косая черта bs нам тоже понадобятся01:16:09
импортировать ри01:16:11
уведомление01:16:14
три01:16:15
линия01:16:16
из значков реакции тире, косая черта ri01:16:20
конечно, нам нужно исправить орфографию01:16:22
вот здесь и исправь этот импорт правильно01:16:24
вот это просто значки реакции вперед01:16:27
слэш фи01:16:29
осталось еще немного, нам нужно01:16:32
импортировать стрелку клавиатуры md01:16:36
и это происходит из значков реагирования01:16:39
косая черта, мд01:16:42
отлично, у нас есть все значки, которые мы01:16:44
нужно, но нам также нужна эта подсказка, поэтому01:16:47
мы можем импортировать компонент всплывающей подсказки из01:16:50
добавить синхронизацию01:16:53
косая черта ej201:16:56
реагировать на такие всплывающие окна01:16:59
мы также будем использовать некоторые фиктивные данные, поэтому01:17:01
мы можем импортировать изображение аватара01:17:03
приходящий из01:17:05
точечный слэш01:17:06
данные косая черта аватар точка jpeg01:17:10
этот01:17:11
и, наконец, нам также нужно импортировать несколько01:17:14
компоненты корзины и чата01:17:18
уведомление01:17:21
и, наконец, профиль пользователя01:17:25
и они исходят от просто точка мы01:17:29
мы уже там, мы внутри01:17:31
компоненты01:17:32
наконец, мы собираемся импортировать использование01:17:35
контекст состояния из контекстов косой черты01:17:39
поставщик контекста прямой косой черты01:17:42
теперь у нас есть все, что нам нужно01:17:45
Итак, чтобы начать кодировать нашу навигационную панель, мы можем01:17:48
немедленно получить это активное состояние меню01:17:51
поэтому мы можем сказать константа01:17:54
активное меню01:17:55
вот так, а также установленное активное меню01:17:59
исходит из или, скорее, равен01:18:03
использовать контекст состояния, а затем мы называем его как01:18:06
крючок01:18:07
теперь ниже мы можем начать01:18:10
реализация нашей навигационной панели, так что давайте начнем01:18:13
с именами классов для div01:18:15
имя класса будет равно flex01:18:18
оправдать перечеркивание между01:18:21
дополнение-2 или просто b-2 на средних устройствах01:18:25
маржа x будет установлена на 6.01:18:29
поле x просто означает поле слева и01:18:32
правильно все по оси x01:18:35
и, наконец, позиция будет такой:01:18:37
установлено относительное, теперь вы можете видеть это01:18:39
все нахлынуло, но это01:18:42
будет исправлено очень скоро, как только мы01:18:44
на самом деле реализовать панель навигации01:18:47
внутри нашей навигационной панели мы собираемся01:18:49
иметь много разных панелей навигации01:18:51
кнопки, давайте создадим новый компонент01:18:54
чтобы облегчить ей жизнь01:18:56
постоянная кнопка навигации, наша кнопка навигации работает01:19:00
быть нормальной функцией реагирующей стрелки01:19:03
компонент с мгновенным возвратом идет01:19:06
принять несколько объектов недвижимости, которые собираются01:19:08
быть титулом01:19:10
пользовательская функция, которую мы хотим вызвать01:19:13
Иконка01:19:15
цвет01:19:16
и цвет точки01:19:18
достаточно скоро ты увидишь, что все это01:19:20
свойства делают01:19:22
так что же это за кнопка навигации?01:19:25
по сути это кнопка, завернутая в01:19:28
компонент всплывающей подсказки01:19:30
наш компонент всплывающей подсказки будет иметь01:19:32
содержание равно заголовку01:19:35
и позиция будет установлена на01:19:38
нижний01:19:40
центр01:19:41
внутри мы наконец можем отрендерить01:19:44
наша кнопка сейчас, это может быть хорошей идеей01:19:46
уже вызвать одну из этих кнопок01:19:48
ниже, чтобы вы могли видеть, что01:19:50
происходит на экране, так что давай позвоним01:19:52
наша первая кнопка навигации01:19:55
Прямо здесь01:19:56
как самозакрывающийся компонент мы можем передать01:19:59
несколько реквизитов к этому01:20:01
заголовок будет установлен в меню01:20:04
и эту пользовательскую функцию, которую мы можем передать ей01:20:08
это будет функция обратного вызова01:20:10
где мы просто вызываем установленное активное меню01:20:13
так01:20:14
снова у нас есть функция обратного вызова внутри01:20:17
из этого, где мы получаем предыдущий активный01:20:19
состояние меню такое предыдущее01:20:22
активный01:20:23
меню, а затем просто переключаем его, поэтому, если01:20:26
оно было открыто, тогда мы закроем его01:20:29
и наоборот здорово, так что теперь у нас есть01:20:32
заголовок и пользовательская функция, которую мы01:20:34
тоже будет цвет01:20:36
и этот цвет — тот же цвет, что и01:20:39
тема, которую мы меняем, запомни этот синий цвет01:20:41
справа внизу ну давайте тоже установим01:20:44
это синее, но позже мы собираемся01:20:46
наконец-то придать этой динамике нам нужно01:20:48
передать значок01:20:50
и значок в этом случае будет01:20:53
компонент01:20:54
контурное меню ИИ01:20:57
вот и все, теперь у нас есть все, что мы01:21:00
нужно создать нашу первую кнопку навигации01:21:02
давайте продолжим и действительно воспользуемся этим01:21:04
данные внутри нашего компонента кнопки навигации01:21:08
наша кнопка будет иметь тип01:21:11
равно кнопке01:21:12
вот так и что это за кнопка01:21:15
делать01:21:16
ну, при нажатии он вызовет это01:21:19
пользовательская функция, подобная этой, причина, почему01:21:22
мы не могли правильно принять этот код01:21:24
вот и скажи прямо вот это01:21:26
потому что другие кнопки навигации не будут выполнять эту функцию01:21:29
то же действие, что и здесь, поэтому они01:21:31
всегда будем вызывать действие, которое мы01:21:33
предоставьте ему это, что позволит нам01:21:36
для расширения функциональных возможностей01:21:39
тогда мы также придадим ему стиль01:21:41
и стиль будет равен01:21:43
цвет01:21:45
и мы также можем дать ему несколько имен классов01:21:47
поэтому мы можем сказать имя класса01:21:50
равно01:21:51
родственник01:21:53
текстовое тире xl01:21:55
округлое тире полное01:21:57
п 3 для набивки01:21:59
при наведении BG Dash Light Dash отлично01:22:04
и что будет отображать кнопка01:22:07
это будет элемент span с01:22:10
стиль, равный фону01:22:13
какой цвет точки01:22:16
так01:22:18
и у него также будет имя класса01:22:21
имя класса будет равно01:22:24
Абсолютная гибкость встроенной приборной панели01:22:27
округлое тире полное01:22:29
ч-201:22:31
ш-201:22:33
правый-2 и верхний-201:22:36
наконец, внутри него мы можем отобразить наш01:22:40
икона01:22:41
вот и все01:22:42
так что теперь, если мы сохраним это, ты должен быть01:22:44
могу увидеть этот маленький значок прямо здесь01:22:48
если уменьшить масштаб, то его едва можно увидеть01:22:51
но как только вы нажмете на него, посмотрите01:22:53
что мы на самом деле открываемся и закрываемся01:22:56
наша боковая панель01:22:58
это выглядит великолепно, конечно, мы просто01:23:01
нужно сделать этот значок немного больше и01:23:04
когда я говорю «немного», я имею в виду довольно много01:23:07
прежде чем мы это сделаем, позвольте мне показать вам01:23:10
как легко будет добавить все это01:23:12
другие значки тоже01:23:15
что мы можем сделать, это прокрутить вниз01:23:17
создайте div прямо здесь01:23:20
этот div будет содержать все01:23:22
другие значки навигации — единственное, что это01:23:25
будет иметь имя класса, равное01:23:28
гибкий01:23:29
теперь давайте скопируем нашу оригинальную кнопку навигации01:23:33
давай просто разложим весь реквизит, чтобы мы01:23:36
мне легче увидеть, что происходит01:23:38
вот и все01:23:40
цвет синий, и значок находится прямо здесь, как01:23:43
ну вот и пошло, так что это один из наших01:23:46
кнопки навигации01:23:48
теперь это для меню или хотя бы01:23:51
это было, но теперь мы можем это изменить01:23:54
к чему-то другому01:23:56
давай сделаем тележку01:23:58
и пользовательская функция будет01:24:00
вызов новой функции, которой у нас нет01:24:02
пока созданный дескриптор нажмите и мы собираемся01:24:05
проходить01:24:06
корзина как параметр01:24:09
затем мы собираемся установить цвет01:24:11
снова синий, и, наконец, мы собираемся01:24:14
дайте ему другой значок01:24:16
фи01:24:17
корзина01:24:19
вот и все, теперь вы можете увидеть это на01:24:21
правый верхний угол экрана, если увеличить масштаб01:24:23
достаточно много01:24:25
пока мы здесь, давайте также добавим все01:24:27
другие значки, дублируя этот01:24:30
заголовок будет в чате01:24:32
этот тоже может иметь такой же цвет точек, так что01:24:35
скажем, цвет точки01:24:38
это будет шестнадцатеричное число 0 301:24:41
с9 d701:24:44
вот и все01:24:45
вы можете видеть, что у нас есть точка01:24:47
уведомления и что мы можем сделать, это01:24:49
поменяй значки на bs01:24:52
чат ушел01:24:54
и как вы можете видеть, теперь у нас есть этот чат01:24:57
прямо здесь и, конечно, функция01:24:59
будет щелчок по ручке, и все пойдет01:25:01
чтобы открыть чат01:25:03
сейчас это ничего не дает, но01:25:05
это скоро будет01:25:07
и последний будет для нашего01:25:10
уведомления и наш профиль, чтобы вы01:25:12
можете видеть прямо здесь, у нас есть чат с корзиной01:25:15
уведомление и профиль, что мы можем сделать01:25:18
это, скажем, уведомления прямо здесь, вот это01:25:21
собираюсь указать на обработку щелчка, и это01:25:25
собираюсь открыть уведомление01:25:27
единственное число01:25:30
и значок будет ри01:25:33
уведомление, 3 строка, вот и все01:25:37
наконец, нам нужен последний для01:25:40
профиль и профиль будет просто01:25:42
немного другое, как видите, это не так01:25:45
на самом деле просто один значок01:25:47
и что мы можем сделать, это создать всплывающую подсказку01:25:50
компонент01:25:51
эта всплывающая подсказка будет иметь контент01:25:55
равен профилю01:25:57
так01:25:59
и позиция будет установлена на01:26:01
нижний01:26:03
в центре всплывающей подсказки, куда мы собираемся01:26:05
иметь div01:26:07
итак, давайте создадим div01:26:10
и в этом div будет несколько01:26:12
имена классов01:26:13
Итак, давайте добавим имя класса01:26:16
равно гибкому01:26:18
центр предметов01:26:20
разрыв-201:26:22
указатель курсора01:26:24
p-1 для заполнения01:26:27
при наведении bg тире светлый тире серый01:26:30
и закругленная черточка LG01:26:34
как только мы нажмем на этот div, мы хотим01:26:36
откройте профиль, чтобы мы могли сказать по клику01:26:39
функция обратного вызова01:26:41
где мы01:26:42
ручка01:26:43
щелкнуть01:26:44
и мы собираемся передать пользователя01:26:47
профиль как строка01:26:49
теперь ты видишь, что еще ничего не произошло, но01:26:52
внутри этого div мы находимся01:26:54
собираюсь добавить изображение01:26:56
у этого изображения будет источник01:26:59
равно аватару, и вот мы и начнем01:27:02
появился аватар, можно дать ему класс01:27:05
имя равно округленному тире, полному, чтобы получилось01:27:08
это в круг так же, как и w-801:27:12
и h-8, чтобы сделать его немного меньше01:27:16
вот и все01:27:17
наконец, под этим изображением мы можем создать01:27:20
тег б01:27:21
и этот тег b будет иметь два01:27:24
различные элементы пролета01:27:26
первый поздоровается01:27:29
и запятая01:27:31
после этого промежутка мы можем создать просто01:27:34
такое пространство01:27:36
и у нас будет еще один пролет01:27:38
под этим01:27:39
пролет прямо здесь, вот что будет сказано01:27:42
Майкл01:27:44
конечно, мы можем применить некоторые свойства01:27:46
у первого будет урок01:27:49
имя01:27:50
равно01:27:51
текстовое тире серое тире 400 и текстовое тире01:27:55
14.01:27:56
у нижнего будет класс01:27:59
имя равно тексту тире серое тире 40001:28:04
шрифт тире жирный01:28:06
мл для поля слева равно 1 и01:28:09
текстовое тире 14, итак, поехали, теперь ты01:28:12
должна быть возможность увидеть привет, Майкл01:28:15
наконец, нам нужна стрелка вниз, внизу01:28:18
тег p мы можем визуализировать md01:28:21
стрелка вниз01:28:23
и мы также можем дать ему тот же класс01:28:25
имя, которое мы дали привет01:28:27
поэтому текст имени класса серый 400, а затем01:28:30
также отправьте текст 14. как видите, это означает01:28:34
что мы можем навести на него курсор и нажать01:28:35
это сделать его открытым01:28:37
и это все, что касается внешнего вида01:28:40
нашей фактической панели навигации01:28:42
это слишком мало, но мы собираемся01:28:44
исправь это очень скоро, то, что мы01:28:47
также нужно выяснить, как мы можем01:28:49
получить наш контекст нет, когда мы нажали01:28:52
один из этих конкретных значков, который нам нужен01:28:55
переместите это значение в контекст, чтобы01:28:57
контекст знает, как открыть корзину01:29:00
уведомления чата или профиля01:29:03
для этого мы можем вернуться внутрь нашего01:29:06
поставщик контактов01:29:08
и мы можем создать новое поле состояния использования01:29:12
поэтому мы можем сказать: используйте фрагмент состояния01:29:14
назовем его нажатым01:29:17
set нажимается, и исходное состояние01:29:21
будет значение нашего начального01:29:24
объект состояния, по которому ничего не нажимали01:29:27
начало01:29:28
теперь мы можем передать эти два значения01:29:31
нажали и установили, нажимают рядом с нашим01:29:34
ценности прямо здесь, это означает, что мы01:29:36
собираюсь получить к ним доступ внутри01:29:39
наша панель навигации01:29:40
так что теперь, если мы вернемся к нашей навигационной панели01:29:43
вверху мы можем получить эти значения правильно01:29:45
здесь01:29:46
нажимается01:29:48
а также установлен01:29:50
нажал вот и пошло01:29:53
как только это будет внизу, мы сможем01:29:56
визуализировать разные элементы01:29:58
чуть ниже компонента всплывающей подсказки01:30:00
поэтому мы можем сказать, если01:30:02
нажимается01:30:04
точечная тележка и конец01:30:07
затем мы хотим отобразить карту01:30:09
компонент01:30:10
мы можем повторить это четыре раза01:30:12
если мы нажмем на чат01:30:14
затем мы хотим отобразить чат01:30:16
компонент01:30:17
если мы нажмем на уведомление, то01:30:20
мы хотим показать уведомление01:30:22
компонент и, наконец, если мы нажмем01:30:25
профиль пользователя, который мы хотим показать01:30:27
компонент профиля пользователя01:30:30
вот и все01:30:31
так что вначале там ничего не должно быть01:30:33
потому что все выключено01:30:35
но теперь давайте реализуем01:30:37
логика, чтобы включить его01:30:39
для этого мы можем вернуться в наш контекст01:30:42
поставщик01:30:43
и мы можем создать одно важное свойство01:30:46
об этой функции управления щелчком мы говорили01:30:49
о01:30:50
поэтому наш щелчок по дескриптору будет выглядеть01:30:52
что-то вроде этого01:30:53
константный дескриптор, нажмите здесь01:30:56
в качестве первого и единственного параметра мы01:30:58
собираюсь получить информацию о том, какой01:31:00
элемент был нажат, поэтому мы можем сказать01:31:03
щелкнул, а затем мы можем сделать это01:31:06
просто вызвать набор нажимается01:31:10
быть равным01:31:11
щелкнул01:31:12
вот так, но если подумать, то01:31:15
действительно не сработает01:31:17
потому что set нажимается или, скорее, есть01:31:19
Свойство clicked является объектом, поэтому мы01:31:22
не может просто переопределить объект с помощью01:31:25
строка, что нам нужно сделать, это открыть01:31:28
объект01:31:29
выкладываю исходное состояние01:31:31
то есть там, где все ложно01:31:34
а затем внутри квадратных скобок01:31:37
измените только значение, которое было01:31:39
щелкнул и установил значение true01:31:42
вот как работает щелчок ручки и01:31:44
теперь мы можем передать его как значение через01:31:47
наш государственный контекст01:31:49
вернувшись в нашу навигационную панель, мы теперь можем получить01:31:51
это значение из контекста01:31:54
ручка01:31:56
щелкнуть вот и все01:31:58
так что теперь, если мы нажмем прямо здесь01:32:00
ты можешь видеть01:32:02
корзина появилась вверху01:32:04
тележка01:32:05
и если мы нажмем на чат01:32:07
появился чат01:32:08
то же самое для профиля уведомлений и01:32:11
все остальное01:32:12
это означает, что наша логика работает, но01:32:15
конечно, нам придется стилизовать01:32:17
корзина и профиль чата уведомлений01:32:20
компоненты, которые будут красиво отображаться вот так01:32:24
а не просто текст, появляющийся на01:32:26
справа на странице профиля01:32:29
большой01:32:30
так что теперь большая часть логики выполнена, но01:32:33
есть лишь несколько мелких деталей, которые01:32:35
мы должны справиться, и один из них01:32:38
помните, что изначально мы всегда открываем01:32:41
боковая панель по умолчанию01:32:43
но если мы на мобильном телефоне, мы не хотим01:32:46
открыть его, потому что это займет01:32:48
почти весь экран взгляни на01:32:51
это и теперь ты даже закрыть его не можешь01:32:53
поэтому нам придется выяснить, что такое01:32:55
ширину экрана, а затем, если01:32:58
ширина очень маленькая, тогда не откроем01:33:01
боковая панель вообще, так что это будет01:33:04
будь нашим следующим шагом01:33:06
мы можем вернуться к нашему провайдеру контекста01:33:09
а затем создать другое государство01:33:11
использовать фрагмент состояния01:33:14
это будет01:33:15
размер экрана и установите размер экрана в01:33:19
начнем с того, что оно будет неопределенным, потому что01:33:22
мы не знаем, какой у нас размер экрана01:33:24
сначала надо это выяснить01:33:26
как только вы определитесь с размером экрана и настроите его01:33:29
размер экрана, мы можем передать его нашему01:33:32
поставщик контекста состояния01:33:34
теперь, вернувшись к нашей навигационной панели, мы можем01:33:37
на самом деле использовать эти значения01:33:39
итак, давайте прямо здесь узнаем размер экрана01:33:42
и установите размер экрана01:33:44
и мы можем назвать наш первый эффект использования так01:33:48
просто введите эффект использования, он принимает01:33:51
функция обратного вызова, а затем вторая01:33:53
параметр представляет собой массив зависимостей, означающий01:33:57
когда это будет называться01:34:00
например, если вы ничего сюда не поместите, это01:34:02
будет вызван только в начале01:34:04
и если вы укажете здесь размер экрана, это01:34:07
будет холодно каждый раз, когда этот экран01:34:09
изменения размера01:34:10
это было бы очень тяжело для нашего01:34:12
приложение, и мы не хотим этого делать01:34:14
мы просто хотим выяснить размер01:34:16
изначально при загрузке окна01:34:18
поэтому для этого мы можем создать новый01:34:20
функция внутри эффекта использования01:34:22
называется изменением размера дескриптора01:34:25
это будет стрелочная функция01:34:27
где мы просто устанавливаем размер экрана на01:34:30
быть равным внутренней ширине точки окна01:34:35
затем мы добавим точку в окне01:34:38
добавьте прослушиватель событий в наше окно и01:34:42
мы собираемся отслеживать все изменения размера01:34:44
параметры01:34:45
если размер изменится, мы вспомним01:34:48
функция изменения размера ручки, поэтому каждый раз01:34:51
мы изменяем его размер, мы собираемся установить01:34:53
размер экрана до этого конкретного размера01:34:56
и мы также хотим вызвать дескриптор01:34:59
первоначально изменить размер самостоятельно, чтобы01:35:02
выяснить начальную ширину в реакции01:35:04
всякий раз, когда вы используете что-то вроде этого01:35:06
окно.addeventlistener01:35:08
вы также хотите удалить это событие01:35:10
слушатель, так что ты можешь сказать01:35:13
возвращаться01:35:14
функция обратного вызова01:35:16
window dot удалить прослушиватель событий и01:35:19
затем вы предоставляете изменение размера строки и01:35:22
обработать функцию изменения размера, теперь мы01:35:25
отслеживание ширины нашего01:35:27
браузера или нашего устройства, но01:35:30
вопрос в том, что нам с этим делать01:35:32
информация, ну, это сыграет01:35:34
важную роль внутри нашей боковой панели, но01:35:37
это также служит небольшой цели, верно01:35:40
здесь, внутри навигационной панели01:35:42
давайте создадим второй эффект использования01:35:45
и вы можете иметь столько эффектов использования, сколько01:35:48
вы хотите01:35:49
единственная разница в том, что теперь мы01:35:52
на самом деле собираюсь следить за некоторыми01:35:53
изменения01:35:54
точнее, мы собираемся отслеживать01:35:56
изменение размера экрана вот так01:36:00
поэтому всякий раз, когда размер экрана меняется01:36:02
если размер экрана меньше или равен01:36:06
90001:36:08
затем установите активное меню01:36:10
так01:36:11
установить значение false01:36:14
а иначе, если он больше или шире, чем01:36:17
900 установить активное меню в значение true01:36:21
как вы можете видеть, поскольку мы были на01:36:23
такое маленькое устройство, и если мы перезагрузим01:36:26
это немедленно скроет01:36:28
боковая панель, чтобы мы могли лучше видеть, что происходит01:36:31
экран01:36:32
мы просто готовим все для01:36:34
отличный контент, который у нас будет01:36:36
очень скоро отлично, так что теперь мы01:36:39
успешно отслеживая размер наших01:36:41
экран и, как я уже сказал, это будет01:36:44
действительно полезно внутри нашей боковой панели01:36:46
компонент, так что давайте перейдем к нему01:36:50
если мы откроем наш компонент боковой панели, мы01:36:52
теперь можно правильно использовать это значение размера экрана01:36:56
здесь01:36:57
так что это будет экран01:36:59
размер01:37:00
и мы собираемся создать специальный01:37:01
функция01:37:02
константный дескриптор01:37:04
ближняя сторона01:37:06
бар01:37:08
это функция ошибки01:37:10
и он собирается проверить01:37:12
если активное меню01:37:14
правда01:37:16
и размер экрана01:37:18
меньше или равно 90001:37:21
в этом случае он закроет01:37:24
меню тоже01:37:26
вот и мы можем это назвать01:37:28
функция01:37:29
прямо здесь, по клику01:37:31
нашей ссылки, поэтому, нажав на нее, вы можете просто01:37:34
дескриптор вызова закрыть боковую панель есть одна01:37:39
хотя другое место, где мы это называем01:37:41
это будет происходить всякий раз, когда мы нажмем на01:37:43
конкретная ссылка01:37:45
итак, у нас есть навигационная ссылка прямо здесь и далее01:37:48
щелкнуть01:37:49
видишь, нам нужно что-то сделать хорошо, что у нас есть01:37:52
закрыть эту боковую панель, потому что ты знаешь01:37:55
что происходит на мобильных устройствах01:37:57
давайте перейдем к ширине мобильного устройства01:37:59
открой это01:38:01
и обычно оно охватывает почти всю01:38:03
экран, чтобы вы не могли видеть, что происходит01:38:04
происходит01:38:05
и теперь если вы нажмете заказы01:38:08
представьте, если бы боковая панель осталась01:38:10
прямо здесь, если его не удалили, то ты01:38:13
придется закрывать его вручную каждый раз01:38:15
время, когда ты что-то выбираешь01:38:17
но что мы делаем прямо здесь, так это то, что мы01:38:19
проверка, используете ли вы мобильное устройство01:38:22
и если да, то когда вы нажимаете, оно происходит01:38:24
чтобы автоматически закрыть01:38:26
но если вы не на мобильном устройстве и01:38:29
если вы нажмете, он останется открытым01:38:32
так что, как вы можете видеть, их больше, чем01:38:34
кажется на первый взгляд, мы действительно создаем01:38:37
лучшее приложение для приборной панели, и я01:38:41
научит вас всем этим советам и01:38:42
трюки, которые вы обычно не увидите в01:38:44
просто базовые уроки, это что-то01:38:46
что вы делаете в реальных приложениях, чтобы сделать01:38:49
уверен, что клиент доволен01:38:52
отлично с этим сказано, мы сейчас делаем01:38:55
очень хорошо с нашей боковой панелью и01:38:57
Панель навигации01:38:59
но, как вы знаете, если мы уменьшим масштаб,01:39:01
во всю ширину вы можете видеть, что наши значки01:39:04
действительно очень маленькие, так что давайте разберемся01:39:06
проблема в том, что значки01:39:09
более конкретно внутри нашей навигационной панели01:39:13
внутри кнопки навигации, потому что мы знаем01:39:16
неправильный стиль влияет на всех01:39:18
из них одновременно, так и должно быть01:39:21
что-то здесь01:39:23
прямо вокруг значка01:39:25
и я сразу это заметил01:39:27
вот эта сковорода должна была быть здесь01:39:29
только эта точка01:39:31
но не предполагалось обертывать иконку01:39:33
так что давайте просто закроем диапазон01:39:36
элемент01:39:37
а затем поместите значок прямо под ним01:39:40
так и должно было быть01:39:43
вот и значки теперь01:39:44
сразу больше, потому что у нас есть01:39:47
напиши xl прямо здесь, на кнопке01:39:50
это выглядит01:39:52
отлично, теперь, когда это сделано, мы готовы01:39:56
чтобы начать создавать нашу первую страницу01:39:58
день01:39:59
страница электронной коммерции01:40:01
это будет выглядеть примерно так01:40:03
как только это будет сделано01:40:05
это действительно разнообразная страница со множеством01:40:08
разных карточек, чтобы по-настоящему показать вам01:40:10
что мы можем сделать01:40:11
конечно, это не обязательно должно быть просто01:40:13
данные электронной коммерции01:40:14
вместо заработка вы могли бы иметь01:40:16
общее количество пользователей, использующих ваш01:40:18
Платформа01:40:19
здесь мы можем разместить любые виды01:40:21
разные показатели01:40:22
и любые другие диаграммы, но01:40:24
это должно дать вам очень быстрое01:40:26
обзор того, как syncfusion может вам помочь01:40:29
писать код быстрее, но, конечно, как только мы01:40:32
закончили с этой страницей, тогда мы собираемся01:40:34
погрузитесь еще глубже в то, что такое синхронизация01:40:37
предложения, я говорю обо всем этом01:40:39
таблицы на разных страницах, диаграммы и01:40:42
Приложения01:40:44
отлично, итак, давайте начнем01:40:46
кодируя наше основное представление электронной коммерции, мы01:40:49
можем начать с закрытия всех наших01:40:52
в данный момент открыты файлы и осталось только01:40:54
приложение01:40:56
внутри приложения мы можем контролировать клик01:40:58
в электронную коммерцию и это, конечно,01:41:01
где мы начнем реализовывать эту страницу01:41:04
мы также можем импортировать реакцию из реакции01:41:08
как импорт BS01:41:10
валюта01:41:11
доллар01:41:12
и это исходит от01:41:14
Реакция значков тире косая черта bs01:41:18
мы также собираемся импортировать go01:41:22
примитивный01:41:23
точка, и это происходит из значков реакции01:41:27
косая черта, иди, нам также нужно импортировать01:41:30
некоторые из наших компонентов, например, сложенные01:41:33
что это за диаграмма01:41:34
круговая диаграмма, а также01:41:36
кнопка и, наконец, спарк-линейная диаграмма01:41:40
также исходит из компонентов точечной косой черты01:41:45
наконец, нам нужно импортировать какой-нибудь манекен01:41:47
данные, чтобы мы могли сказать импорт01:41:50
данные о доходах, то нам нужно импортировать01:41:53
искра01:41:55
линия01:41:56
данные о районе01:41:58
и, наконец, эком01:42:00
Пи01:42:02
диаграмма данные01:42:03
теперь у нас есть все, что нам нужно, это01:42:06
исходящие из точечной косой черты, данные, косая черта01:42:10
чувак, вот и пошло01:42:12
и, наконец, нам нужно импортировать01:42:13
контекст, сказав состояние использования импорта01:42:16
контекст из контекстов данных, косая черта01:42:20
поставщик контекста01:42:23
теперь у нас есть все, что нам нужно, так что давай01:42:26
начните с реализации этого прекрасного01:42:29
посмотрите прямо здесь, еще раз здесь нет01:42:31
это просто электронная коммерция, это классика01:42:34
вид панели управления с некоторыми карточками01:42:36
информация и показатели01:42:39
большой01:42:40
Итак, для начала мы можем использовать div01:42:43
и у этого div будет класс01:42:46
имя, равное mt-12, чтобы немного разделить его01:42:49
из панели навигации01:42:51
тогда у нас будет div, который01:42:53
имя класса будет равно flex01:42:59
гибкая обертка приборной панели, а на больших устройствах гибкая01:43:02
тире без обертки01:43:04
а также выровнять центр тире внутри01:43:07
там мы можем создать еще один div и01:43:10
мы только начинаем создавать макет01:43:12
поэтому обычно, когда вы просто создаете01:43:13
макет, в следующем у вас будет много разделов01:43:16
div будет иметь имя класса, равное01:43:19
на заднем плане Дэш Уайт01:43:22
в темном режиме текстовое тире серое тире 20001:43:26
в темном режиме bg тире вторичное тире темное01:43:30
тире фон01:43:32
высота черточки 4401:43:34
закругленная черта xl01:43:37
с чертой полной01:43:39
на больших устройствах w-8001:43:42
р-801:43:44
ПТ-901:43:46
маржа или м-301:43:49
bg-герой01:43:50
штриховой узор01:43:52
а также bg тире без тире, повтор01:43:56
крышка приборной панели bg и центр приборной панели bg01:44:00
теперь, если мы сохраним это01:44:02
вы можете видеть, что у нас есть это изображение, но01:44:04
его едва видно с правой стороны01:44:07
поэтому я думаю, что у нас проблема с01:44:09
макет01:44:10
похоже, что наш фактический контент не01:44:13
появляется ниже01:44:15
наша навигационная панель и боковая панель — это01:44:17
появляясь в стороне01:44:19
так что эта проблема, скорее всего, будет01:44:22
внутри app.js01:44:25
мне кажется это похоже01:44:26
у нас есть панель навигации прямо здесь, но мы01:44:29
закрыл его слишком рано, поэтому этот div должен01:44:32
фактически закроется после всех01:44:35
маршруты, так что просто скопируйте их и поехали01:44:38
под div, содержащим все маршруты01:44:40
и давайте добавим еще один div прямо здесь01:44:44
так что теперь, если ты сохранишь это01:44:46
вот и все, теперь мы можем увидеть это великолепно01:44:48
глядя на баннер, и мы видим, что наш01:44:51
контент фактически появляется под01:44:54
панель навигации как надо01:44:56
Итак, возвращаясь к нашей электронной коммерции, мы01:44:59
можно продолжить реализацию макета01:45:01
у нас будет еще один div01:45:03
и у этого div будет класс01:45:06
имя, равное flex01:45:08
оправдать перечеркивание между01:45:11
и пункты в центре тире01:45:13
поверь мне, есть еще один div01:45:15
прямо здесь, и у этого ничего не будет01:45:19
стили01:45:20
внутри там, скорее, мы собираемся01:45:22
показать два разных тега p01:45:24
первый скажет "заработок"01:45:27
вот и мы видим прибыль, верно01:45:29
вот и другой собирается01:45:31
уточни, какой заработок, так что давай01:45:33
просто скопируйте этот номер прямо сюда01:45:36
и я собираюсь создать еще один тег p01:45:39
и вставьте его, конечно, не стесняйтесь использовать01:45:41
любое число прямо здесь, я добавлю01:45:44
имя класса01:45:45
который будет выделен жирным шрифтом, как01:45:48
ну и текстовое тире серое тире 400 там мы01:45:52
иди и за нижний скажем01:45:54
имя класса равно текстовому тире 2 xl01:45:59
сделай его немного больше01:46:01
сейчас это выглядит хорошо под этим div01:46:04
и к этому div мы можем добавить еще один01:46:07
div, у этого div будет класс01:46:10
имя, равное01:46:12
МТ-601:46:13
и у нас там будет кнопка01:46:16
но это не обычная кнопка01:46:18
наш собственный компонент кнопки01:46:21
так01:46:22
конечно, мы должны сначала предоставить некоторые01:46:23
реквизит для этого, как будто цвет будет01:46:26
белый01:46:27
Цвет фона будет динамичным01:46:30
цвет, который мы выбираем, но сейчас мы01:46:32
просто собираюсь установить синий цвет01:46:35
текст будет говорить что-то вроде01:46:37
загрузите и, наконец, радиус границы равен01:46:40
будет установлено что-то вроде 1001:46:42
пиксели01:46:43
теперь мы можем контролировать клик, чтобы войти внутрь01:46:46
этот компонент, разве не удобно, что мы01:46:48
заранее создал все компоненты01:46:51
поэтому реализовать эту кнопку мы можем01:46:53
конечно, примем все наши реквизиты01:46:55
переходя в него, например, цвет фона01:46:59
цвет01:47:00
размер01:47:01
текст01:47:03
радиус границы01:47:05
и на этом пока всё01:47:07
эта кнопка будет просто01:47:09
обычная простая кнопка01:47:12
поэтому мы можем присвоить ему тип прямо здесь01:47:15
и тип будет равен01:47:17
кнопка01:47:19
мы также можем придать ему какой-нибудь стиль01:47:21
нравиться01:47:22
фоновый цвет01:47:25
равен цвету фона, подобному этому, а также01:47:29
цвет равен цвету, конечно, мы можем01:47:32
просто опусти это01:47:33
и наконец, радиус границы01:47:36
вот и все01:47:37
мы также можем применить какое-либо имя класса01:47:40
что-то вроде класса01:47:42
имя равно мы собираемся это сделать01:47:45
в строку шаблона01:47:47
текстовое тире, а затем мы хотим отобразить01:47:50
размер, который мы передали в эту кнопку, так что правильно01:47:53
здесь мы не прошли ни одного размера01:47:56
поэтому мы можем сказать что-то вроде01:47:58
размер равен md01:48:01
как средний01:48:02
поэтому размер тире текста p01:48:05
3 при наведении будет тень01:48:09
даш Excel, вот и все01:48:12
нам нужно сейчас и внутри там мы01:48:14
можем отрендерить наш текст01:48:17
вот и синяя кнопка загрузки01:48:20
конечно, это действительно темно-синий, да01:48:22
сейчас, но как только мы реализуем тематизацию01:48:24
мы сможем изменить это по мере продвижения01:48:26
используя значок настроек внизу01:48:28
верно01:48:29
теперь мы можем пойти ниже этого div прямо здесь01:48:32
и ниже еще одного div01:48:34
там мы можем создать один новый div и это01:48:37
div будет представлять наши карты01:48:40
и вот эти карточки прямо здесь, название класса01:48:43
будет установлен на гибкий м-301:48:47
гибкая упаковка01:48:50
оправдывать-центр01:48:51
разрыв-101:48:53
и пункты-центр01:48:55
то нам нужно открыть динамический блок01:48:57
код, и внутри него мы можем просмотреть01:49:00
данные о заработке01:49:03
точечная карта01:49:05
мы собираемся получить каждый отдельный предмет01:49:08
и мы можем мгновенно что-то вернуть01:49:11
для каждой карты мы собираемся вернуть01:49:13
div01:49:14
и у этого div будет ключ01:49:17
равно названию элемента с точкой, а также01:49:21
будет имя класса01:49:23
это будет BG Dash White01:49:26
в темном режиме будет текст01:49:29
серый-20001:49:32
в темном режиме фон будет установлен01:49:35
вторичному01:49:37
темный тире фон01:49:39
на средних устройствах ширина будет равна01:49:41
быть 5601:49:43
отступ будет 401:49:45
верхний отступ будет равен 9 и закруглен01:49:49
2xl01:49:50
вот и все, чтобы вы могли увидеть этих четверых01:49:52
маленькие карточки прямо здесь01:49:54
теперь внутри этого div мы можем создать01:49:57
кнопка01:49:58
эта кнопка будет иметь тип01:50:01
равно кнопке01:50:03
у него также будет свойство стиля01:50:06
поэтому стиль равен тому, где находится вызывающий абонент01:50:09
будет равен значку точки элемента01:50:12
цвет01:50:13
а также цвет фона будет01:50:17
равен элементу значок папы bg01:50:21
вот и все01:50:22
поэтому внутри мы можем визуализировать01:50:25
Иконка с точкой, идем, не смотрим01:50:29
плохо, но все же требует некоторого стиля, поэтому01:50:32
давайте также добавим имя класса01:50:35
равно текстовому тире 2xl01:50:39
давайте изменим непрозрачность01:50:41
до 0,9, чтобы сделать его немного меньше01:50:44
видимый01:50:45
мы можем сделать его закругленным, полным и01:50:48
также дополняет тире 4.01:50:50
это действительно сделает его популярным01:50:53
давайте также при наведении01:50:54
установите тень тире тире XL, так что теперь01:50:58
если мы наведем на него курсор, то получим вот такой приятный результат01:51:00
тень01:51:02
пока выглядит отлично01:51:04
под этой кнопкой мы можем отобразить букву p01:51:06
ярлык01:51:07
и у этого тега b будет класс01:51:10
имя равно мт-301:51:14
там у нас будет элемент span01:51:17
и этот диапазон будет иметь класс01:51:19
имя, равное01:51:21
текстовое тире LG01:51:23
полужирный шрифт, и мы можем просто01:51:26
скажите что-то вроде количества точек предмета01:51:31
так что теперь он будет отображать конкретный01:51:33
сумма прямо здесь01:51:34
мы можем создать еще один пролет под ним01:51:37
так охватываем элемент01:51:39
и этот будет отображать элемент01:51:42
процент точек01:51:45
и опять же это все лишь демонстрационные данные01:51:47
мы работаем над этим, поэтому эта сковорода тоже01:51:50
будет имя класса, но оно01:51:52
будет динамичным, у него будет01:51:54
строка шаблона01:51:55
текст см01:51:57
а затем текстовое тире01:52:00
предмет точка ПК01:52:02
цвет, так что это цвет настоящего01:52:04
элемент диапазона, а затем01:52:06
мл-2 вот так01:52:09
так что это должно фактически изменить все01:52:11
окрашивает зеленый цвет, если он положительный, и красный цвет01:52:15
если он отрицательный, но что происходит01:52:17
я думаю, мы нашли ошибку в попутном ветре01:52:20
это было бы огромно01:52:22
так выглядит вот здесь01:52:24
он должен получить цвет ПК, поэтому, если01:52:27
мы нажимаем, и вы видите, что у нас красный цвет01:52:29
600 и зеленый 60001:52:31
прямо сейчас он просто читает красные01:52:34
но если мы просто наберем его вручную, текст01:52:37
зеленая черта 60001:52:40
оно начинает работать, но теперь все они01:52:43
такие, если мы переключимся на01:52:45
текст-красный-60001:52:47
это тоже работает, но теперь, если мы это сделаем01:52:50
динамичный, такой01:52:51
item.pc01:52:53
цвет01:52:54
теперь это действительно работает01:52:56
так что это заработало после того, как мы вручную01:52:58
переключил его, но сначала попутный ветер01:53:02
не заметил, что это динамика01:53:04
ценить01:53:05
это действительно интересная ошибка, которую мы01:53:07
просто наткнулся, но это хорошо, это01:53:10
важно, что мы исправили это ниже01:53:12
этот тег b у нас будет еще один01:53:15
р-тег01:53:16
и этот тег b будет просто отображать01:53:18
заголовок элемента через точку01:53:21
начнем, но давайте немного придадим этому стиль01:53:24
давайте дадим ему имя класса, равное тексту01:53:26
тире см, а также текст01:53:30
даш серый даш 400 и мт-101:53:35
вот и все, это уже выглядит так01:53:37
гораздо лучше, что у нас есть четыре таких карты01:53:40
Прямо здесь01:53:41
теперь, если мы уменьшим масштаб до обычного размера01:53:45
так01:53:46
и если мы его немного расширим, вы сможете01:53:48
увидите, что он хорошо масштабируется к центру01:53:51
экрана01:53:52
выглядишь великолепно, так что теперь мы можем продолжить01:53:55
с реализацией остальной планировки01:53:58
давайте пройдем ниже этого div прямо здесь и01:54:01
также давайте пройдемся ниже еще одного div01:54:04
так01:54:05
потому что мы начинаем с совершенно нового01:54:07
раздел01:54:08
Итак, давайте создадим новый элемент div и01:54:11
просто чтобы дать вам представление о том, что мы01:54:13
сейчас буду работать01:54:14
это будет большая карта с01:54:17
обновляются доходы и есть график01:54:20
с расходами и бюджетом прямо здесь, так что01:54:23
это будет первый раз, когда01:54:24
мы собираемся углубиться в большее01:54:26
синхронизировать компоненты Fusion01:54:28
нам потребовалось много времени, чтобы создать это01:54:30
макет и до сих пор у нас нет01:54:33
изучил все преимущества, которые01:54:34
syncfusion делает это сейчас, как только мы начнем01:54:37
реализация различных страниц и01:54:39
функциональные возможности, используя syncfusion, вы01:54:42
начну замечать разницу и01:54:44
насколько меньше времени вам понадобится, чтобы01:54:46
построим что-нибудь еще лучше, так что давай01:54:49
начните с этого раздела прямо сейчас01:54:52
чтобы начать внедрение обновления доходов01:54:54
раздел, мы можем зайти внутрь этого нового01:54:57
создал div и можем присвоить ему класс01:55:00
имя01:55:02
давайте сделаем его гибким и добавим зазор01:55:05
из 1001:55:06
гибкая пленка, так что просто льняная черта01:55:09
обернуть попутным ветром и оправдать рывок01:55:12
в центре у нас будет еще один div01:55:15
внутри там01:55:16
так что у этого div будет класс01:55:19
имя, равное01:55:21
черный тире белый01:55:23
а также в темном режиме01:55:25
текстовое тире серое тире 20001:55:28
и в темном режиме01:55:30
bg-вторичное тире темное тире BG01:55:34
маржа-3 или м-3 р-401:55:39
закругленная черта 2 XL и на средних устройствах01:55:43
w-70001:55:46
пиксели01:55:48
вот так вот это создаст это01:55:50
красивая бумага, такая как div01:55:53
конечно, давайте добавим что-нибудь внутрь01:55:56
мы можем начать с добавления div01:55:59
и у этого div будет класс01:56:01
имя равно flex и выравнивает тире01:56:05
между там, где мы собираемся01:56:07
есть тег p01:56:09
и этот тег p будет означать доход01:56:12
обновления, которые мы идем, как вы можете видеть, и01:56:15
мы также можем дать ему имя класса01:56:18
шрифт-полужирный01:56:20
и напишите тире xl, вот и доход01:56:24
обновления01:56:25
под этим тегом фида у нас может быть еще один01:56:28
div01:56:29
и у этого div будет класс01:56:32
имя, равное flex01:56:34
центр элементов и пробел, тире четыре01:56:39
внутри там у нас будет p01:56:41
элемент01:56:42
и этот элемент p будет иметь01:56:45
охватывать01:56:46
внутри которого мы собираемся визуализировать01:56:48
примитивная точка01:56:51
самозакрывающийся значок, мы идем по вашему пути01:56:54
это можно увидеть в правом верхнем углу01:56:57
и мы собираемся создать еще один01:56:59
охватывать01:57:00
что будет говорить о расходах, окей01:57:02
пока это не имеет особого смысла01:57:05
но давайте добавим несколько имен классов в наш b01:57:08
ярлык01:57:09
давай сделаем флекс01:57:11
пункты в центре тире01:57:13
давайте еще сделаем разрыв тире 201:57:16
текстовое тире серое тире 60001:57:20
и при наведении01:57:21
Drop Dash Shadow Dash XL вот и все01:57:25
теперь у нас есть эта замечательная расходная бирка01:57:27
но мы можем просто продублировать этот тег b01:57:30
ниже01:57:31
измените текст на зеленый01:57:34
400 прямо здесь01:57:36
и тогда вместо расходов мы собираемся01:57:38
сказать бюджет01:57:41
вот и все, теперь у нас есть эта часть01:57:43
прямо здесь мы видим, что говорим01:57:46
о расходах и бюджете01:57:48
большой01:57:49
так что теперь мы перейдем к этому01:57:51
часть слева, которую мы собираемся01:57:53
иметь два разных текстовых элемента01:57:55
линейный график, а затем с правой стороны01:57:58
у нас будет это великолепное зрелище01:58:00
стек-диаграмма, так что теперь мы можем опуститься ниже этого01:58:03
тег б01:58:04
и ниже еще двух div01:58:07
и тогда прямо здесь мы собираемся01:58:09
создать еще один div01:58:12
у этого div будет имя класса01:58:15
равен МТ-1001:58:18
гибкий01:58:19
разрыв-1001:58:21
гибкая обертка тире и выравнивание центра тире01:58:26
ничего не произойдет, если мы сохраним это01:58:29
но теперь нам нужно добавить что-то внутрь01:58:31
об этом и о том, что что-то будет01:58:33
div с рамкой, давайте добавим класс01:58:37
имя01:58:38
граница тире r тире 101:58:41
цвет границы штриха01:58:44
а еще м01:58:46
4 и пр01:58:48
10 дополнение справа01:58:50
если мы сохраним это01:58:51
ты видишь, что ничего не получится01:58:53
случаться01:58:54
но мы можем добавить внутрь него div и01:58:57
этот div будет содержать p01:59:00
элемент, который p будет иметь два промежутка01:59:04
элементы внутри него01:59:06
первый из них отрендерит это01:59:08
сумму прямо здесь, чтобы мы могли скопировать и01:59:11
вставьте это прямо здесь и ниже, что мы01:59:14
можно просто отобразить этот процент правильно01:59:16
вот так давайте скопируем это01:59:19
создайте новый элемент span и вставьте01:59:22
процент01:59:23
конечно, нам нужно как-то их стилизовать01:59:25
поэтому давайте дадим имя класса первому01:59:29
диапазон, который будет текстовым тире 3 xl01:59:33
и01:59:34
шрифт-полужирный, вот и все, это очень много01:59:37
больше01:59:38
а второму мы можем дать01:59:40
имя класса равно p-1.501:59:44
так что давайте добавим немного дополнений, а теперь01:59:47
вы увидите, как мы можем создать этот маленький01:59:49
структура в виде таблетки, использующая только попутный ветер01:59:53
давайте также дадим это при наведении01:59:56
капля тире тень тире xl01:59:59
курсор02:00:00
тире указатель02:00:02
округлое тире полное02:00:04
текстовое тире белого цвета02:00:06
и фоновый черто-зеленый02:00:09
бросаться02:00:10
400. поле слева, тире 3 и текстовое тире xs.02:00:17
и вот, у нас есть наш маленький02:00:19
знак процента выглядит отлично02:00:22
теперь нам, конечно, придется добавить расходы02:00:26
поэтому ниже отметки скорости мы собираемся02:00:28
добавьте еще один тег p, и это просто02:00:31
скажу бюджетный02:00:33
мы можем дать ему имя класса, равное02:00:36
текстовое тире серый-50002:00:39
и мт-102:00:42
вот и все02:00:43
теперь мы можем скопировать весь этот div02:00:47
вставьте это ниже02:00:48
и удалите элемент диапазона с помощью02:00:50
процент, нам не нужен процент02:00:53
для бюджета02:00:54
скажем, бюджет будет02:00:56
что-то вроде 48 00002:00:59
и это будут расходы, так что если02:01:02
мы сохраняем, чтобы вы могли видеть, что у нас есть02:01:04
расход и бюджет02:01:06
но к этому div давайте просто добавим класс02:01:09
имя равно пустому тире 8 вот так02:01:14
вот и все, теперь мы получаем просто02:01:16
немного ближе к нашим фактическим данным о доходах02:01:19
карта02:01:20
пришло время написать наш первый код02:01:23
диаграмма02:01:24
спарклайн-диаграмму, которую вы можете видеть, мы можем02:01:27
на самом деле наведите на него курсор и получите другое02:01:29
точки данных, хотя это довольно просто02:01:32
это выглядит великолепно02:01:34
поэтому прямо под этим div мы можем создать02:01:37
новый div02:01:38
у этого div будет имя класса02:01:41
равно02:01:42
МТ-502:01:45
и внутри мы собираемся позвонить02:01:47
самозакрывающаяся искровая диаграмма, например02:01:51
этот02:01:52
это компонент, который мы создали02:01:56
сначала, прежде чем мы перейдем к этому, давайте на самом деле02:01:58
передать реквизит02:02:00
мы собираемся передать текущий цвет02:02:02
который будет динамичным позже02:02:04
а пока скажем просто синий02:02:06
давайте также дадим ему идентификатор02:02:09
линия тире искра02:02:11
такая линия02:02:13
нам нужно придать ему тип, который будет02:02:15
быть установленным в линию02:02:17
нам нужно придать ему высоту, которая равна02:02:19
будет установлено значение 80 пикселей02:02:21
так это 8002:02:24
и нам также нужно передать ширину02:02:27
что в данном случае будет02:02:29
что-то вроде 250 пикселей02:02:32
конечно, нам нужно передать данные для02:02:34
эта диаграмма, и она у нас уже есть02:02:36
подготовленные данные о площади спарклайнов02:02:39
и мы можем передать цвет, который02:02:41
снова будет просто синим02:02:44
вот и все, и теперь мы проходим все02:02:46
необходимый реквизит, и мы действительно можем02:02:48
войдите в этот компонент спарклайна и02:02:52
используйте его, чтобы начать реализацию02:02:54
эти спарклайновые компоненты мы можем импортировать02:02:57
компонент спарклайна из добавления синхронизации02:03:01
слияние косая черта ej202:03:04
косая черта реагирует на тире диаграммы мы02:03:07
установил этот пакет раньше, и он02:03:09
дает нам доступ ко всем графикам02:03:12
мы также собираемся импортировать инъекцию в ближайшее время02:03:14
достаточно, чтобы увидеть, для чего это нужно, и02:03:16
мы собираемся импортировать спарклайн02:03:19
подсказка02:03:21
вот и все, что нам нужно и02:03:23
вообще-то это первый раз в этом02:03:25
целое видео, которое вы увидите, как02:03:27
хорошо использовать компонент syncfusion, я02:03:30
врешь, ты видел этот компонент всплывающей подсказки02:03:33
прямо здесь, но это было всего лишь02:03:35
наименьшая возможная часть того, что02:03:36
предложения syncfusion теперь мы увидим02:03:39
маленькая схема в действии, но главное02:03:42
стоит заметить, как просто создать02:03:45
это02:03:46
так что давайте погрузимся прямо в02:03:48
сначала нам нужно получить весь реквизит, который02:03:50
мы переходим к компоненту спарклайна02:03:53
это идентификатор02:03:55
высота с цветом02:03:58
данные02:03:59
тип02:04:00
и текущий цвет02:04:02
вот и все02:04:04
и теперь единственное, что мы собираемся02:04:06
возвращение будет искрой02:04:09
линейный компонент02:04:12
вот и все02:04:13
вот так, конечно, мы должны предоставить02:04:15
некоторые реквизиты, так что теперь, если вы перезагрузите02:04:18
страница, которую вы не сможете увидеть02:04:20
что-либо02:04:21
но откуда ты знаешь, какой реквизит нам нужен02:04:23
должны предоставить02:04:24
ну, одна из вещей, которые мне действительно нравятся02:04:26
типа насчет syncfusion это их02:04:28
документация02:04:30
есть много примеров, чтобы показать вам02:04:32
как работает любой компонент, который вам не нужен02:04:35
перейти на любой другой сайт за помощью02:04:38
их документация показывает вам все02:04:42
он ответит на все ваши вопросы02:04:44
есть демо-версии кода02:04:46
разные демо для разных ситуаций02:04:48
и все остальное, что вам может понадобиться, так что в02:04:51
в этом случае ты можешь перейти в спарклайн02:04:54
начните, а затем вы сможете изучить02:04:57
как его установить у нас уже есть02:04:59
реагируйте на диаграммы, и вам просто нужно позвонить02:05:02
это вот и все, но теперь, конечно, как мы можем02:05:05
изменить ось типов размеров02:05:07
кастомизация, все здесь так02:05:11
не волнуйся, я научу тебя, как02:05:13
использовать этот компонент в этом видео, но02:05:15
если у вас есть дополнительные вопросы02:05:17
просто посетите их документацию, это02:05:20
удивительно, что наш спарклайн-компонент должен02:05:23
есть идентификатор, скажем, идентификатор равен02:05:26
идентификатор, который мы передаем через реквизит02:05:29
мы собираемся сделать то же самое с02:05:31
высота02:05:32
и ширина, которую мы уже проходим02:05:35
это через реквизит, так что это легко02:05:38
мы собираемся установить ширину линии02:05:40
равен 102:05:42
и тип значения должен быть равен02:05:46
числовой02:05:47
мы собираемся установить одинаковую заливку02:05:49
раскрасить и, наконец, мы собираемся установить02:05:52
граница должна быть равна цвету, который02:05:56
равный текущему02:05:58
цвет и ширина, которая будет02:06:00
поставил на 2.02:06:02
пока ничего не будет показано, потому что мы02:06:04
ничего внутрь не помещал02:06:06
что нам нужно сделать, так это позвонить02:06:09
компонент инъекции такой02:06:12
и мы должны предоставлять услуги, которые02:06:15
мы планируем использовать02:06:17
услуги02:06:18
внутри массива мы хотим использовать02:06:21
подсказка спарклайна, которая позволит02:06:23
нам нужно навести на него курсор, чтобы увидеть больше02:06:26
данные о графике02:06:27
теперь, когда у нас это есть, мы можем продолжить02:06:29
со всеми различными свойствами, поэтому02:06:32
давайте наконец предоставим источник данных02:06:34
самая важная часть и это02:06:36
будут равны данным, которые мы02:06:39
проходя мимо02:06:40
наконец, мы собираемся назвать ось X02:06:43
имя равно х02:06:45
также имя y чему-то равно02:06:48
как ты02:06:50
и тип равен тому типу, который мы02:06:52
проходя через реквизит02:06:54
теперь ты это заметишь02:06:55
все по-прежнему пусто, поэтому, если мы перейдем к02:06:58
осмотреть02:06:59
и откройте консоль02:07:01
вы можете увидеть несколько замечательных полезных ошибок02:07:04
игристый компонент не определен02:07:07
так что если мы вернемся02:07:09
похоже, мы назвали это спарклайн, верно02:07:11
здесь02:07:12
и давайте посмотрим, как мы это назвали в02:07:14
импортировать это спарклайн, так что кажется02:07:18
все в порядке02:07:20
да, спарклайн02:07:22
но игристый компонент не определен02:07:24
так это происходит прямо здесь02:07:27
похоже, я ошибся в написании спарклайна02:07:30
компонент02:07:31
здесь у меня есть строчная буква l и это02:07:34
как это должно быть, так что давай просто это исправим02:07:36
туда и сюда мы идем, как только я02:07:38
перезагрузил страницу, график правильный02:07:41
здесь диаграмма и так хороша, но мы02:07:43
также может предоставить дополнительные данные всплывающей подсказки02:07:46
так что давайте просто скажем, что настройки подсказки02:07:49
будет равен объекту02:07:52
мы скажем видимый02:07:54
установлено значение true, и тогда мы собираемся02:07:57
установите формат равным в02:08:00
нить02:08:01
доллар02:08:02
х вот так02:08:04
а затем данные02:08:06
а потом ты прямо здесь, так вот что02:08:08
произойдет, как только мы на самом деле наведем курсор02:08:11
над ним это значение x, а затем02:08:14
это значение y, и мы также можем добавить02:08:17
настройки линии трека02:08:20
так02:08:21
и внутри объекта, скажем, видимого, является02:08:25
истинный02:08:26
теперь, если мы сделаем это02:08:28
если навести курсор, то можно увидеть, что мы сейчас02:08:30
просмотр данных графика02:08:33
конечно, эти данные не так уж важны02:08:34
прямо сейчас, потому что он не подключен к02:08:36
эти данные это всего лишь фиктивные данные, но02:08:39
представьте, если бы у вас были реальные данные, которые можно было бы вам показать02:08:41
мог бы показать это и добавить это02:08:44
отличная подсказка, объясняющая данные на02:08:46
каждая точка и все, я это знаю02:08:49
это была простая диаграмма, но вы можете видеть02:08:51
это всего лишь один компонент, а затем02:08:54
несколько вариантов, чтобы получить этот великолепный вид02:08:56
диаграмма, полностью адаптированная для мобильных устройств02:08:59
теперь мы можем вернуться к электронной коммерции и мы02:09:02
можно продолжать обновлять информацию о доходах02:09:04
похоже, наша кнопка следующая, так что просто02:09:08
ниже этого div мы добавим один02:09:10
больше div, и этот div будет иметь02:09:13
имя класса равно02:09:17
1002:09:18
а также там будет кнопка02:09:21
который является самозакрывающимся компонентом02:09:24
он будет иметь цвет, равный02:09:26
белый02:09:27
а также цвет фона равен синему02:09:31
текст будет говорить что-то вроде02:09:33
скачать отчет и радиус границы02:09:37
будет 10 пикселей02:09:39
теперь, если мы вернемся, ты сможешь увидеть это02:09:41
кнопка прямо здесь, но теперь давайте создадим02:09:44
эту более красивую диаграмму, используя02:09:46
синхронизация, на этот раз мы можем02:09:49
фактически включать и выключать расходы или02:09:52
бюджет, чтобы посмотреть, что происходит02:09:55
поэтому ниже этого div и еще одного div02:09:58
я собираюсь создать последний div02:10:01
и этот div будет отображать02:10:04
многослойный самозакрывающийся компонент02:10:07
этому компоненту, который мы собираемся передать02:10:09
ширина, которая будет равна02:10:11
320 пикселей и высота, которая собирается02:10:15
быть равным02:10:16
360 пикселей02:10:19
большой02:10:20
так что, конечно, мы пока ничего не видим02:10:22
потому что нам нужно зайти внутрь нашего02:10:24
компонент и реализуем его прямо здесь02:10:27
это будет второй02:10:28
возможность для вас увидеть, насколько удивительно02:10:31
syncfusion и как его можно создать02:10:33
отличные графики за считанные минуты02:10:36
сначала нам придется импортировать кое-что02:10:39
из syncfusion, чтобы мы могли сказать импорт02:10:43
компонент диаграммы02:10:46
а также сериал02:10:48
коллекция02:10:50
директива02:10:53
мы также можем получить директиву серии02:10:57
и не беспокойся об этих именах, я02:10:58
собираюсь показать тебе, где их найти02:11:00
очень скоро02:11:01
мы собираемся сделать укол02:11:03
а также легенда02:11:06
категория02:11:08
колонна штабелирования02:11:11
ряд02:11:12
и, наконец, всплывающая подсказка02:11:16
и это происходит из-за добавления синхронизации02:11:20
косая черта ej2 Dash React Dash Charts02:11:25
вот и все02:11:26
наконец, нам нужно импортировать данные, которые02:11:28
мы собираемся использовать импорт с накоплением02:11:32
обычай02:11:34
ряд02:11:35
а также сложенные02:11:37
начальный02:11:38
Икс02:11:39
ось02:11:41
и тоже сложены02:11:43
начальный02:11:44
й02:11:45
ось, вот и все, это исходит из02:11:50
косая черта точка косая черта точка02:11:52
данные, а затем манекен02:11:55
и на этом пока всё, и как02:11:58
можем ли мы создать эту диаграмму02:12:00
ну, будет только один возврат02:12:03
и это будет диаграмма02:12:06
компонент02:12:07
внутри этого компонента диаграммы, который нам нужен02:12:09
чтобы создать компонент внедрения с помощью02:12:12
различные услуги02:12:14
поэтому сервисы указывают, что вы хотите02:12:16
ваша диаграмма, чтобы иметь02:12:18
мы хотим иметь легенду, которая будет продолжаться02:12:20
быть этой частью прямо здесь, чтобы переключить ее02:12:22
включить и выключить02:12:24
мы также хотим иметь категорию a02:12:27
группировка столбцов и всплывающая подсказка02:12:30
поэтому следующим шагом будет предоставление всех02:12:32
необходимые свойства02:12:34
конечно, мы можем сначала получить кое-что от02:12:37
реквизит02:12:38
там мы передаем ширину02:12:40
и высота02:12:42
и что мы можем сделать02:12:44
добавить ширину, которая будет02:12:46
равна ширине, а также высоте, которая02:12:50
будет равен высоте02:12:52
и как только ты это сделаешь, ты увидишь02:12:54
эта красивая сетка, где находится наша диаграмма02:12:57
пойдёт, ты увидишь, как оно ещё и толкнуло02:12:59
содержимое слева, давайте также02:13:02
дайте ему идентификатор, равный стековой диаграмме02:13:06
мы также можем присвоить ему основную ось X для02:13:09
быть равным сложенной основной оси X02:13:13
это немного изменит ситуацию02:13:14
целей этой конкретной задачи, и мы02:13:17
также можно указать основную ось Y02:13:20
как основная ось Y стека, это приближается02:13:24
из фиктивных данных, и это позволяет нам02:13:26
чтобы лучше показать данные просто 100 200 30002:13:30
400 и так далее, мы могли бы легко не02:13:33
предоставил это, так что давайте прокомментируем это02:13:35
пока и посмотрим, как пойдет02:13:37
Следующее, что нам нужно сделать, это предоставить02:13:39
свойство области диаграммы, и это происходит02:13:42
быть равным объекту, где мы находимся02:13:45
собираюсь установить границу, равную02:13:47
другой объект02:13:49
с шириной, установленной на ноль, поэтому мы имеем02:13:52
полностью убрав границу с одним02:13:54
легкая линия02:13:56
мы собираемся установить всплывающую подсказку02:13:58
быть равным объекту, где мы установили02:14:01
свойство Enable имеет значение true02:14:04
и, наконец, самая важная часть02:14:07
ниже этой инъекции мы можем назвать серию02:14:10
директива сбора02:14:12
и внутри этого мы можем сопоставить наши02:14:15
сложенные пользовательские серии, которые складываются02:14:18
пользовательская серия — это данные, поступающие из02:14:21
наши фиктивные данные, чтобы мы могли сказать точечную карту02:14:24
мы собираемся получить предмет и02:14:26
индекс02:14:27
и мы хотим вернуть директиву серии02:14:31
за каждый из наших товаров02:14:34
так02:14:35
это самозакрывающийся тег02:14:37
которому мы собираемся дать ключ, равный02:14:39
индексировать02:14:40
а также мы собираемся распространить все02:14:42
свойства нашего товара02:14:45
это наши фактические данные02:14:48
поэтому я собираюсь просмотреть наши данные, чтобы вы02:14:51
можем посмотреть, как это выглядит там, где мы02:14:53
перейти к данным сложенной диаграммы02:14:56
мы просто предоставляем все разные02:14:58
значения в эту диаграмму, например, на02:15:00
по оси X у нас есть некоторые конкретные даты и02:15:03
тогда у нас есть значения для этих дат02:15:06
и похоже, что диаграмма умная02:15:08
достаточно, чтобы сразу заметил, что02:15:10
хотим ли мы использовать для осей X и Y02:15:14
так что теперь похоже, что это даже не02:15:16
необходимо, что мы можем сделать, это также сказать02:15:19
настройки легенды, которые будут02:15:22
объект, в котором мы собираемся установить02:15:24
фон, который будет02:15:26
белый, вот и все, так что теперь мы действительно можем02:15:28
посмотрим, что происходит, и мы сможем переключиться02:15:31
включение и выключение определенных значений02:15:34
это здорово, мы только что создали отличный02:15:37
просмотр графика за считанные минуты02:15:40
диаграмма быстро исчезла для меня, поэтому02:15:42
я думаю, это дает мне понять, что мне нужно02:15:44
основная ось Y и основная ось X, так что я02:15:48
просто собираюсь вернуть их и02:15:50
сейчас все выглядит отлично02:15:53
и единственное, что, кажется, не так02:15:55
работаю прямо сейчас — это подсказки, если02:15:58
мы наводим на него курсор и не можем получить ничего лишнего02:16:00
информация02:16:02
и чтобы это исправить, я думаю, нам нужно02:16:04
изменить идентификатор02:16:06
на основе того, как мы указали наши демо-данные02:16:09
мы должны назвать это таким же образом, поэтому02:16:11
это будут графики02:16:13
и если мы перезагрузим страницу02:16:16
вы можете видеть, что всплывающая подсказка теперь работает02:16:18
и мы можем увидеть наши общие расходы по02:16:21
месяц, а также бюджет по месяцам02:16:24
это здорово, мы можем включить это и02:16:27
выключено, и у нас есть великолепно выглядящая карта02:16:31
вот и все, что касается нашей первоначальной электронной коммерции02:16:35
страница, теперь мы наконец готовы начать02:16:38
создание всех других наших страниц02:16:40
наполнен удивительной функциональностью, такой как02:16:43
эти страницы заказов сотрудники клиенты02:16:46
календарь, канбан-доска и многое другое02:16:50
так что это будет следующий шаг, который мы02:16:53
можешь вернуться в наше приложение02:16:55
мы можем закрыть все открытые на данный момент02:16:57
файлы02:16:58
и как вы можете видеть прямо здесь, следующий02:17:01
страница, над которой мы можем работать, — это страница заказов.02:17:04
Итак, давайте контролировать порядок кликов и приступим02:17:08
прямо там, в нашем браузере, мы02:17:10
также можете открыть ордера и увидеть02:17:13
что в настоящее время он пуст, поэтому, если вы02:17:16
чувствую, что тебе нужно сделать перерыв02:17:17
это прекрасное время, чтобы просто посидеть немного02:17:20
сделай немного упражнений и потом возвращайся02:17:23
нас ждут захватывающие вещи, мы собираемся02:17:25
реализовать всю эту таблицу, которая позволяет02:17:27
тебе нужно отсортировать предметы по названию02:17:30
имя клиента, статус суммы и02:17:33
идентификатор заказа, так что следите за обновлениями02:17:36
внутри заказов мы можем сначала импортировать02:17:39
некоторые вещи, которые нам понадобятся02:17:42
синхронизация слияния02:17:43
так что это будет импорт02:17:45
компонент сетки02:17:48
так02:17:49
нам также понадобятся столбцы02:17:52
директива, нам также понадобится02:17:54
директива единственного столбца02:17:58
также компонент изменения размера02:18:00
компонент сортировки02:18:02
контекстное меню02:18:05
компонент фильтра02:18:07
страница02:18:08
экспорт в Excel, да, даже это доступно02:18:12
экспорт в PDF02:18:15
редактировать02:18:16
и, наконец, ввести02:18:19
и все это исходит от02:18:21
добавить синхронизацию02:18:23
косая черта ej2 тире реакция тире сетки02:18:28
для данных, которые мы можем импортировать02:18:31
данные о заказах02:18:34
и пункты контекстного меню02:18:37
а также сетка заказов02:18:40
это исходит из02:18:42
точечный слэш02:18:43
пустая косая черта данных02:18:46
вот и все02:18:47
и, наконец, мы будем использовать наш заголовок, поэтому02:18:50
мы можем импортировать компонент заголовка02:18:53
вот так из точечной косой черты02:18:56
компоненты02:18:57
и на самом деле компонент заголовка02:19:00
будет тот, который мы собираемся02:19:01
сначала создайте, поэтому внутри этого div мы02:19:04
может визуализировать компонент заголовка02:19:07
и мы можем передать заголовок, равный02:19:09
заказы02:19:10
и категория02:19:12
равно странице, вот и все02:19:16
так что это не компонент syncfusion02:19:18
это компонент, который мы можем создать02:19:20
самостоятельно, чтобы мы могли просто контролировать02:19:23
нажмите на него02:19:25
мы знаем, что хотим принять02:19:27
категория, а также название02:19:30
и этот заголовок будет просто02:19:33
div02:19:34
это будет иметь имя класса, равное02:19:37
для нижнего поля или mb-1002:19:41
у него будет тег p, которым является тег p02:19:44
будет имя класса02:19:47
равно текстовому тире, серому тире 40002:19:51
и внутри там мы собираемся02:19:52
визуализировать категорию02:19:55
наконец-то у нас будет еще одна б02:19:57
тег, и этот будет отображать02:20:00
заголовок02:20:01
так что теперь, если мы сохраним это02:20:03
вы можете увидеть страницу и заказы02:20:05
и давайте также дадим этому имя класса02:20:08
заголовок02:20:09
это будет текст02:20:11
тире 3xl02:20:13
шрифтовое тире экстра жирный отслеживание тире плотное02:20:18
и текстовое тире шифер тире 90002:20:22
как только ты это сделаешь, ты увидишь это02:20:24
порядок страниц прямо здесь02:20:26
это будет заголовок02:20:28
чтобы мы могли вернуться к нашим заказам и02:20:31
прямо здесь мы можем применить некоторые имена классов02:20:33
к этому div, обертывающему наш заголовок02:20:36
это будет маржа тире 2 и далее02:20:39
маржа для средних устройств 1002:20:42
отступ тире 2 и средние устройства02:20:45
дополнение 1002:20:47
бг02:20:48
белая и закругленная черточка 3 xl02:20:52
как только мы это сделаем, вы увидите это02:20:54
хороший заголовок прямо здесь02:20:56
конечно, теперь нам нужно создать02:20:58
фактическая таблица и как вы можете видеть это02:21:01
таблица наполнена функциональностью, которую мы02:21:03
перебирать множество разных элементов02:21:06
и мы можем отсортировать их по позициям02:21:08
имя клиента и даже сумму, так как02:21:12
мы бы реализовали это02:21:14
использование синхронизации02:21:16
ну, что мы можем сделать, так это создать сетку02:21:20
компонент02:21:21
прямо здесь, и компонент для этого02:21:24
называется директивой columns, это просто02:21:27
куда идут данные, чтобы мы могли перейти02:21:30
наша сетка заказов02:21:32
точечная карта02:21:34
мы собираемся получить предмет, а также02:21:36
индекс02:21:37
и для каждого элемента мы хотим просто02:21:40
визуализировать директиву отдельного столбца02:21:44
так они называют это столбец02:21:46
директива02:21:48
и к этому самозакрывающемуся тегу нам нужно02:21:50
укажите ключ, равный индексу02:21:53
а потом мы выкладываем все данные02:21:55
точечный элемент02:21:58
поехали, если ты это сделаешь, ты заметишь02:22:00
что сайт выходит из строя, поэтому мы можем перейти на02:22:03
проверить и утешить02:22:05
и, как вы можете видеть, директива столбца02:22:08
не определено, это моя вина, я ошибся02:22:11
это прямо здесь, так и должно быть02:22:14
колонка, начнем, как только вы исправите02:22:17
это ты сразу увидишь02:22:19
наша великолепно выглядящая сетка02:22:22
у нас есть изображение, имя клиента, всего02:22:24
сумма и все это исходит от02:22:27
наша сетка заказов, в которую мы действительно можем войти02:22:30
это и, как видите, вы можете указать02:22:34
сколько именно места занимает каждый конкретный02:22:37
заголовок возьмет02:22:39
Итак, мы только что настроили все02:22:41
заголовки, но как нам на самом деле передать02:22:44
данные в этот компонент сетки02:22:46
ну, во-первых, мы можем дать ему идентификатор02:22:50
идентификатор равен Grid Comp, а затем ниже02:22:53
что вы можете предоставить источник данных02:22:56
самое главное — источник данных02:22:59
равно данным заказов02:23:02
как только ты это сделаешь02:23:04
все наши данные будут получены02:23:06
заполненный прямо внутри нашей сетки, не является02:23:10
это потрясающе02:23:11
вы также можете прокручивать по горизонтали, и вы02:23:14
можно увидеть все данные прямо здесь02:23:17
еще одна замечательная вещь, на которую следует обратить внимание, это то, что02:23:18
таблица полностью адаптирована для мобильных устройств, если02:23:22
если вы расширите его, это займет02:23:24
полная ширина экрана02:23:26
это выглядит потрясающе, все наши вещи02:23:29
прямо здесь и, как вы можете видеть по02:23:32
по умолчанию у нас нет нумерации страниц02:23:35
по умолчанию мы также не можем делать ничего вроде02:23:39
сортировать товары по имени покупателя или02:23:42
и так далее, как же вы на самом деле допускаете02:23:45
эти вещи единственное, что тебе нужно02:23:47
сделать, чтобы включить нумерацию страниц, скажем, разрешить02:23:52
пейджинг02:23:53
сохрани это02:23:54
и прокрутите вниз02:23:56
вы можете видеть, что теперь у вас есть только02:23:59
первый 1 2 3 4 5 6 7 8 9 10 11 1202:24:04
элементы, но у нас нет других элементов02:24:08
но у нас также нет нужной страницы, поэтому02:24:10
как мы можем перейти ко второму02:24:12
страница ну, мы собираемся использовать эту инъекцию02:24:15
компонент02:24:16
и к настоящему времени вы должны начать видеть02:24:18
шаблон02:24:19
сначала мы используем основы каждого02:24:21
компонент, а затем с помощью инъекции и некоторых02:24:24
дополнительные свойства, которые вы можете разрешить02:24:27
некоторые дополнительные функции, такие как нумерация страниц02:24:30
Итак, мы собираемся сказать «инъекционные услуги»02:24:32
внутри массива мы хотим добавить изменение размера02:24:37
мы также хотим добавить сортировку02:24:40
контекстное меню02:24:43
фильтр02:24:44
страница02:24:46
превосходить02:24:47
экспорт02:24:49
редактировать и02:24:51
экспорт в PDF02:24:54
вот и начнем, если ты сохранишь это02:24:56
вы можете видеть, что появилась нумерация страниц02:24:59
Прямо здесь02:25:01
теперь тебе может быть интересно, как ты02:25:03
разрешить сортировку, как мы можем их отсортировать02:25:06
предметы02:25:07
думаю об этом02:25:09
ну, на самом деле забавно, насколько это просто02:25:11
единственное, что тебе нужно сделать, это сказать02:25:14
позволять02:25:15
сортировка02:25:17
и это все02:25:19
сохраните это и добавьте прямо сюда, чтобы вставить02:25:22
услуги и сортировочные работы прямо из02:25:26
коробка02:25:28
разве это не удивительно02:25:30
и это все, что нам нужно было сделать, чтобы02:25:34
получите эту удивительную страницу сортируемых заказов02:25:39
разве это не безумие02:25:41
теперь нам потребовалось всего несколько минут, чтобы02:25:44
внедрите его, и он станет полностью мобильным02:25:47
отзывчивый, и это выглядит великолепно, мы02:25:50
иметь полную нумерацию страниц для извлечения02:25:52
данные из API02:25:54
у нас есть разные таблетки для02:25:56
статус общей суммы имя клиента02:25:59
а также предмет и его изображение02:26:02
хорошо выглядит02:26:04
теперь достаточно скоро мы собираемся реализовать02:26:06
вкладка «Сотрудники» и начнем02:26:09
иметь еще более сложную страницу, где02:26:12
мы сможем редактировать определенные значения02:26:15
а также поиск по имени02:26:18
так что это очень круто и так и будет02:26:20
быть таким же простым, как выполнение заказов02:26:24
страница была02:26:25
потрясающе, так что давай закроем наши заказы02:26:29
и давайте перейдем к нашему приложению и к нашему02:26:31
вкладка сотрудники02:26:33
большой02:26:34
мы готовы приступить к реализации наших02:26:37
страница сотрудников, поскольку сотрудники и02:26:40
страница заказов очень похожа, мы можем02:26:42
продолжайте и начните с копирования заказов02:26:45
страницу целиком, поэтому давайте просто скопируем ее02:26:48
и давайте вставим все прямо сюда02:26:51
мы собираемся переименовать это обратно в02:26:53
сотрудники02:26:54
Прямо здесь02:26:56
а также переименуйте его прямо здесь02:26:58
так в чем же будет разница02:27:00
условия импорта, а также сетевая составляющая02:27:03
останется прежним, нам понадобится02:27:06
инъекция, так что столбцы в порядке02:27:08
директива и директива столбца02:27:10
одинаковый02:27:11
нам не понадобится ни изменение размера, ни02:27:14
сортировка, а также фильтр контекстного меню02:27:18
нам понадобится страница, и мы02:27:20
не понадобится экспорт02:27:23
поэтому нам нужно будет добавить02:27:26
искать в этом случае02:27:28
отлично, потому что мы позволяем пользователю02:27:30
искать по разным именам, мы не будем02:27:33
нужны данные о заказах, а это происходит02:27:35
быть данными сотрудников02:27:38
и, наконец, нам также понадобится02:27:40
сетка сотрудников, поехали02:27:42
заголовок, конечно, взят отсюда02:27:44
компоненты02:27:46
так что эта часть будет именно той02:27:48
то же самое у нас будет сетка02:27:50
компонент, но теперь внутри столбцов02:27:52
директиву, которую мы собираемся перебрать02:27:55
сетка сотрудников02:27:57
Прямо здесь02:27:58
а в службах инъекций мы просто02:28:00
мне понадобится страница и отличный поиск02:28:04
так что теперь, если мы сохраним это02:28:06
и вернуться назад02:28:08
мы можем перезагрузить страницу02:28:10
и похоже, я неправильно написал сотрудников02:28:13
данные прямо здесь или, скорее, это происходит02:28:16
быть сеткой сотрудников, поэтому я составил02:28:18
ошибка здесь02:28:20
вот и мы больше не используем02:28:22
данные о заказах, чтобы мы могли поместить сотрудников02:28:25
данные прямо здесь02:28:27
с этим исправлено, вот и все, посмотри на это02:28:30
стол прямо здесь, возможно, ты здесь02:28:32
интересно, а где поиск02:28:35
ну, добавить это единственное, что у тебя есть02:28:37
нужно сказать «Панель инструментов», а затем передать02:28:40
массив, который будет называть поиск02:28:43
мы также собираемся удалить этот идентификатор, верно02:28:46
здесь02:28:47
и давайте также установим ширину равной02:28:50
авто02:28:52
и, наконец, чтобы появилась наша панель инструментов02:28:55
нам придется импортировать панель инструментов02:28:58
от синффузии02:28:59
и, наконец, добавьте его для инъекции прямо здесь02:29:03
потому что мы хотим внедрить панель инструментов02:29:05
функциональность, поэтому теперь мы можем перезагрузить02:29:07
страница02:29:09
и наша панель поиска находится прямо здесь, так что если02:29:12
ты ищешь что-то вроде Нэнси02:29:14
вы можете видеть, что он прекрасно отфильтровывает это02:29:18
и давайте удалим и нажмем Enter, и мы02:29:21
вернулись ко всем, пойдем с Омаром02:29:25
это тоже работает и выглядит так02:29:27
сейчас все работает отлично02:29:30
давайте, конечно, переименуем это в «Сотрудники»02:29:34
и это будет все для02:29:36
страница сотрудников следующая страница в нашем списке02:29:39
это будет страница клиентов02:29:42
и вы могли заметить небольшую ошибку02:29:44
у нас сейчас есть страница, на которой мы находимся02:29:47
невидимый на нашей боковой панели02:29:49
это потому, что мы еще не настроили02:29:51
эти цвета темы, но не волнуйтесь скорее02:29:55
достаточно, чтобы мы это исправили, чтобы02:29:58
я сказал, что следующая страница в нашем списке — это02:30:00
наши клиенты02:30:02
большой02:30:03
отличная работа, что удалось зайти так далеко в этом02:30:06
курс02:30:07
еще больше удивительных вещей появится, когда02:30:09
мы переходим на календарный канбан и02:30:12
редактор, это невероятно интересно02:30:15
Как только мы закончим, таблица наших клиентов будет02:30:18
будет выглядеть так02:30:20
у нас будет наш обычный стол с02:30:22
нумерация страниц, но теперь у нас будет02:30:25
люди прямо здесь, и вы сможете02:30:27
выбрать определенные строки02:30:29
сейчас это всего лишь демонстрационная таблица, так что02:30:31
на самом деле нажатие на лид не поможет02:30:33
что угодно, но если вы реализуете полную толпу02:30:36
функции, которые вы сможете удалить02:30:39
строки из таблиц не так уж и хороши, и02:30:42
то же самое касается двойного щелчка02:30:44
прямо здесь, а затем изменив имя так02:30:46
теперь мы можем нажать Enter и как вы можете02:30:49
видите, я только что изменил значение в02:30:52
определенную строку таблицы, которую вы также можете изменить02:30:54
статус и все остальное, что есть02:30:58
это здорово, давайте разберемся с этим02:31:01
продолжите работу с этой таблицей редактирования02:31:03
функциональность внутри наших клиентов, которую мы02:31:06
можно импортировать, и это будет сетка02:31:10
такой компонент02:31:12
у нас всегда есть сетка, так что до сих пор было02:31:14
работа с множеством различных синхронизаций02:31:16
термоядерные сетки, у нас будет02:31:18
директива столбцов02:31:21
а также директива единственного столбца02:31:27
тогда у нас будет страница02:31:29
выбор02:31:31
внедрить дополнительные услуги редактировать02:31:36
панель инструментов02:31:37
и сортировать и, наконец, фильтровать02:31:41
и они получены из дополнительной синхронизации02:31:43
fusion косая черта ej2 тире реакция тире02:31:48
сетки02:31:50
вот и убедись, что это сетки02:31:52
множественное число и, наконец, нам также нужно02:31:55
импортируйте некоторые местные вещи, и это02:31:57
это будут данные клиентов02:31:59
а также сетка клиентов02:32:02
и это исходит от02:32:04
эта косая черта02:32:05
данные, косая черта, пустышка, поехали02:32:09
и мы также собираемся использовать тот же самый старый02:32:11
заголовок, чтобы мы могли сказать заголовок импорта, который02:32:14
исходит из02:32:15
точечный слэш02:32:17
компоненты02:32:18
и мы готовы приступить к реализации02:32:20
наша таблица оценок, поэтому прежде всего02:32:24
давайте обернем все в div02:32:26
и это будет действительно div02:32:29
похоже на тот, который мы уже использовали в02:32:31
компонент наших предыдущих сотрудников02:32:34
так что давайте быстро перейдем к сотрудникам02:32:36
и что мы можем сделать, так это, по сути, скопировать02:32:39
все это потому, что мы снова02:32:41
работая с компонентом сетки, поэтому большая часть02:32:43
все будет очень похоже02:32:45
так что давайте просто вставим это сюда, где мы находимся02:32:47
собираюсь оставить этот div здесь, но02:32:50
мы собираемся изменить кое-что внутри02:32:52
из нашего заголовка на этот раз это будет02:32:55
клиенты02:32:56
а не сотрудники сейчас для данных02:32:59
источник: у нас больше нет данных о сотрудниках02:33:01
поэтому мы можем переключить это на данные клиентов02:33:04
и внизу мы пройдемся по02:33:07
сетка клиентов, а не сетка сотрудников02:33:10
наконец-то у нас больше нет доступа к02:33:12
поиск, чтобы мы могли удалить этот поиск из02:33:14
здесь, и если ты это сделаешь, и если ты напишешь02:33:17
клиенты02:33:18
правильно, у вас должна быть страница, которая02:33:21
выглядит так02:33:23
поэтому, просто скопировав предыдущую таблицу, мы02:33:25
сразу удалось сделать этот вид02:33:28
довольно здорово02:33:29
но мы собираемся это немного изменить02:33:31
что мы собираемся сделать, так это то, что у нас есть02:33:33
данные клиентов02:33:35
мы разрешим пейджинг и разрешим сортировку02:33:39
но мы также добавим несколько новых02:33:41
параметры02:33:42
на панели инструментов вместо поиска мы02:33:44
собираюсь включить удаление02:33:46
вот и все, и как вы можете видеть, есть02:33:48
много разных опций, которые вы можете добавить02:33:51
тогда мы также разрешим редактирование02:33:54
настройки02:33:55
и это будет выглядеть примерно так02:33:57
этот объект, которому мы собираемся сказать «разрешить»02:34:00
удаление02:34:01
быть установлено в true, а также разрешено02:34:04
редактирование, для которого будет установлено значение true02:34:07
так что это должно позволить нам редактировать вещи02:34:10
но, конечно, прежде чем нам придется ввести02:34:12
некоторые дополнительные услуги02:34:14
Итак, у нас есть панель инструментов страницы, которую мы собираемся02:34:17
также добавить выделение02:34:19
а также редактировать02:34:21
Сортировать02:34:22
и отфильтровать, вот и все это02:34:25
нам нужно02:34:26
так что теперь, если вы сохраните это, вы должны быть02:34:28
возможность двойного щелчка02:34:30
так что теперь, если вы сохраните и перезагрузите страницу02:34:33
у вас должна быть возможность дважды щелкнуть и02:34:35
вы можете редактировать определенные поля02:34:37
конечно, если вы перезагрузите страницу, которая02:34:39
поле вернется к тому, что было02:34:42
потому что на самом деле мы не реализуем02:34:44
любые функции толпы, которые могут быть02:34:46
видео само по себе02:34:48
но если вы хотите, чтобы я это создал02:34:50
видео и подключить полный функционал02:34:52
в приложении, похожем на mern, с02:34:55
компоненты синхронизации, которые будут02:34:57
потрясающе, так что просто дайте мне знать02:34:59
Комментарии02:35:01
но с учетом сказанного это было невероятно02:35:04
легко, как видите, наша таблица правильная02:35:07
здесь у нас есть нумерация страниц, мы удалили02:35:10
прямо здесь, и мы можем редактировать каждый конкретный02:35:13
поле подряд не так уж и здорово, поэтому с02:35:17
что ты только что увидел, что нам потребовалось много времени02:35:19
времени, чтобы создать это простое представление, используя02:35:22
просто попутный ветер, правильно02:35:23
но с синфузией это было невероятно02:35:26
легко создать три совершенно разных02:35:29
столы с разным функционалом02:35:32
но сейчас мы погружаемся в хорошее02:35:34
вещи02:35:35
сейчас мы создадим четыре невероятных02:35:39
различные компоненты02:35:40
я говорю о календаре02:35:42
канбан02:35:44
редактор и палитра цветов — все они есть02:35:47
совершенно разные, и вы увидите, как мы02:35:50
можно реализовать их с помощью syncfusion02:35:53
и что я могу сделать, это свернуть это обратно02:35:55
прямо здесь, и мы собираемся войти в02:35:58
наш компонент календаря прямо здесь и02:36:00
также внутри нашего приложения мы можем открыть02:36:03
наш календарь вот и все02:36:05
это первый, да, календарь02:36:08
здесь первый02:36:10
для начала наш календарь мы можем импортировать02:36:13
все необходимое для синхронизации02:36:14
компоненты02:36:16
на этот раз это будет не сетка02:36:18
мы собираемся импортировать расписание02:36:21
компонент02:36:23
нам также нужно еще несколько, и это произойдет02:36:25
быть02:36:26
Просмотры02:36:28
директива02:36:29
а также директива просмотра в единственном числе02:36:33
вы уже можете заметить подобную закономерность02:36:35
к тому, что у нас было в сетках, мы собираемся02:36:37
также импортировать некоторые дополнительные услуги02:36:39
как день02:36:41
неделя рабочая неделя02:36:44
месяц02:36:46
повестка дня02:36:48
изменить размер02:36:52
и наконец02:36:53
перетащить и оставить02:36:56
все это поступает из дополнительной синхронизации02:36:59
слияние02:37:00
косая черта ej2 тире реакция тире02:37:03
расписание02:37:05
и, наконец, по-настоящему все изменить02:37:07
еще дальше мы собираемся импортировать02:37:10
дата02:37:12
сборщик02:37:13
компонент02:37:14
и это происходит из-за добавления синхронизации02:37:18
косая черта ej202:37:20
Dash React Dash календари нам тоже нужны02:37:24
импортировать запланированные данные, так что правильно02:37:26
здесь это будут запланированные данные02:37:29
и это исходит из наших обычных данных, поэтому02:37:32
это будет02:37:34
точка косая черта данные косая черта пустышка там02:37:38
мы идем02:37:39
и похоже, у нас проблема02:37:42
перетащите прямо сюда, откуда02:37:44
мне это кажется хорошим02:37:46
но там говорится, что директиваviews имеет02:37:49
здесь уже было объявлено, что мы были02:37:51
предполагается, что у него есть директива просмотра02:37:53
единственное число02:37:55
большой02:37:56
и, наконец, нам также понадобится02:37:58
заголовок импорта заголовка02:38:00
и это исходит от02:38:03
компоненты точечной косой черты02:38:05
отлично, позвольте мне написать это правильно02:38:08
и мы готовы приступить к реализации02:38:10
календарь02:38:11
у нас будет один div, который будет02:38:13
оберните все, и этот div будет02:38:16
иметь имя класса, равное02:38:19
м02:38:20
2 в качестве запаса на средних устройствах m, тогда02:38:25
МТ-2402:38:27
д02:38:28
202:38:29
на средних устройствах p02:38:31
1002:38:32
b g черточка белая и закругленная черточка 3 xl02:38:36
это будет вся наша открытка02:38:40
тогда внутри него у нас будет наш02:38:42
заголовок02:38:43
самозакрывающийся тег, который собирается02:38:45
иметь категорию, равную приложению02:38:49
и у него будет название02:38:51
равно календарю02:38:54
вот и все отлично, вы можете это увидеть02:38:56
заголовок прямо здесь, тот же, что и у нас02:38:59
с заказами сотрудников клиентов и02:39:02
теперь календарь теперь под нашим заголовком, мы можем02:39:05
визуализируем наш компонент расписания02:39:08
компонент расписания не собирается02:39:10
быть самозакрывающимся тегом, потому что нам нужно02:39:12
внедрить в него некоторые дополнительные сервисы02:39:15
так что мы можем сказать инъекция02:39:18
это будет самозакрывающийся тег02:39:20
там будут услуги02:39:22
свойство02:39:23
и это будет равно массиву02:39:26
где мы проедем сегодня02:39:29
неделя02:39:31
нам тоже понадобится02:39:32
рабочая неделя02:39:34
месяц02:39:36
изменение размера повестки дня02:39:39
и перетащить02:39:41
и02:39:42
брось, поехали, и теперь у нас есть все02:39:45
услуги, которые нам нужны02:39:47
и если ты сделаешь именно это, ты собираешься02:39:50
сразу же увидеть великолепный календарь02:39:53
появится прямо здесь и, как вы можете заметить02:39:56
мы реализовали день, неделю, рабочую неделю, месяц02:39:59
и повестка дня, так что теперь, если вы нажмете правой кнопкой мыши02:40:01
здесь вид изменится02:40:04
немедленно02:40:05
разве это не безумие, ты тоже можешь переключиться02:40:08
между разными неделями или если вы находитесь02:40:10
просмотр месяца, между которым можно переключаться02:40:12
разные месяцы тоже прямо из02:40:15
коробка, если ты нажмешь прямо здесь, ты собираешься02:40:17
получить новое определение заголовка, чтобы вы могли02:40:20
добавьте новое событие, и это сработает02:40:23
сразу же с места в карьер02:40:26
перетаскивание также работает, так что это02:40:28
феноменальный02:40:30
теперь, конечно, если я перезагрузлю эту страницу,02:40:32
данные не останутся здесь, и это02:40:35
потому что у нас нет базы данных02:40:37
связан с этим снова, если ты хочешь меня02:40:39
создать морское приложение, в котором02:40:41
мы собираемся сделать всю эту работу, мы02:40:43
определенно могу сделать это в этом видео, я02:40:46
просто показываю вам, как легко это сделать02:40:48
создать потрясающий пользовательский интерфейс и заставить его работать02:40:51
с syncfusion прямо сейчас, если начнешь02:40:53
прокручивая, ты заметишь, что это так02:40:55
довольно долго02:40:57
Итак, что мы можем сделать, так это изменить02:40:59
высота02:41:00
давайте добавим некоторые реквизиты и просто передадим02:41:02
высота опоры что-то около 65002:41:06
таким образом, он будет хорошо вписываться в наш02:41:08
экран02:41:09
и конечно самое главное02:41:12
для нас сейчас это импортировать наши02:41:14
запланированные данные, мы можем сделать это с помощью02:41:16
создание нового свойства под названием event02:41:19
настройки02:41:20
мы можем установить это как объект, а затем02:41:23
сказать источник данных02:41:24
так02:41:26
равно данным расписания02:41:28
если мы сохраним это, вы заметите, что02:41:31
ничего не произошло, и это потому, что если02:41:34
мы переходим к нашим запланированным данным, вы можете02:41:36
обратите внимание, что все времена начала и02:41:39
Конец времен наступит примерно в 2021 году, а сейчас02:41:43
2022, поэтому мы не можем увидеть, что именно02:41:46
мы можем изменить дату начала в02:41:49
в этом случае, чтобы мы могли сказать выбранную дату02:41:52
равно02:41:54
новую дату мы передаем в объект даты и02:41:58
давай сделаем что-нибудь вроде 2021 года02:42:00
0, а затем 10.02:42:03
это подтолкнет нас к этому02:42:05
дата, и если мы прокрутим вверх, вы увидите все02:42:08
наших мероприятий прямо здесь мы также можем02:42:10
перейди на рабочую неделю, месяц, чтобы мы могли увидеть02:42:13
все еще лучше02:42:16
Просмотр повестки дня — это очень круто, потому что вы02:42:18
можно увидеть все из них, перечисленных в хорошем02:42:21
формат списка, разделенный по дням и отсортированный02:42:25
по временам02:42:27
это выглядит великолепно02:42:29
и этот удивительный календарь прямо из02:42:32
поле позволяет перетаскивать02:42:34
разные события02:42:36
нажмите на них, чтобы отредактировать их02:42:38
и у вас есть возможность редактировать02:42:40
название, местоположение, дата начала и окончания02:42:44
со всеми средствами выбора даты и времени02:42:47
представьте, сколько времени вам понадобится02:42:49
потратьте, чтобы создать это в материальном интерфейсе или02:42:53
представьте, сколько времени это займет, если02:42:55
ты должен был сделать это с нуля02:42:58
это займет недели, и большинство из них02:43:00
вероятно, будет так много ошибок, потому что обработка02:43:03
даты и время невероятно сложно02:43:07
fusion, вы можете использовать их расписание02:43:09
компонент и все прямо здесь02:43:12
прямо из коробки я подумал, что мы02:43:14
придется реализовать выбор даты02:43:16
самостоятельно, а также рассматривает директивы и02:43:19
директива просмотра, но в данном случае это так02:43:22
гораздо проще, чем то, что они заставляют это работать02:43:25
прямо из коробки02:43:27
отлично, и хотите верьте, хотите нет, но мы закончили02:43:30
с нашим первым приложением — календарем02:43:33
поэтому следующим шагом будет переключение на наш02:43:35
канбан-доска, если мы перейдем к разработанной02:43:38
приложение, вы можете пойти прямо сюда и посмотреть это02:43:41
это Trello или клон Jira, вы можете02:43:43
свернуть любую конкретную категорию и переместить02:43:46
вокруг задач02:43:48
это отлично работает, и мы собираемся02:43:51
реализовать это с помощью syncfusion, чтобы мы могли02:43:54
вернись в наше приложение02:43:55
вернись в приложение прямо здесь и потом02:43:58
нажмите кнопку управления канбан, чтобы мы могли получить02:44:00
начали создавать канбан для наших оценок02:44:04
компонент, процесс очень похож02:44:07
поэтому мы можем сначала импортировать что-то известноеОписание:
Every web developer needs to build a React Admin Dashboard Application. Learn how to create the best and most modern one simply by watching this course. This Admin Panel includes one Dashboard, Three Pages, Four Apps, and Seven fully functional charts! 💻JS Mastery Pro - https://www.jsmastery.pro/?discount=youtube ✅ A special YOUTUBE discount code is automatically applied! ⭐Syncfusion Components: https://www.syncfusion.com/ ⭐Syncfusion React Components: https://www.syncfusion.com/react-components If you want to get a finished, highly customizable Material UI version of a similar dashboard, check out Flexy React Material Dashboard - https://www.wrappixel.com/templates/flexy-react-material-dashboard-admin/?ref=257&campaign=Flexy 📚 Materials/References: GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_syncfusion_dashboard Styles & Other Code: https://gist.github.com/adrianhajdin/7d0eea1cbab4ab21a69dc8c2faf9b831 Assets: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_syncfusion_dashboard/tree/main/src/data You'll learn how to build a fully functional calendar, a kanban board, a WYSIWYG editor, and a color picker, as well as seven different charts! Alongside building this phenomenal application, in this video, you'll learn: - Advanced React Best Practices such as folder and file structure, hooks, and refs - Advanced State Management of the entire application using React Context API - And most importantly you’ll learn how to use Syncfusion - World's Best UI Component Suite for Building Powerful Web, Desktop, and Mobile Apps 💻 Master JavaScript: https://www.completepathtojavascriptmastery.com/ Use the unique promo code "YOUTUBE" on checkout to save $60! 📙 Get the Ultimate Frontend & Backend Development Roadmaps, a Complete JavaScript Cheatsheet, Portfolio Tips, and more - https://taplink.cc/javascriptmastery/p/7fb4d6/ 💻 Join our Discord Community - https://discord.com/invite/n6EdbFJ 🐦 Follow us on Twitter: https://twitter.com/jsmasterypro 🖼️ Follow us on Instagram: https://www.facebook.com/unsupportedbrowser 💼 Business Inquiries: [email protected] Time Stamps 👇 00:00:00 Intro 00:08:16 Setup 00:51:38 Sidebar 01:06:21 Context API 01:15:25 Navbar 01:39:45 Homepage 01:54:44 Revenue Section 02:17:36 Data Tables 02:36:10 Calendar 02:44:02 Kanban 02:49:21 WYSWYG Editor 02:53:49 Color Picker 02:59:13 Theme Fixes 03:33:10 Charts 03:51:18 Deployment
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.