Компоненты

CapsuleUI предоставляет коллекцию современных веб-компонентов, которые вы можете добавить в свой проект. Все компоненты построены на стандарте Web Components и полностью настраиваемы.

Доступные компоненты

Элементы форм

• Button - Компонент кнопки с множеством вариантов и размеров
• Input - CSS-only стили для нативных элементов input
• Textarea - CSS-only стили для нативных элементов textarea
• RadioGroup - Группа кастомных радио-кнопок с анимациями и иконками
• Switch - Компонент переключателя
• Range - Компонент ползунка

Обратная связь

• Alert - Компонент для отображения предупреждений
• Skeleton - Компонент-заглушка загрузки

Навигация

• Breadcrumb - Компонент навигации по хлебным крошкам
• Pagination - Компонент пагинации
• Tabs - Компонент вкладок
• Stepper - Компонент пошаговой навигации

Отображение данных

• Avatar - Круглый компонент аватара с поддержкой резервного контента
• Badge - Компонент значка
• Rating - Компонент рейтинга
• Divider - Компонент разделителя
• ScrollArea - Компонент области прокрутки
• Icon - Компонент иконок с интеграцией Iconify
• AspectRatio - Компонент для поддержания соотношения сторон
• Kbd - Компонент отображения клавиш клавиатуры
• Calendar - Компонент выбора даты
• Comparison - Компонент сравнения изображений до/после

Всплывающие элементы

• Tooltip - Компонент подсказки
• Tour - Компонент интерактивного тура

Ввод данных

• Autocomplete - Компонент автозаполнения

Разметка

• Accordion - Компонент аккордеона
• Button Group - Группа кнопок с бесшовными границами

Добавление компонента

Чтобы добавить любой из этих компонентов в ваш проект, используйте:

npx @capsuleui/core add <ComponentName>

Например, чтобы добавить компонент Button:

npx @capsuleui/core add Button

Дополнительную информацию смотрите в руководстве Начало работы.

Настройка

Все компоненты полностью настраиваемы. После добавления компонента вы найдете исходные файлы в директории @capsule/components. Вы можете изменить стили, поведение и внешний вид в соответствии с вашими потребностями.