• Components
  • Chat

Chat

It was said that you would, destroy the Sith, not join them.
I loved you. 
@jrmc.chat()
  It was said that you would, destroy the Sith, not join them.
@end

@!jrmc.chat({ message: 'I loved you.'})
<div class="chat chat-start" >
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble ">
    I loved you.
  </div>
</div>

Chat with avatar

It was said that you would, destroy the Sith, not join them. 
@jrmc.chat()
  @slot('avatar')
    <img src="https://picsum.photos/192/192" />
  @end
  It was said that you would, destroy the Sith, not join them.
@end
<div class="chat chat-start" >    <div class="chat-image avatar">
      <div class="w-10 rounded-full">
            <img src="https://picsum.photos/192/192" />
      </div>
    </div>
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
</div>

Chat with header

Obi-Wan Kenobi
It was said that you would, destroy the Sith, not join them. 
@jrmc.chat()
  @slot('header')
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
  @end
  It was said that you would, destroy the Sith, not join them.
@end
<div class="chat chat-start" >    <div class="chat-header">
          Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
    </div>
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
</div>

Chat with footer

It was said that you would, destroy the Sith, not join them.
Delivered 
<div class="chat chat-start" >
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
    <div class="chat-footer opacity-50">
          Delivered
    </div></div>

Chat position

Obi-Wan Kenobi
It was said that you would, destroy the Sith, not join them.
Delivered 
@jrmc.chat({ position: 'end' })
  @slot('avatar')
    <img src="https://picsum.photos/192/192" />
  @end
  @slot('header')
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
  @end
  @slot('footer')
    Delivered
  @end
  It was said that you would, destroy the Sith, not join them.
@end
<div class="chat chat-end" position="end">    <div class="chat-image avatar">
      <div class="w-10 rounded-full">
            <img src="https://picsum.photos/192/192" />
      </div>
    </div>    <div class="chat-header">
          Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
    </div>
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
    <div class="chat-footer opacity-50">
          Delivered
    </div></div>

Chat color

Color primary
Color secondary
Color accent
Color info
Color success
Color warning
Color error 
@!jrmc.chat({ message: 'Color primary', class: 'chat-bubble-primary' })
@!jrmc.chat({ message: 'Color secondary', class: 'chat-bubble-secondary' })
@!jrmc.chat({ message: 'Color accent', class: 'chat-bubble-accent' })
@!jrmc.chat({ message: 'Color info', class: 'chat-bubble-info' })
@!jrmc.chat({ message: 'Color success', class: 'chat-bubble-success' })
@!jrmc.chat({ message: 'Color warning', class: 'chat-bubble-warning' })
@!jrmc.chat({ message: 'Color error', class: 'chat-bubble-error' })
<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-primary">
    Color primary
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-secondary">
    Color secondary
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-accent">
    Color accent
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-info">
    Color info
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-success">
    Color success
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-warning">
    Color warning
  </div>
</div>

<div class="chat chat-start" >
  <div class="chat-bubble chat-bubble-error">
    Color error
  </div>
</div>

Chat sample

Obi-Wan Kenobi
It was said that you would, destroy the Sith, not join them.
Delivered
Anakin
It was said that you would, destroy the Sith, not join them.
Seen at 12:46 
@jrmc.chat()
  @slot('avatar')
    <img src="https://picsum.photos/192/192" />
  @end
  @slot('header')
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
  @end
  @slot('footer')
    Delivered
  @end
  It was said that you would, destroy the Sith, not join them.
@end

@jrmc.chat({ position: 'end', class: 'chat-bubble-accent' })
  @slot('avatar')
    <img src="https://picsum.photos/192/192" />
  @end
  @slot('header')
    Anakin
    <time class="text-xs opacity-50">12:46</time>
  @end
  @slot('footer')
    Seen at 12:46
  @end
  It was said that you would, destroy the Sith, not join them.
@end
<div class="chat chat-start" >    <div class="chat-image avatar">
      <div class="w-10 rounded-full">
            <img src="https://picsum.photos/192/192" />
      </div>
    </div>    <div class="chat-header">
          Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
    </div>
  <div class="chat-bubble ">
      It was said that you would, destroy the Sith, not join them.
  </div>
    <div class="chat-footer opacity-50">
          Delivered
    </div></div>

<div class="chat chat-end" position="end">    <div class="chat-image avatar">
      <div class="w-10 rounded-full">
            <img src="https://picsum.photos/192/192" />
      </div>
    </div>    <div class="chat-header">
          Anakin
    <time class="text-xs opacity-50">12:46</time>
    </div>
  <div class="chat-bubble chat-bubble-accent">
      It was said that you would, destroy the Sith, not join them.
  </div>
    <div class="chat-footer opacity-50">
          Seen at 12:46
    </div></div>