CardBig

import { CardBig } from '@megafon/ui-lk-vas';

Примеры и код

Свойства и методы

Базовое использование

<CardBig
      items={[
          { title: "Title", subtitle: "Subtitle", titleColor: "green" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { type: "switcher", switcherText: "Включить", switcherProps: { checked: false, onChange: handleClick } },
          {
              type: "actions",
              actionsItems: [
                  { iconType: "settings", onClick: handleClick },
                  { iconType: "edit", onClick: handleClick },
                  { iconType: "cancel", onClick: handleClick },
              ]
          },
      ]}
  />
  <CardBig
      isTwoLine
      items={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
  />

Примеры сборки карточек

<div style={{ ...flexStyle, width: '952px'}}>
      <CardBig
          isTwoLine
          items={[
              { title: "Онлайн", subtitle: "Статус", titleColor: "green" },
              { title: "ambassador", subtitle: "Название" },
              { title: "16.02.2023 12:52:34", subtitle: "Последний вход" },
              { title: "121933 с", subtitle: "Время онлайн" },
              { title: "18", subtitle: "Соединение" },
              { title: "0,12 КБ/с", subtitle: "Загрузка" },
              { title: "18", subtitle: "Сеансы" },
              { title: "11", subtitle: "CPU" },
              { title: "6/18", subtitle: "Онлайн" },
              { title: "MikroTik", subtitle: "Поставщик" },
          ]}
      />
      <CardBig
          items={[
              { title: "ambassador", subtitle: "Название" },
              { title: "09:00", subtitle: "Начало" },
              { title: "21:00", subtitle: "Окончание" },
              { title: "121933 с", subtitle: "Время работы" },
              { title: "Картинка", subtitle: "Тип" },
              { type: "switcher", align: "center", switcherText: "Выключить", switcherProps: { checked: true, onChange: handleClick } },
              {
                  type: "actions",
                  align: "center",
                  actionsItems: [
                      { iconType: "edit", onClick: handleClick },
                      { iconType: "cancel", onClick: handleClick },
                  ]
              },
          ]}
      />
  </div>

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
items	CardCellType[]	[]	Массив элементов
isTwoLine	boolean	false	Расположение элементов в 2 строки. Элементы размещаются последовательно по каждому столбцу, начиная с первого.

type CardCellType = {
    /** Тип */
    type?: 'default' | 'switcher' | 'actions';
    /** Заголовок */
    title?: string;
    /** Цвет заголовка */
    titleColor?: 'default' | 'green';
    /** Дополнительный текст */
    subtitle?: string;
    /** Параметры переключателя (Switcher ui-core) */
    switcherProps?: SwitcherPropsType;
    /** Текст переключателя */
    switcherText?: string;
    /** Элементы действий */
    actionsItems?: ActionItemType[];
    /** Горизонтальное выравнивание */
    align?: 'left' | 'center' | 'right';
};

type ActionItemType = {
    /** Тип иконки */
    iconType: 'settings' | 'edit' | 'cancel';
    /** Обработчик клика */
    onClick: (e: React.SyntheticEvent<EventTarget>) => void;
};

CardSmall

import { CardSmall } from '@megafon/ui-lk-vas';

Примеры и код

Свойства и методы

Базовое использование

<CardSmall
      items={[1, 2, 3, 4, 5].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
          { title: "Действие 2", onClick: handleClick },
      ]}
      onCloseButtonClick={handleClick}
  />
  <CardSmall
      items={[1, 2, 3, 4].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1 (ссылка)", href: "#" },
          { title: "Действие 2 (ссылка)", href: "#" },
      ]}
      onCloseButtonClick={handleClick}
  />
  <CardSmall
      items={[
          { title: "МегаФон", subtitle: "Название" },
          { title: "По билингу", subtitle: "Авторизация" },
          { title: "1440", subtitle: "Интервал" },
          { title: "https://megafon.ru", subtitle: "Перенаправление" },
          { title: "Label Megafon", subtitle: "Название" },
      ]}
      actionButtons={[
          { title: "Редактировать профиль", onClick: handleClick },
          { title: "Настройки", onClick: handleClick },
      ]}
      onCloseButtonClick={handleClick}
  />

Адаптивная карточка

<CardSmall
      isAdaptive
      items={[1, 2, 3].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
      ]}
  />
  <CardSmall
      isAdaptive
      items={[1, 2, 3].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
      ]}
  />

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
items	CardSmallCellType[]	[]	Массив элементов
actionButtons	ButtonType[]	[]	Кнопки действий
onCloseButtonClick	() => void		Обработчик клика по кнопке-крестику "Закрыть"
isAdaptive	boolean	false	Растягивать компонент на всю ширину
dataAttrs	{ root?: Record<string, string>; actionButton?: Record<string, string>; closeButton?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам

type CardSmallCellType[] = {
    /** Заголовок */
    title?: string;
    /** Цвет заголовка */
    titleColor?: 'default' | 'green';
    /** Дополнительный текст */
    subtitle?: string;
};

type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};