Message Bar

Messagebar Props

Name	Type	Default	Description
colors	object
colors.bgIos	string	'bg-white dark:bg-black'
colors.bgMaterial	string	'bg-md-light-surface dark:bg-md-dark-surface'
colors.borderIos	string	'border-[#c8c8cd] dark:border-white dark:border-opacity-30'
colors.inputBgIos	string	'bg-transparent'
colors.inputBgMd	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-variant'
colors.placeholderIos	string	'dark:placeholder-white dark:placeholder-opacity-40'
colors.placeholderMd	string	'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
colors.toolbarIconIos	string	'fill-primary dark:fill-md-dark-primary'
colors.toolbarIconMd	string	'fill-black'
component	string	'div'	Component's HTML Element
disabled	boolean	undefined	Sets "disabled" textarea attribute
id	string		Messagebar id attribute
left	string		Content of the Messagebar's "left" area
leftClass	string		Additional left styles
name	string		Messagebar name
outline	boolean	false	Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
placeholder	string | number	'Message'	Messagebar placeholder
right	string		Content of the Messagebar's "right" area
rightClass	string		Additional right styles
size	string | number		Value of textarea's native "size" attribute
style	CSSProperties		Additional messagebar classes
textareaId	string		Textarea "id" attribute
value	any		Messagebar value

Messagebar Events

Name	Type	Description
change	function(e)	change event handler
input	function(e)	input event handler

Messagebar Slots

Name	Description
left	Content of the Messagebar's "left" area
right	Content of the Messagebar's "right" area

Examples

Vue

<template>
  <i-page class="ios:bg-white ios:dark:bg-black messages-page">
    <i-navbar title="Messages" />
    <i-messages>
      <i-messages-title
        ><b>{{ currentDay }}</b
        >, {{ currentTime }}</i-messages-title
      >
      <i-message
        v-for="(message, index) in messagesData"
        :key="index"
        :type="message.type"
        :name="message.name"
        :text="message.text"
      >
        <template v-if="message.type === 'received'" #avatar>
          <img
            alt="avatar"
            class="w-8 h-8 rounded-full"
            :src="message.avatar"
          />
        </template>
      </i-message>
    </i-messages>
    <i-messagebar
      placeholder="Message"
      :value="messageText"
      @input="onMessageTextChange"
    >
      <template #left>
        <i-link toolbar icon-only>
          <i-icon>
            <template #ios><CameraFill class="w-7 h-7" /></template>
            <template #material>
              <MdCameraAlt
                class="w-6 h-6 fill-black dark:fill-md-dark-on-surface"
              />
            </template>
          </i-icon>
        </i-link>
      </template>
      <template #right>
        <i-link
          toolbar
          :style="{
            opacity: inputOpacity,
            cursor: isClickable ? 'pointer' : 'default',
          }"
          @click="onClick"
        >
          <i-icon>
            <template #ios><ArrowUpCircleFill class="w-7 h-7" /></template>
            <template #material>
              <MdSend class="w-6 h-6 fill-black dark:fill-md-dark-on-surface" />
            </template>
          </i-icon>
        </i-link>
      </template>
    </i-messagebar>
  </i-page>
</template>
<script>
  import { ref, onMounted, watch, nextTick } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iMessagebar,
    iMessages,
    iMessage,
    iMessagesTitle,
    iIcon,
    iLink,
  } from 'ina-ui/vue';
  import { CameraFill, ArrowUpCircleFill } from 'framework7-icons/vue';
  import MdCameraAlt from '../components/MdCameraAlt.vue';
  import MdSend from '../components/MdSend.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iMessagebar,
      iMessages,
      iMessage,
      iMessagesTitle,
      iIcon,
      iLink,

      CameraFill,
      ArrowUpCircleFill,
      MdCameraAlt,
      MdSend,
    },
    setup() {
      const messageText = ref('');
      const isClickable = ref(false);
      const inputOpacity = ref(0.3);

      const onMessageTextChange = (e) => {
        messageText.value = e.target.value;
        isClickable.value = messageText.value.trim().length > 0;
      };

      watch(messageText, (newValue) => {
        inputOpacity.value = newValue ? 1 : 0.3;
      });

      const messagesData = ref([
        {
          type: 'sent',
          text: 'Hi, iate',
        },
        {
          type: 'sent',
          text: 'How are you?',
        },
        {
                type: 'received',
          text: 'Hi, I am good!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'Hi there, I am also fine, thanks! And how are you?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
        {
          type: 'sent',
          text: 'Hey, Blue Ninja! Glad to see you ;)',
        },
        {
          type: 'sent',
          text: 'How do you feel about going to the movies today?',
        },
        {
                type: 'received',
          text: ' Oh, great idea!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
                type: 'received',
          text: ' What cinema are we going to?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'Great. And what movie?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'What time?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
      ]);
      const scrollToBottom = (animate = true) => {
        const pageEl = document.querySelector('.messages-page');
        pageEl.scrollTo({
          top: pageEl.scrollHeight - pageEl.offsetHeight,
          behavior: animate ? 'smooth' : 'auto',
        });
      };
      onMounted(() => scrollToBottom(false));
      watch(messagesData, () => {
        scrollToBottom();
      });

      const handleSendClick = () => {
        const text = messageText.value.replace(/
/g, '<br>').trim();
        const type = 'sent';
        const messagesToSend = [];

        if (text.length) {
          messagesToSend.push({
            text,
            type,
          });

          console.log(messagesToSend);
        }

        if (messagesToSend.length === 0) {
          return;
        }

        messagesData.value.push(...messagesToSend);
        messageText.value = '';

        nextTick(() => {
          scrollToBottom();
        });
      };

      const onClick = () => {
        if (isClickable.value) {
          handleSendClick();
        }
      };

      const dateFormatter = new Intl.DateTimeFormat('en-US', {
        weekday: 'long',
        month: 'short',
        day: 'numeric',
      });

      const timeFormatter = new Intl.DateTimeFormat('en-US', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
      });

      const currentDate = new Date();
      const currentDay = dateFormatter.format(currentDate);
      const currentTime = timeFormatter.format(currentDate);

      return {
        onClick,
        messageText,
        messagesData,
        onMessageTextChange,
        handleSendClick,
        inputOpacity,
        isClickable,
        currentDay,
        currentTime,
      };
    },
  };
</script>

React