Библиотека компонентов Angular для standalone-приложений
Переиспользуемые UI-компоненты Angular для standalone-приложений, рабочих процессов с Angular Signals, доступности, CSS-переменных и готовой к продакшену документации по модальным окнам, таблицам данных, навигации, календарям и многому другому.
npm install ng-hub-ui-modal<hub-panels /><hub-avatar /><hub-skeleton />--hub-sys-color-primarynpm i ng-hub-ui-*Одна библиотека, любой бренд
Каждый компонент управляется CSS-переменными. Выберите тему и наблюдайте, как весь сайт перекрашивается — без пересборки, без дополнительного CSS.
Попробуйте — это меняет тему всего сайта вживую.
Создано для продакшен-работы на Angular
Начните с категории компонентов, которую обычно дольше всего реализовать как следует.
Потоки модальных окон и оверлеев
Диалоги, полноэкранные потоки, проекции и управляемые сервисами оверлеи для приложений Angular, которым нужно доступное поведение модальных окон.
Таблицы и списки данных
Серверная пагинация, сортировка, фильтрация и выбор для админ-панелей, бэк-офисов и управленческих дашбордов.
Сортировка и перетаскивание
Переупорядочивайте массивы, элементы управления FormArray и связанные списки с удобными для Angular утилитами перетаскивания.
Планирование и виды календаря
Интерфейсы календаря с событиями, шаблонами, перетаскиванием и хуками тематизации для рабочих процессов планирования.
Почему Hub UI?
Полностью доступный
Все компоненты следуют рекомендациям WCAG 2.1 с полной навигацией с клавиатуры и поддержкой программ чтения с экрана.
На основе CSS-переменных
Каждый компонент предоставляет пользовательские CSS-свойства. Переопределите любой токен под свой бренд — изменения мгновенно распространяются на все темы.
TypeScript в первую очередь
Строгая типизация во всём коде. Пользуйтесь полным автодополнением, безопасностью на этапе компиляции и лучшим в своём классе опытом разработки.
Standalone-архитектура
Построено на современной модели standalone-компонентов Angular. Импортируйте только то, что нужно, и держите ваши бандлы лёгкими.
Реальный код, реальный компонент
Достаточно нескольких строк шаблона. Фрагмент слева отрисовывает живой компонент справа.
Все компоненты
Изучите компоненты Angular, созданные для реальных продуктовых команд, переиспользуемых дизайн-систем и поддерживаемых standalone-приложений.
Modal
Доступный компонент модального окна для Angular со стекированием, полноэкранным режимом и шаблонами.
Paginable
Таблица данных и список с пагинацией для Angular с фильтрацией, сортировкой и серверными операциями.
Sortable
Утилиты сортируемых списков для Angular для массивов, элементов управления FormArray и конструкторов с перетаскиванием.
Calendar
Компонент календаря для Angular для планирования, событий и интерфейсов планирования.
Avatar
Компонент аватара для Angular с инициалами, запасными изображениями и индикаторами статуса.
Board
Компонент Kanban-доски для Angular с перетаскиванием для интерфейсов рабочих процессов.
Breadcrumbs
Хлебные крошки для Angular с интеграцией роутера и пользовательскими шаблонами.
History
Хранилище отмены и повтора для Angular для редакторов, форм и low-code-конструкторов.
Nav
Меню навигации для Angular для боковых панелей, выпадающих списков, вложенных панелей и адаптивных раскладок.
Portal
Рендеринг порталов и оверлеев для Angular для выдвижных панелей, плавающих панелей и динамических контейнеров.
Skeleton
Skeleton-заглушки для Angular с пресетами, встроенными DSL-шаблонами и адаптивными shimmer-раскладками.
Stepper
Компонент пошагового мастера для Angular для форм-визардов, онбординга и многошаговой валидации.
Toast
Компонент Angular для тостов и уведомлений с позиционированием, стопкой и автозакрытием.
Buttons
Кнопки Angular, FAB, speed dial и директивы выпадающих меню для насыщенных действиями интерфейсов.
Badges
Компонент Angular для бейджей: метки, счётчики и индикаторы статуса, полностью настраиваемый.
Panels
Компонент Angular панелей и аккордеона с одиночным или множественным раскрытием и полной темизацией.
Forms
Библиотека форм Angular с продвинутыми полями, select, валидацией и динамическим рендерингом.
Milestones
Компонент Angular для таймлайна и шагов прогресса с вертикальной, горизонтальной и анимированной раскладкой.
Utils
Библиотека утилит для Angular с оверлеями, управлением фокусом, пайпами и помощниками перевода.
Начните за считанные секунды
Установите компонент
npm install ng-hub-ui-modalИмпортируйте его как standalone
import { HubModalModule } from 'ng-hub-ui-modal';Настройте с помощью CSS-переменных
--hub-modal-border-radius: 1rem;Создайте свой следующий UI на Angular с Hub UI
С открытым исходным кодом, модульный и готовый к продакшену. Установите свой первый компонент уже сегодня.