Практические руководства

Стилизация сообщений

Вы можете задать сообщениям пользовательские стили и темлейты. В этом руководстве мы рассмотрим, как добиться следующего внешнего вида сообщений:

Прежде всего создайте новый класс и наследуйте его от класса по умолчанию (chat.views["messages"]):

class CustomMessages extends chat.views["messages"] {
  config() {
    let ui = super.config();
    // второй ряд это виджет 'comments' 
    let messages = ui.rows[1];
  }
}

Применение пользовательских стилей

Вы можете применить свои стили компоненту через свойство css. Убедитесь, что необходимый css класс описан заранее:

class CustomMessages extends chat.views["messages"] {
  config() {
    // ...
    // задаём css класс виджету 'comments'
    messages.css = "messages-list";
  }
}

Пользовательские темплейты

Сообщения Chat базируются на виджете comments, поэтому вы можете задать темплейт для них, используя свойство listItem.

class CustomMessages extends chat.views["messages"] {
  config() {
    // ...
    // определяем новый темплейт для элементов
    messages.listItem.template = (obj, common) => {
      let message;
      let avatar = common.templateAvatar(obj, common);
      // ...
      if (obj.user_id === this.app.config.user) {
        message = `<div class='message'>${user}${menu}${date}${text}</div>${avatar}`;
      }
      return message;
  }
 
  return ui; // returning styled ui
}

Чтобы изменения вступили в силу, не забудьте переопределить исходный класс с помощью свойства override:

webix.ui({
  view: "chat",
  override: new Map([
    [chat.views["messages"], CustomMessages]
  ]),
  // другие свойства
})

Related sample:  Chat: Styling Messages

Наверх