🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Messagebar Svelte Component

Messagebar is a toolbar for usage with Messages

Messagebar Components

There are following components included:

  • Messagebar

Messagebar Props

NameTypeDefaultDescription
colorsobject
colors.bgIosstring'bg-white dark:bg-black'
colors.bgMaterialstring'bg-md-light-surface dark:bg-md-dark-surface'
colors.borderIosstring'border-[#c8c8cd] dark:border-white dark:border-opacity-30'
colors.inputBgIosstring'bg-transparent'
colors.inputBgMdstring'bg-md-light-surface-2 dark:bg-md-dark-surface-variant'
colors.placeholderIosstring'dark:placeholder-white dark:placeholder-opacity-40'
colors.placeholderMdstring'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
colors.toolbarIconIosstring'fill-primary dark:fill-md-dark-primary'
colors.toolbarIconMdstring'fill-black'
disabledbooleanundefined

Sets "disabled" textarea attribute

idstring

Messagebar id attribute

leftstring

Content of the Messagebar's "left" area

leftClassstring

Additional left styles

namestring

Messagebar name

outlinebooleanfalse

Renders outer hairlines (borders). If not specified, will be enabled for iOS theme

placeholderstring | number'Message'

Messagebar placeholder

rightstring

Content of the Messagebar's "right" area

rightClassstring

Additional right styles

sizestring | number

Value of textarea's native "size" attribute

styleCSSProperties

Additional messagebar classes

textareaIdstring

Textarea "id" attribute

valueany

Messagebar value

onChangefunction(e)

change event handler

onInputfunction(e)

input event handler

Messagebar Slots

NameDescription
left

Content of the Messagebar's "left" area

right

Content of the Messagebar's "right" area

Examples

Messages.svelte
<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'}
<Message
key={index}
type={message.type}
name={message.name}
text={message.text}
>
<img
slot="avatar"
alt="avatar"
class="w-8 h-8 rounded-full"
src={message.avatar}
/>
</Message>
{:else}
<Message
key={index}
type={message.type}
name={message.name}
text={message.text}
/>
{/if}
{/each}
</Messages>
<Messagebar
placeholder="Message"
value={messageText}
onInput={onMessageTextChange}
>
<Link toolbar iconOnly slot="left">
<Icon>
<CameraFill slot="ios" class="w-7 h-7" />
<MdCameraAlt
slot="material"
class="w-6 h-6 fill-black dark:fill-md-dark-on-surface"
/>
</Icon>
</Link>
<Link
toolbar
slot="right"
onClick={() => (isClickable ? handleSendClick() : undefined)}
style="opacity: {inputOpacity}; cursor: {isClickable
? 'pointer'
: 'default'}"
>
<Icon>
<ArrowUpCircleFill slot="ios" class="w-7 h-7" />
<MdSend
slot="material"
class="w-6 h-6 fill-black dark:fill-md-dark-on-surface"
/>
</Icon>
</Link>
</Messagebar>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.