PH
← Главная/Компоненты

PITHUB UI Components

Демонстрация компонентов FE-002.2 и FE-002.3

Spinner

sm
md
lg

Button

Variants

Sizes

With Icons

States

IconButton

Variants

Sizes

Input

This field is required

FormField

Мы не будем передавать его третьим лицам

Минимум 8 символов

Card

Простая карточка

Базовый пример использования Card компонента

Контент карточки может содержать любые элементы.

Карточка с действием

Header с кнопкой действия справа

Card.Action позиционируется в правом верхнем углу заголовка.

Гонка на Moscow Raceway

Time Attack Championship 2024

15 марта 2024
Московская область
10:00 - 18:00

Компактная карточка

padding="sm"

Уменьшенные отступы для компактного отображения.

Компактный

Badge

Variants

DefaultSecondaryOutlineSuccessWarningErrorInfo

Sizes

SmallMedium

Avatar

Sizes

АПsm
МИmd
ДСlg
ЕКxl

Fallback Types

ИГWith Image
ПСInitials (ПС)
Placeholder

Label

Logo

PH
sm
PH
md
PH
lg

Select

Switch

С лейблом

Sizes & States

sm
md
disabled off
disabled on

Dialog

Stack

Вертикальный flex-контейнер с настраиваемыми отступами

Этап 1Этап 2Этап 3
АП

Алексей Петров

Гонщик

Flex

Универсальный flex-контейнер с полным набором настроек

PH
PITHUB
Time AttackДрэг-рейсингКольцевые гонкиРаллиКартингДрифтЭндуранс
1Moscow Raceway
2Kazan Ring
3Сочи Автодром

Container

Ограничивает ширину контента и центрирует его. Текущая страница использует аналогичный контейнер max-w-4xl.

max-w-screen-sm · центрированный контент
max-w-screen-md · центрированный контент
max-w-screen-lg · центрированный контент
max-w-screen-xl · центрированный контент
Компоненты созданы в рамках задач FE-002.2 и FE-002.3