Messagebar is a toolbar for usage with Messages
There are following components included:
Messagebar
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' | |
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 | |
onChange | function(e) |
| |
onInput | function(e) |
|
Name | Description |
---|---|
left | Content of the Messagebar's "left" area |
right | Content of the Messagebar's "right" area |
<script>import {Page,Navbar,NavbarBackLink,Messagebar,Messages,Message,MessagesTitle,Icon,Link,} from 'konsta/svelte';import { onMount, afterUpdate } from 'svelte';import { CameraFill, ArrowUpCircleFill } from 'framework7-icons/svelte';import MdCameraAlt from '../components/MdCameraAlt.svelte';import MdSend from '../components/MdSend.svelte';let messageText = '';let isClickable;let inputOpacity = 0.3;const onMessageTextChange = (e) => {messageText = e.target.value;isClickable = messageText.trim().length > 0;inputOpacity = messageText ? 1 : 0.3;};let messagesData = [{type: 'sent',text: 'Hi, Kate',},{type: 'sent',text: 'How are you?',},{name: 'Kate',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?',},{name: 'Kate',type: 'received',text: ' Oh, great idea!',avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',},{name: 'Kate',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',},];let shouldScrollMessages = false;const scrollToBottom = (animate = true) => {const pageEl = document.querySelector('.messages-page');pageEl.scrollTo({top: pageEl.scrollHeight - pageEl.offsetHeight,behavior: animate ? 'smooth' : 'auto',});};onMount(() => {scrollToBottom(false);});afterUpdate(() => {if (shouldScrollMessages) {scrollToBottom();shouldScrollMessages = false;}});const handleSendClick = () => {const text = messageText.replace(//g, '<br>').trim();const type = 'sent';if (text.length) {const messageToSend = { text, type };messagesData = [...messagesData, messageToSend];messageText = '';inputOpacity = 0.3;shouldScrollMessages = true;}};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);</script><Page class="ios:bg-white ios:dark:bg-black messages-page"><Navbar title="Messages" /><Messages><MessagesTitle><b>{currentDay}</b> , {currentTime}</MessagesTitle>{#each messagesData as message, index (index)}{#if message.type === 'received'}<Messagekey={index}type={message.type}name={message.name}text={message.text}><imgslot="avatar"alt="avatar"class="w-8 h-8 rounded-full"src={message.avatar}/></Message>{:else}<Messagekey={index}type={message.type}name={message.name}text={message.text}/>{/if}{/each}</Messages><Messagebarplaceholder="Message"value={messageText}onInput={onMessageTextChange}><Link toolbar iconOnly slot="left"><Icon><CameraFill slot="ios" class="w-7 h-7" /><MdCameraAltslot="material"class="w-6 h-6 fill-black dark:fill-md-dark-on-surface"/></Icon></Link><Linktoolbarslot="right"onClick={() => (isClickable ? handleSendClick() : undefined)}style="opacity: {inputOpacity}; cursor: {isClickable? 'pointer': 'default'}"><Icon><ArrowUpCircleFill slot="ios" class="w-7 h-7" /><MdSendslot="material"class="w-6 h-6 fill-black dark:fill-md-dark-on-surface"/></Icon></Link></Messagebar></Page>