Начало работы

Здесь описывается процесс установки библиотеки и краткое руководство для последующего использования

Требования

• Node.js
• Текстовый редактор и интерфейс командной строки (например, VSCode)
• Браузер, поддерживающий JS

Установка

Для установки библиотеки введите в командной строке:

npm install @mobilon-dev/chotto

Применение в проекте

Библиотека Chotto предоставляет следующую структуру для построения чата:

.
└─ Container
   └─ Layout
      ├─ колонка N 
      ├─ ...
      └─ колонка M

Основными элементами структуры являются:

• container (контейнер, оборачивающий всё приложение)

  • base - статичный, встраиваемый в имеющуюся страницу. Наполнение контейнера осуществляется через слот #default.
  • float - в виде диалогового окна. Наполнение контейнера осуществляется через слот #default, также существует возможность добавить триггеры для пользовательских событий в заголовке окна через слот #controls.

• layout (разметка контейнера по колонкам)

  • feed разметка - одна колонка на весь контейнер. Колонка доступна через слот #default.
  • base разметка - две колонки, занимающие пространство 30%/70%. Колонки доступны через слоты #first-col, #second-col.
  • extended разметка, включая подвид adaptive extended - три колонки, занимающие пространство min/min/70%. Колонки доступны через слоты #first-col, #second-col, #third-col.

Может пригодиться

Существует также подвид layout - chat wrapper. В случае, если вашему чату необходимо обеспечить вызов дополнительной сайд-панели с возможной информацией, действиями и прочим, вы можете применить chat wrapper. Его можно разместить в одной из колонок.

Для размещения элементов чата применяется слот #default, для размещения элементов сайд-панели - слот #chatpanel