Toast: Top And End

Ready

HTML
View
Info
Notes


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

</div>


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

Handle: @toast--top-and-end
Variants (10): Default , Top And Start , Top And Center , Top And End , Start And Middle , Center And Middle , End And Middle , Start And Bottom , Center And Bottom Default , Expiration
Preview:
- With layout
- Component only
Filesystem Path: fractal/components/02-display/toast/04-toast--top-and-end.edge

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