ContextQMD
Back to Daisyui

Toast

packages/docs/src/routes/(routes)/components/toast/+page.md

5.5.195.3 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~toast with alert inside

<div class="w-full h-64 relative"> <div class="toast absolute"> <div class="alert alert-info"> <span>New message arrived.</span> </div> </div> </div>
html
<div class="$$toast">
  <div class="$$alert $$alert-info">
    <span>New message arrived.</span>
  </div>
</div>

~toast-top toast-start

<div class="w-full h-64 relative"> <div class="toast toast-top toast-start absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-top $$toast-start">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-top toast-center

<div class="w-full h-64 relative"> <div class="toast toast-top toast-center absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-top $$toast-center">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-top toast-end

<div class="w-full h-64 relative"> <div class="toast toast-top toast-end absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-top $$toast-end">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-start toast-middle

<div class="w-full h-64 relative"> <div class="toast toast-start toast-middle absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-start $$toast-middle">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-center toast-middle

<div class="w-full h-64 relative"> <div class="toast toast-center toast-middle absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-center $$toast-middle">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-end toast-middle

<div class="w-full h-64 relative"> <div class="toast toast-end toast-middle absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-end $$toast-middle">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-start toast-bottom (default)

<div class="w-full h-64 relative"> <div class="toast toast-start absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-start">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-center toast-bottom (default)

<div class="w-full h-64 relative"> <div class="toast toast-center absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-center">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

~toast-end (default) toast-bottom (default)

<div class="w-full h-64 relative"> <div class="toast toast-end absolute"> <div class="alert alert-info"> <span>New mail arrived.</span> </div> <div class="alert alert-success"> <span>Message sent successfully.</span> </div> </div> </div>
html
<div class="$$toast $$toast-end">
  <div class="$$alert $$alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="$$alert $$alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>