xiaoluoboding / vue-sonner

🔔 An opinionated toast component for Vue.
https://vue-sonner.robertshaw.id
MIT License
889 stars 46 forks source link

fix: fixed the #30 problem #47

Closed Lexuil closed 7 months ago

Lexuil commented 8 months ago
<Toaster
  position="bottom-center"
  theme="dark"
  :toast-options="{
    className: 'my-toaster-class',
    descriptionClassName: 'my-toaster-description-class'
  }"
/>
toast.success('Product added', {
  description: 'You have added a product to the cart\nThank you!',
  descriptionClassName: 'whitespace-pre-line',
  className: 'my-toast-class'
})
<li
  aria-live="polite"
  aria-atomic=""
  role="status"
  tabindex="0"
  data-sonner-toast=""
  class="my-toaster-class my-toast-class"
  data-styled="true"
  data-mounted="true"
  data-promise="false"
  data-removed="false"
  data-visible="true"
  data-y-position="bottom"
  data-x-position="center"
  data-index="0"
  data-front="true"
  data-swiping="true"
  data-type="success"
  data-invert="false"
  data-swipe-out="false"
  data-expanded="false"
  gap="14"
  style="
    --index: 0;
    --toasts-before: 0;
    --z-index: 1;
    --offset: 0px;
    --initial-height: 91.875px;
    --swipe-amount: 0px;
  "
>
  <!---->
  <div data-icon="">
    <!----><svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      height="20"
      width="20"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
        clip-rule="evenodd"
      ></path>
    </svg>
  </div>
  <div data-content="">
    <div data-title="">Product added</div>
    <div
      data-description=""
      class="my-toaster-description-class whitespace-pre-line"
    >
      You have added a product to the cart
      Thank you!
    </div>
  </div>
  <!----><!---->
</li>

image

vercel[bot] commented 8 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
vue-sonner ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 9, 2024 6:07am
xiaoluoboding commented 7 months ago

@Lexuil Sorry, We are updating vue-sonner to align with sonner, so the pull request is now outdated.