Skip to content

UI компоненты

SDK позволяет вызывать интерфейсные элементы платформы из мини‑приложения и реагировать на их события.

Доступны:

  • Toast — уведомление
  • Swal — алерт/confirm/prompt
  • Modal — модальное окно
  • Sidepanel — боковая панель

Пример Toast

Вывод уведомления об успешной операции с автоматическим скрытием через 5 секунд:

ts
import { Toast } from '@aspro-cloud/miniapp-jssdk'

const toast = new Toast({
  view: 'success',
  title: 'Сохранено',
  message: 'Настройки успешно обновлены',
  options: {
    timeOut: 5000
  },
  events: {
    onClose: () => console.log('Уведомление скрыто пользователем')
  }
})

await toast.show()

Пример Swal

Вывод диалога с подтверждением действия:

ts
import { Swal } from '@aspro-cloud/miniapp-jssdk'

const swal = new Swal({
  view: 'warning',
  title: 'Подтвердите действие',
  message: 'Вы уверены?',
  events: {
    onCancel: () => console.log('Отклонено пользователем'),
    onConfirm: () => console.log('Принято пользователем')
  }
})

await swal.confirm()

Вывод диалога с полем ввода:

ts
import { Swal } from '@aspro-cloud/miniapp-jssdk'

const swal = new Swal({
  view: 'info',
  title: 'Укажите количество',
  message: 'Пожалуйста, введите количество:',
  events: {
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
})

await swal.prompt({
  type: 'input'
})

Пример Modal

Вывод модального окна с произвольным URL и обработкой события закрытия:

ts
import { Modal } from '@aspro-cloud/miniapp-jssdk'

const modal = new Modal({
  title: 'ООО Рога и Копыта',
  url: '/_module/crm/view/account_view/2332?tab=account_info',
  options: {
    width: 'lg'
  },
  events: {
    onClose: () => console.log('Модальное окно закрыто пользователем'),
    onHide: () => console.log('Модальное окно скрыто')
  }
})

await modal.show()

Пример Sidepanel

Вывод боковой панели с произвольным URL и обработкой события закрытия:

ts
import { Sidepanel } from '@aspro-cloud/miniapp-jssdk'

const panel = new Sidepanel({
  title: 'Профиль пользователя',
  url: '/_module/company/view/member/433772?tab=contacts',
  options: {
    width: 'md'
  },
  events: {
    onClose: () => console.log('Боковая панель закрыта пользователем'),
    onHide: () => console.log('Боковая панель скрыта')
  }
})

await panel.show()

Опубликовано под лицензией MIT.