Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
25.11 Pointing Tailwind at your Component PHP Classes
- Though, one detail. Tailwind scans our source files, finds all the Tailwind classes we're using and includes those in the final CSS file. And because we're now including classes inside PHP, we need to make sure Tailwind sees those. In tailwind.config.js, on top, I'll paste in one more line to make it scan our Twig component PHP classes Changing the Component Tag Name - Ok, we're nearly done for today - but I want to celebrate and use the new component in one more spot: on the voyage index page, for the "New Voyage" button. Open index.html.twig... change this to a <twig:Button>... then we can remove most of these classes. The bold is specific to this spot I think When we refresh... it renders! Though... when I click... nothing happens! You probably saw why: this is now a button, not an a tag. That's okay: we can make our component just a bit more flexible. In Button.php, add another property: string $tag defaulting to button Then in the template, use {{ tag }} for the starting tag and the ending tag Finish in index.html.twig: pass tag="a" Now over here... when we click... got it! That's it! I hope you love Twig components as much as I do. But they can do even more! I didn't tell you how you can prefix any attribute with : to pass dynamic Twig variables or expressions to a prop. We also didn't discuss that the component PHP classes are services. Yea, you can add an __construct() function, autowire other services, like VoyageRepository, then use those to provide data to your template... making the entire component standalone and self-sufficient. That's one of my favorite features. Tomorrow we're going to keep leveraging Twig components to create a modal component... then see just how easily we can use modals whenever we want.
- Loading branch information