Let's Build with Hotwire and Rails - Turbo Modals
Welcome to a brand new "Let's Build" tutorial series where I use Rails in the combination of hotwired.dev (hotwired.dev) to create components with little to no JavaScript.
If you're brand new to Turbo, I recommend reading [another post titled "Digging into Turbo with Ruby on Rails 7"](web-crunch.com/posts/digging-..., where I cover what it is and how it works.
In this tutorial, we'll add modals to a basic Rails application with the help of Turbo.
👉 Continue reading the written guide here:
web-crunch.com/posts/hotwire-...
======
Bookmarks
00:00 - Introductions
01:54 - Demo walkthrough
04:00 - Create a new app
05:14 - Adding dependencies
06:08 - Add Post scaffold
06:50 - Set root route
07:40 - Boot server for the first time
08:12 - Adjust application layout design
10:23 - Turbofied views
16:06 - Designing the modal form
18:52 - Add plugins to Tailwind configuration
19:29 - First trial run of a modal
21:23 - Add custom animations with Tailwind
======
Hi, I am Andy Leverenz, and I am a product designer and developer. For fun, I design, code, and write. Check out my blog, Web-Crunch web-crunch.com, where I publish design and development tutorials with the occasional vlog.
♥️ Check out my new project Rails UI
railsui.com
♥️ Sponsor me on GitHub
github.com/sponsors/justalever
☕️ Keep me awake. Buy me a coffee
www.buymeacoffee.com/webcrunch
📰 One-Click Subscribe:
kzread.info...
💻 Previously published at:
web-crunch.com/posts/how-to-u...
💎Ruby on Rails Course: HELLO RAILS
hellorails.io
💻 Check out the blog:
web-crunch.com
🦄 Check out my personal site:
justalever.com
🚀 Links:
Weekly Newsletter: digest.web-crunch.com/
Twitter: / webcrunchblog
Github: github.com/justalever
📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
web-crunch.com/products/luxd
📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
web-crunch.com/products/ptt
Пікірлер: 10
Hey everyone! I'm excited to kick off this series dedicated to Hotwire Turbo. If you have suggestions for topics to cover, I'm all ears! One quick note: I forgot to add a turbo_frame_tag around the "Edit" link on the posts#show view after publishing this one. You'll want to mimic what we did on the index view, and it should work 👍 github.com/justalever/turbo_modals_demo/blob/cb8f20fd4c34b52366b447b9996fdd4b316a2308/app/views/posts/show.html.erb#L6
Thankful 🎉
Great! Thanks, looking forward to Rails UI too!
Thanks a lot for sharing this valuable content! is there a way to achieve that with no npm/yarn using only propshaft and importmap on a brand new rails 7 app?
Thanks for sharing this. One thing I would like to see is actually using also turbo streams to avoid the reload of the page, is that something we can also see later?
Good Bro : )
Nice one, a bit excessive on the styling part, tho. How would you go about with turbo frames when in update you also have a delete button?
Thank you for the informative tutorial! Can you provide a tutorial on how to display a post using a modal, please?
Bro can you make a detailed video on Hotwire for beginners?
@Webcrunch
Жыл бұрын
Something more comprehensive It's actually on my list 👍 here's one I did a while back on Turbo specifically kzread.info/dash/bejne/YneHqdWBnsbPYqw.html