umbot - v2.2.0
    Preparing search index...

    Class Card

    Card Класс для создания и управления карточками на различных платформах.

    Класс предоставляет функциональность для:

    • Создания карточек с изображениями, заголовками и описаниями
    • Добавления кнопок к карточкам
    • Адаптации карточек под различные платформы (Алиса, VK, Telegram, Viber, Marusia, SmartApp)
    • Поддержки галерей изображений

    Ограничения по платформам:

    Алиса:

    • Максимум 5 элементов в галерее
    • Изображения: до 1MB, 1024x1024px
    • Форматы: JPG, PNG

    VK:

    • Максимум 10 элементов в карусели
    • Изображения: до 5MB, рекомендуется 13:8
    • Форматы: JPG, PNG, GIF

    Telegram:

    • Максимум 10 изображений в альбоме
    • Изображения: до 10MB, 1280x1280px
    • Форматы: JPG, PNG, WEBP

    Viber:

    • Максимум 6 элементов в карусели
    • Изображения: до 1MB, рекомендуется 400x400px
    • Форматы: JPG, PNG
    import { Card } from './components/card/Card';

    // Создание простой карточки
    const card = new Card();
    card.setTitle('Заголовок карточки')
        .setDescription('Описание карточки')
        .addImage('image.jpg', 'Заголовок изображения', 'Описание изображения')
        .addButton('Нажми меня');

    // Создание карточки с галереей
    const galleryCard = new Card();
    galleryCard.isUsedGallery = true;
    galleryCard.addImage('image1.jpg', 'Изображение 1', 'Описание 1')
        .addImage('image2.jpg', 'Изображение 2', 'Описание 2')
        .addButton({
            title: 'Подробнее',
            url: 'https://example.com',
            payload: { action: 'details' }
        });

    // Кастомные шаблоны для разных платформ

    // Кастомное переопределение ответа, на примере: Алиса - BigImage
    const alisaCard = new Card();
    alisaCard.template = {
        type: 'BigImage',
        image_id: '123456/123456',
        title: 'Заголовок',
        description: 'Описание',
        button: {
            text: 'Кнопка',
            url: 'https://example.com'
        }
    };

    // Кастомное переопределение ответа, на примере: VK - Карусель
    const vkCard = new Card();
    vkCard.template = {
        type: 'carousel',
        elements: [{
            photo_id: '-123456_789',
            title: 'Заголовок',
            description: 'Описание',
            buttons: [{
                action: {
                    type: 'text',
                    label: 'Кнопка',
                    payload: { button: 1 }
                }
            }]
        }]
    };

    // Кастомное переопределение ответа, на примере: Telegram - HTML-разметка
    const telegramCard = new Card();
    telegramCard.template = {
        type: 'article',
        message_text: '<b>Заголовок</b>\n<i>Описание</i>',
        parse_mode: 'HTML',
        reply_markup: {
            inline_keyboard: [[{
                text: 'Кнопка',
                callback_data: 'button_1'
            }]]
        }
    };

    // Кастомное переопределение ответа, на примере: Viber - Карусель
    const viberCard = new Card();
    viberCard.template = {
        type: 'carousel',
        elements: [{
            image: 'https://example.com/image.jpg',
            title: 'Заголовок',
            subtitle: 'Подзаголовок',
            buttons: [{
                text: 'Кнопка',
                actionType: 'reply',
                actionBody: 'button_1'
            }]
        }]
    };

    // Получение карточки для текущей платформы
    const cards = await card.getCards();
    Index

    Constructors

    constructor

    Properties

    button desc images isOne isUsedGallery template title

    Methods

    addButton addImage addOneImage clear getCards setAppContext setDescription setTitle

    Constructors

    • Создает новый экземпляр карточки. Инициализирует все поля значениями по умолчанию.

      Parameters

      Returns Card

      const card = new Card();

    Properties

    button: Buttons

    Кнопки элемента карточки. Используются для взаимодействия с пользователем.

    Buttons

    card.addButton('Купить');
    card.addButton({
        title: 'Подробнее',
        url: 'https://example.com'
    });
    desc: string | null

    Описание элемента карточки. Отображается под заголовком.

    card.setDescription('Подробное описание товара');
    images: Image[]

    Массив с изображениями или элементами карточки. Каждый элемент может содержать изображение, заголовок, описание и кнопки.

    Image

    card.addImage('product.jpg', 'Название товара', 'Описание товара');
    isOne: boolean

    Определяет необходимость отображения только одного элемента карточки. true - отображается только первый элемент false - отображаются все элементы

    card.isOne = true; // Отобразить только первый элемент
    isUsedGallery: boolean = false

    Использование галереи изображений. true - изображения отображаются в виде галереи false - изображения отображаются как отдельные карточки

    card.isUsedGallery = true; // Включить режим галереи
    template: any = null

    Произвольный шаблон для отображения карточки. Используется для кастомизации отображения на определенных платформах. Не рекомендуется использовать при задании поддерживаемых платформ. При использовании этого параметра вы сами отвечаете за корректное отображение.

    card.template = {
        type: 'custom_card',
        content: { ... }
    };
    title: string | null

    Заголовок элемента карточки. Отображается в верхней части карточки.

    card.setTitle('Название товара');

    Methods

    • Добавляет кнопку в карточку.

      Parameters

      • button: TButton

        Кнопка для добавления (строка или объект)

      Returns Card

      this для цепочки вызовов

      // Добавление простой кнопки
      card.addButton('Купить');

      // Добавление кнопки с дополнительными параметрами
      card.addButton({
          title: 'Подробнее',
          url: 'https://example.com',
          payload: { action: 'details' }
      });

    • Добавляет изображение в карточку.

      Parameters

      • image: string | null

        Идентификатор или URL изображения

      • title: string = ' '

        Заголовок изображения

      • Optionaldesc: string = ' '

        Описание изображения

      • Optionalbutton: TButton | null = null

        Кнопки для элемента

      Returns Card

      this для цепочки вызовов

      Ограничения на изображения:

      • Алиса: до 1MB, 1024x1024px, JPG/PNG
      • VK: до 5MB, рекомендуется 13:8, JPG/PNG/GIF
      • Telegram: до 10MB, 1280x1280px, JPG/PNG/WEBP
      • Viber: до 1MB, рекомендуется 400x400px, JPG/PNG
      // Добавление одного изображения
      card.addImage('image.jpg', 'Название', 'Описание');

      // Добавление изображения с кнопкой
      card.addImage('product.jpg', 'Товар', 'Описание', {
          title: 'Купить',
          url: 'https://shop.com/product',
          payload: { action: 'buy', id: 123 }
      });

      // Добавление нескольких изображений в галерею
      card.isUsedGallery = true;
      card.addImage('image1.jpg', 'Фото 1')
          .addImage('image2.jpg', 'Фото 2')
          .addImage('image3.jpg', 'Фото 3');

    • Добавляет одно изображение в виде карточки. Внутри себя выставляет isOne в true

      Parameters

      • image: string | null

        Идентификатор или URL изображения

      • title: string = ' '

        Заголовок изображения

      • Optionaldesc: string = ' '

        Описание изображения

      • Optionalbutton: TButton | null = null

        Кнопки для элемента

      Returns Card

      this для цепочки вызовов

    • Очищает все элементы карточки.

      Returns void

      card.clear(); // Удалить все изображения

    • Получает карточку в формате для текущей платформы.

      Parameters

      • OptionalappType: TAppType | null

        Тип приложения

      • OptionaluserCard: TemplateCardTypes | null = null

        Пользовательский шаблон карточки

      Returns Promise<any>

      Карточка в формате текущей платформы

      Возвращаемые значения зависят от платформы:

      Алиса:

      {
          type: 'BigImage',
          image_id: string,
          title?: string,
          description?: string,
          button?: {
              text: string,
              url?: string,
              payload?: any
          }
      }

      VK:

      {
          type: 'carousel',
          elements: [{
              photo_id: string,
              title?: string,
              description?: string,
              buttons?: Array<{
                  action: {
                      type: string,
                      label: string,
                      payload?: any
                  }
              }>
          }]
      }

      Telegram:

      {
          type: string,
          media: Array<{
              type: 'photo',
              media: string,
              caption?: string
          }>,
          reply_markup?: {
              inline_keyboard: Array<Array<{
                  text: string,
                  url?: string,
                  callback_data?: string
              }>>
          }
      }

      // Получение карточки для текущей платформы
      const card = new Card();
      card.addImage('image.jpg', 'Название', 'Описание')
          .addButton('Подробнее');

      const result = await card.getCards('alisa');
      console.log(result);

      // Использование пользовательского шаблона
      const customTemplate = {
          type: 'custom',
          content: { ... }
      };
      const customResult = await card.getCards(customTemplate);

    • Устанавливает описание для карточки.

      Parameters

      • description: string

        Описание карточки

      Returns Card

      this для цепочки вызовов

      card.setDescription('Подробное описание товара');

    • Устанавливает заголовок для карточки.

      Parameters

      • title: string

        Заголовок карточки

      Returns Card

      this для цепочки вызовов

      card.setTitle('Название товара');

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods