edge-components

Toast: Expiration 

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

    </div>

</div>
 
<div>
  @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>

Toast

Doc : daisyui toast

Toast is a wrapper to stack elements, positioned on the corner of page.

Class name Type
toast Component Container element that sticks to the corner of page
toast-start responsive align horizontally to the left
toast-center responsive align horizontally to the center
toast-end responsive align horizontally to the right (default)
toast-top responsive align vertically to top
toast-middle responsive align vertically to middle
toast-bottom responsive align vertically to bottom