Skip to content

Commit 4f4c385

Browse files
authored
Merge pull request #236 from bensheldon/refresh-attributes
Document `refresh` action attributes `method=` and `scroll=`
2 parents 56f1293 + f54ad43 commit 4f4c385

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

_source/handbook/03_page_refreshes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ There is a new [turbo stream action](/handbook/streams.html) called `refresh` th
6666
<turbo-stream action="refresh"></turbo-stream>
6767
```
6868

69+
Refresh behavior can be specified using the `method` and `scroll` attributes:
70+
71+
```html
72+
<turbo-stream action="refresh" method="morph" scroll="preserve"></turbo-stream>
73+
```
74+
75+
The `method` attribute can be `morph` or `replace`, and the `scroll` attribute can be `preserve` or `reset`.
76+
6977
Server-side frameworks can leverage these streams to offer a simple but powerful broadcasting model: the server broadcasts a single general signal, and pages smoothly refresh with morphing.
7078

7179
You can see how the [`turbo-rails`](https://github.com/hotwired/turbo-rails) gem does it for Rails:

_source/reference/streams.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,17 @@ Inserts the content within the template tag after the element designated by the
113113

114114
### Refresh
115115

116-
Initiates a [Page Refresh](/handbook/page_refreshes) to render new content with
117-
morphing.
116+
Initiates a [Page Refresh](/handbook/page_refreshes) to render new content.
118117

119118
```html
120119
<!-- without `[request-id]` -->
121120
<turbo-stream action="refresh"></turbo-stream>
122121

123122
<!-- debounced with `[request-id]` -->
124123
<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
124+
125+
<!-- refresh behavior with `[method]` and `[scroll]` -->
126+
<turbo-stream action="refresh" method="morph" scroll="preserve"></turbo-stream>
125127
```
126128

127129
## Targeting Multiple Elements

0 commit comments

Comments
 (0)