Компоненты

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

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

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

• Button - Компонент кнопки с множеством вариантов и размеров
• Switch - Компонент переключателя
• Range - Компонент ползунка

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

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

Навигация

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

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

• Badge - Компонент значка
• Chip - Компонент чипа
• Rating - Компонент рейтинга
• Divider - Компонент разделителя
• ScrollArea - Компонент области прокрутки

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

• Tooltip - Компонент подсказки
• Alert - Компонент диалога предупреждения

Ввод данных

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

Разметка

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

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

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

npx @zizigy/capsule add <ComponentName>

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

npx @zizigy/capsule add Button

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

Настройка

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