• Components
  • Toast

Toast

New message arrived.
@jrmc.toast()
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
@end
<div
  
  class="toast"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


</div>

Toast top and start

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-top toast-start' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-top toast-start"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast top and center

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-top toast-center' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-top toast-center"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast top and end

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-top toast-end' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-top toast-end"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast start and middle

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-start toast-middle' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-start toast-middle"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast center and middle

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-center toast-middle' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-center toast-middle"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast end and middle

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-end toast-middle' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-end toast-middle"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast start and bottom

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-start toast-bottom' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-start toast-bottom"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast center and bottom

New message arrived.
Message sent successfully.
@jrmc.toast({ class: 'toast-center' })
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
  @!jrmc.alert.success({ text: 'Message sent successfully.', icon: 'false' })
@end
<div
  
  class="toast toast-center"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


<div class="alert alert-success" >
      <span>Message sent successfully.</span></div>


</div>

Toast expiration

New message arrived.
@jrmc.toast({
  'class': 'toast-top toast-end',
  'x-data': '{ open: true }',
  'x-show': 'open',
  'x-transition.duration.500ms': '',
  'x-init': 'setTimeout(() => open = false, 5000);setTimeout(() => $el.remove(), 6000)',
})
  @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
@end
<div
  x-data="{ open: true }" x-show="open" x-init="setTimeout(() => open = false, 5000);setTimeout(() => $el.remove(), 6000)"
  class="toast toast-top toast-end"
>
  <div class="alert alert-info" >
      <span>New message arrived.</span></div>


</div>