Multi-Style Tailwind Components 23 exercises

Transcript

0:00 We want to provide more control over the Slide-in Animation we've just implemented and let users decide if the panel should come from the bottom, from the right, from the top, or from the left.

0:09 We've got four model toggles here, but right now only the from bottom is honoring the slide from prop. The from top also comes from the bottom, just like all the others do.

0:21 In our model components, you know the drill. There is now a new slide from prop, which can be set to top, right, bottom, or left.

0:29 We have a style object, slideFromClasses, that needs to be populated. You can see that it's a record, but it has an object shape of from and to classes. Your job is to fill this object with Tailwind classes to make everything behave like it should. Good luck!

Problem

Customizing Modal Slide-In Animation

Now we want to provide more control over the slide-in animation for the modal panel.

Users should be able to decide if the panel comes in from the bottom, the right, the top, or the left.

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1678997230/workshops/multi-style-tailwind-components/

Transcript

0:00 We want to provide more control over the Slide-in Animation we've just implemented and let users decide if the panel should come from the bottom, from the right, from the top, or from the left.

0:09 We've got four model toggles here, but right now only the from bottom is honoring the slide from prop. The from top also comes from the bottom, just like all the others do.

0:21 In our model components, you know the drill. There is now a new slide from prop, which can be set to top, right, bottom, or left.