Build a Starter Kit With Inertia and Fortify

Sign in Get started

This episode is for members only

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Already a member? Sign in to continue

Playing

17. Styling and transitioning the toast

Episodes

0%

Your progress

Total: 5h 21m
Played: 0m
Remaining: 5h 21m

Join or sign in to track your progress

01. Setting up

01. Introduction and demo

02. Installing Inertia from scratch

03. Installing Tailwind

04. Layout and navigation

05. Installing Fortify

06. Exposing routes with Ziggy

07. Global modals

02. Authentication

08. Registering users

09. Sharing the authenticated user globally

11. Signing out

12. Redirecting to the intended location

03. Feature management

13. Adding feature management checks

14. Client-side feature management

04. Building a toast feature

15. Basic flash messages with Inertia

16. Building a toast plugin

17. Styling and transitioning the toast

05. Profile management

18. Creating an account layout

19. Detecting and highlighting current pages

20. Updating profile details

21. Profile photo output and swapping

22. Storing a profile photo

23. Changing user passwords

24. Account feature toggling

06. Password confirmation

25. Using a modal for password confirmation

26. Confirming user passwords

07. Two factor authentication

27. Building the two factor modal

28. Showing a QR code

29. Enabling two factor authentication

30. Disabling two factor authentication

31. Showing recovery codes

32. Fixing password confirm redirect

33. Fixing password confirm flow when enabling

34. Challenging the user when signing in

08. Email verification

35. Mail setup and forcing email verification

36. Adding a verification notice

37. Resending the verification email

09. Account recovery

38. Sending a recovery email

39. Setting a new password

10. Fixes and improvements

40. Closing the user navigation on click

Transcript

00:00

Okay so we've got all of the functionality that we need from our little Toast plugin that we've built,

00:04

now let's style this up so it looks a little bit better and then we're going to add a transition route from headless UI which we've already used to transition this down and back up again nicely. Okay so let's go ahead and get rid of this V on click because that's going to be a little bit different as we get to it and let's style this up, now I'm going to get rid of V active as well

00:25

and in here I'm just going to put this is a Toast message just so we can style this up. Okay so let's go and set this to a fixed position, we'll set this at the top of the page and we'll set this to a left of half and then we'll do a minus translate on this on the x-axis to half that's basically going to put this in the middle, so let's just add a quick background to this just

00:50

to check and there we go it's right in the center of the page, so the next thing to do is set a nicer background so let's set this to a blue 500 and we'll set slight opacity as well so we can see behind this and then we'll go ahead and add some padding on the x-axis to this, we will set some text color on this so let's set this to white and let's set a margin on the top of as well so it

01:14

sits away from the top, we'll also set a z-index on this but with tailwind we'll do this dynamically so we get a higher value the max in tailwind is 50 but by doing this we can just create our own value for our z-index, so finally let's just set the text to small, let's take a look at this and it doesn't look great so let's add some padding on the y-axis as well and let's set that to three,

01:40

okay I think that looks okay for now great, right so now that we've got this we want to go ahead and transition this so we can again bring in the transition root stuff that we saw a little bit earlier so we're going to pull that in from headless ui so transition root and we'll bring in a transition child as well and that's from headless ui and view, great so this whole thing

02:09

is going to be wrapped in a transition root so let's pull that in here and then we're going to have a transition child inside of here which will be responsible for the transition so the transition root remember we need to enable based on a boolean and we know what that is it's whether this is active or not so in here we can set this as a template because we just need this as a wrapper

02:35

and then we can set show to active so that will now display this if we have an active toast message so let's go ahead and sign in and just check that this appears and it does and obviously that's going to disappear when show gets set back to false based on our timeout and it just disappears now all we really need to do is within this transition child go ahead and set the

02:59

transitions on this so we're going to have an enter we're going to have an enter from we'll have a leave in here and we'll have a leave too so we're skipping the other ones because they're just going to be exactly the same thing so for enter we'll set the duration to 200 and we'll say ease in out so set a slightly different one we'll do the same for leave as well and enter

03:21

from we'll just do a translate on the y-axis to push this up full so this will just basically hide this above the top of the page and we'll set an opacity to zero and then when we enter two that will be the default stars that we have here so we don't really need to have an enter two because it will just inherit what we have here for leave we'll go ahead and say exactly

03:44

the same thing so let's do this in here and then when this leaves it will go from opacity 100 down to zero and it will push it back up the page so we could add the leave from and the end to two but we can leave these out okay let's just try this out so let's go ahead and sign out again sign back in and let's see what we've got there we go it pops down with opacity and then it should just

04:08

pop back up again and slightly fade out when it's done great so that is our template done and our transitions in there there are tons of ways to do transitions but i find adding in these transition elements from headless ui the easiest to do and that is pretty much it for our toast we can now use this pretty much anywhere in our app that we want to so when we update our profile

04:30

details later we can override the response within fortify pass that toast message down to inertia that will get picked up with our plugin our plugin will trigger and it will show our toast now just before we go i'm going to go over to our toast plugin here and i'm going to set this down to a more sensible value like a couple of seconds and there we go that's our toast feature completely built

Episode summary

In this episode, we focus on making our custom Toast component actually look nice and behave smoothly. Up to this point, the toast was functional, but now it's time to dive into styling and animating it.

First, we revamp the toast's markup and use Tailwind CSS to position it at the top center of the page. We add some background color, text color, margins, padding, and even bump up the z-index to make sure it floats above everything else. The result is a visually appealing notification that feels right at home in any modern UI.

Once styled, we tackle transitions by using Headless UI's TransitionRoot and TransitionChild components. We set up fade and slide effects for both entering and leaving, so the toast smoothly drops down when it appears and glides back up while fading out when it disappears. You’ll see how the transition props work in practice, and how easy Headless UI makes the whole process.

By the end of this video, our toast looks great and behaves elegantly, ready to be reused anywhere in our app. We even tweak the display duration for a better user experience. From here, whether it’s a success message, error, or any quick notification, our toast component is good to go!

Episode discussion

No comments, yet. Be the first!