РЕАКТИВНЫЙ ЦИФРОВОЙ САД
Что нового в My Digital Garden в прошлом месяце — (в октябре 2021 г.)
Каждый месяц я даю обновления в моем цифровом саду. Октябрьская производительность в основном на уровне инфраструктуры.
В прошлом месяце я провел множество операций по рефакторингу, чтобы сделать инфраструктуру более пригодной для повторного использования и расширяемой. Каждая разработка новой страницы требует некоторых стандартных функций для управления. Я очень строго отношусь к повторному использованию каждого фрагмента кода и ленивой загрузке ресурсов, когда они требуются. Эти условия заставляют меня писать более динамичный и настраиваемый код. Итак, список обновлений в октябре ниже;
«1. Главная страница"
На главной странице есть навигационная ссылка для каждого растения (эксперимента). Я добавил стили и фильтры на эту страницу. Теперь пользователи могут очень быстро получить доступ к каждому кусочку сада.
2. Навигационная карта
В этом примере показаны навигационные карты, которые перенаправляют пользователя на внутренние или внешние ссылки.
3. Многовариантный селектор
В этом примере показан выбор нескольких вариантов
4. Перемешивание изображений
В этом примере ваша цель — щелкнуть два символа и поменять их местами. Если вы приблизите слово, соотношение изображений при перетасовке уменьшится, и вы сможете увидеть фактическое изображение.
5. Проводник GitHub — (Дерево файлов)
В приведенном ниже примереc я попытался отобразить файловую структуру Public GitHub Repos в виде дерева или плоской структуры.
6. GitHub Explorer — (Файлы)
В этом примере я попытался открыть любой файл в редакторе кода.
7. GitHub Explorer — (Switch Repo)
Ниже приведен пример переключения между предопределенными общедоступными репозиториями.
8. GitHub Explorer — (Попробуйте собственный репозиторий)
В приведенном ниже примере пользователи могут добавить любой общедоступный репозиторий и просмотреть его структуру и сведения о файлах в редакторах кода.
9. Простая сложная планировка
Большинству пользовательских интерфейсов требуются сложные макеты для управления видимостью и размером вкладок. Иногда нужно расширить ширину вкладки, а нужно скрыть. Для этого я попробовал простую, сложную механику компоновки в своем саду.
10. Комплексная компоновка — (Границы)
Сложный макет позволяет использовать левую, правую, верхнюю и нижнюю границы для управления вкладками. Ниже я пробовал разные комбинации использования фрейма.
11. Сложная компоновка — (Переопределение рендеринга вкладок)
В сложном макете у нас есть разные представления Слева, Сверху, Справа, Снизу и По центру, и представления содержат вкладки. В приведенном ниже примере я попытался переопределить рендеринг вкладок с помощью дополнительного компонента.
12. Сложный макет — (Поддержка легкой темы)
Комплексный макет поддерживает различные стили темы.
13. Сложный макет — (Добавить вкладку)
В приведенном ниже примере я попытался добавить вкладки в левые, правые, верхние, нижние и центральные рамки.
14. Сложный макет — (редактор кода)
Ниже примера я отрендерил код для вкладки в сложном макете.
15. Сложный макет — (Консоль разработчика)
Я получаю все журналы консоли из 'window. console' и отобразить нижнюю вкладку в сложном макете в этом примере.
16. Сложный макет — (GitHub Explorer)
В этом примере я открыл репозиторий medium-blog-samples слева. Когда пользователь щелкает любой файл, он открывает новую вкладку и отображает код в редакторе.
17. Изменение размера IFrame
В приведенном ниже примере показано, как Iframe реагирует, когда пользователи перетаскивают боковую панель.
18. JSON-просмотрщик
В приведенном ниже примере я попробовал разные библиотеки JSONViewer для отображения данных JSON.
19. Просмотр гистограмм
Ниже примера я попытался стилизовать столбцы на гистограмме.
20. Просмотр линейных диаграмм
В этом примере я попробовал компонент Recharts LineChart. Вы можете добавлять или удалять новые линии на графике.
21. Синхронизация линейного графика
В этом примере я попробовал Recharts LineCharts Синхронизация компонентов Mouse Event
Прошлые обновления
Продолжаем читать 😃
Подобные образцы и надписи вы можете найти по этой ссылке. Если вам нравится эта история. Пожалуйста 👏👏 и поделитесь
