-
-
Notifications
You must be signed in to change notification settings - Fork 133
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Alert toast component from README doesn't have the transition effect #169
Comments
Tried to make a PR but couldn't, I'm guessing new PRs are blocked in the mean time. In case you are as rookie as me: <div class="fixed inset-x-0 top-0 flex items-end justify-right px-4 py-6 sm:p-6 justify-end z-30 pointer-events-none">
<div data-controller="alert" data-alert-show-class="translate-x-0 opacity-100" data-alert-hide-class="translate-x-full opacity-0" class="max-w-sm w-full shadow-lg px-4 py-3 rounded relative bg-green-400 border-l-4 border-green-700 text-white pointer-events-auto transition translate-x-full transform ease-in-out duration-1000 opacity-0">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
Stimulus is the JS of the future!
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> This code snippet will get you the Alert from the README, plus get you the transition effect of the toast component |
I believe the data attributes got changed to the transition interface: // data-transition-enter="transition-all ease-in-out duration-300"
// data-transition-enter-from="bg-opacity-0"
// data-transition-enter-to="bg-opacity-80"
// data-transition-leave="transition-all ease-in-out duration-300"
// data-transition-leave-from="bg-opacity-80"
// data-transition-leave-to="bg-opacity-0" |
Yep, v4 was released with a standardize transition interface like @dillonhafer showed. 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This code snippet does not include the Tailwind classes needed to get the slide in/out effect in the alert toast component
The text was updated successfully, but these errors were encountered: