Zeen Component Library

# ZeenChat

Компонент ZeenChat

# Примеры:

  • Демонстрация компонента при десктоп/таблет размер

    Чат
    Чат
    Вопрос Спикеру

    Admin Max

    20:14

    Сообщение в чате 1

    Константин Накаленко

    20:15

    Сообщение в чате 2

    igor

    20:18

    Сообщение в чате 3

    Admin Max

    20:14

    Сообщение в чате 1

    oleg

    20:15

    Сообщение в чате 2

    igor

    20:18

    Сообщение в чате 3

    Admin Max

    20:14

    Admin Max

    20:14

    igor

    А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А...

    прислал картинку

    img

    igor

    20:18

    youtube.com/watch?v=TWTfhyvzTx0 я юзер и у меня не работает ссылка

  • Демонстрация компонента при мобильных(маленьких) размер

    Чат
    Чат
    Вопрос Спикеру

    Admin Max

    20:14

    Сообщение в чате 1

    Константин Накаленко

    20:15

    Сообщение в чате 2

    igor

    20:18

    Сообщение в чате 3

    Admin Max

    20:14

    Сообщение в чате 1

    oleg

    20:15

    Сообщение в чате 2

    igor

    20:18

    Сообщение в чате 3

    Admin Max

    20:14

    Admin Max

    20:14

    igor

    А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А картинка? А...

    прислал картинку

    img

    igor

    20:18

    youtube.com/watch?v=TWTfhyvzTx0 я юзер и у меня не работает ссылка

# Props

Название Тип Обязательный По умолчанию
chatData Array - []
speakerData Array - []
tabOptions Array - []
speakerBtnText String - 'Задать вопрос'

# Slots

Название Описание
#tab-name контент кнопки таба
#tab-content-chat контент чата
#chat-footer футер компонента чата
#tab-content-questions контент - вопрос спикера

# примеры props

chatData: [
  {
    id: 1,
    text: "Сообщение в чате 1",
    is_reply: true,
    reply_text: "Ответ на сообщение",
    reply_id: 2,
    time: "20:14",
    user: null,
    admin: {
      id: 100,
      name: "admin",
      email: "admin@example.com",
      picture: null
    }
  },
  {
    id: 2,
    text: "Сообщение в чате 2",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:15",
    user: {
      id: 6,
      name: "oleg",
      email: "oleg@example.com",
      picture: null,
      code: "7182312421"
    },
    admin: null
  },
  {
    id: 3,
    text: "Сообщение в чате 3",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:18",
    user: {
      id: 7,
      name: "igor",
      email: "igor@example.com",
      picture: null,
      code: "3918239012"
    },
    admin: null
  },
  {
    id: 4,
    text: "Сообщение в чате 1",
    is_reply: true,
    reply_text: "Ответ на сообщение",
    reply_id: 2,
    time: "20:14",
    user: null,
    admin: {
      id: 100,
      name: "admin",
      email: "admin@example.com",
      picture: null
    }
  },
  {
    id: 5,
    text: "Сообщение в чате 2",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:15",
    user: {
      id: 6,
      name: "oleg",
      email: "oleg@example.com",
      picture: null,
      code: "7182312421"
    },
    admin: null
  },
  {
    id: 6,
    text: "Сообщение в чате 3",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:18",
    user: {
      id: 7,
      name: "igor",
      email: "igor@example.com",
      picture: null,
      code: "3918239012"
    },
    admin: null
  },
  {
    id: 7,
    text: "Сообщение в чате 1",
    is_reply: true,
    reply_text: "Ответ на сообщение",
    reply_id: 2,
    time: "20:14",
    user: null,
    admin: {
      id: 100,
      name: "admin",
      email: "admin@example.com",
      picture: null
    }
  },
  {
    id: 8,
    text: "Сообщение в чате 2",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:15",
    user: {
      id: 6,
      name: "oleg",
      email: "oleg@example.com",
      picture: null,
      code: "7182312421"
    },
    admin: null
  },
  {
    id: 9,
    text: "Сообщение в чате 3",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:18",
    user: {
      id: 7,
      name: "igor",
      email: "igor@example.com",
      picture: null,
      code: "3918239012"
    },
    admin: null
  }
],
tabOptions: [
  {
    id: 'chat',
    data:{
      title: 'Чат',
      isAvailabel: true,
      emptyText: "Будьте первыми в чате",
    },
  },
  {
    id: 'questions',
    data:{
      title: 'Вопрос Спикеру',
      isAvailabel: true,
      emptyText: "Задайте вопрос спикеру, будьте первым"
    },
  },
],
speakerData: [
  {
    id: 1,
    text: "Сообщение в чате 1",
    is_reply: true,
    reply_text: "Ответ на сообщение",
    reply_id: 2,
    time: "20:14",
    user: null,
    admin: {
      id: 100,
      name: "admin",
      email: "admin@example.com",
      picture: null
    }
  },
  {
    id: 2,
    text: "Сообщение в чате 2",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:15",
    user: {
      id: 6,
      name: "oleg",
      email: "oleg@example.com",
      picture: null,
      code: "7182312421"
    },
    admin: null
  },
  {
    id: 3,
    text: "Сообщение в чате 3",
    is_reply: false,
    reply_text: null,
    reply_id: null,
    time: "20:18",
    user: {
      id: 7,
      name: "igor",
      email: "igor@example.com",
      picture: null,
      code: "3918239012"
    },
    admin: null
  },
],

← ZeenCheckbox →