developing-with-turbo-frames
Basics of developing with Turbo Frames in web applications. Activate when working on projects that utilize Turbo Frames for enhancing user experience through partial page updates, scoped navigation, and lazy loading of content within specific sections of a web page.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Basics of developing with Turbo Frames in web applications. Activate when working on projects that utilize Turbo Frames for enhancing user experience through partial page updates, scoped navigation, and lazy loading of content within specific sections of a web page.
How to use
Zainstaluj skill w swoim projekcie Laravel z Hotwired. Skill automatycznie aktywuje się, gdy rozpozna komponent x-turbo::frame lub element turbo-frame w kodzie.
Otwórz plik Blade i użyj komponentu x-turbo::frame do opakowania sekcji strony, którą chcesz uczynić niezależną. Przekaż prop :id z modelem, stringiem lub tablicą [model, prefix], aby wygenerować unikatowy identyfikator ramki.
Umieść linki i formularze wewnątrz ramki. Domyślnie będą one targetować tę samą ramkę — kliknięcie lub wysłanie aktualizuje tylko tę sekcję, nie całą stronę.
Dla leniwego ładowania treści dodaj atrybut src do ramki, aby załadować zawartość na żądanie zamiast podczas renderowania strony.
Jeśli chcesz zmienić URL przeglądarki po aktualizacji ramki, użyj atrybutu data-turbo-action="advance" lub "replace" na linku lub formularzu wewnątrz ramki.
W kontrolerze Laravel użyj wasFromTurboFrame() do wykrycia, czy żądanie pochodzi z ramki, i zwróć odpowiednią odpowiedź zawierającą zaktualizowany element turbo-frame z tym samym id.