Skip to content

Commit af4484e

Browse files
cdervcderv
committed
Move Scroll View mode doc up in the page
1 parent 8aae114 commit af4484e

File tree

1 file changed

+66
-66
lines changed

1 file changed

+66
-66
lines changed

‎docs/presentations/revealjs/presenting.qmd‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,72 @@ Overview mode provides an alternate view that shows you a thumbnail for each sli
110110
You can enable Overview Mode by pressing the {{< kbd O >}} key.
111111
:::
112112

113+
## Scroll View
114+
115+
{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}}
116+
117+
Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile).
118+
119+
### Entering Scroll View {#scroll-view-toggle}
120+
121+
To enter Scroll View , do one the following:
122+
123+
- Toggle into Scroll View using the {{< kbd R >}} key
124+
125+
- Toggle into Scroll View using the [Navigation Menu](#navigation-menu)
126+
127+
- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll`
128+
129+
You can easily toggle out of Scroll View by the same action.
130+
131+
### Default View Mode
132+
133+
Scroll View can be set as the default mode for the presentation using the `scroll-view` option:
134+
135+
``` yaml
136+
format:
137+
revealjs:
138+
scroll-view: true
139+
```
140+
141+
### Scroll View Options
142+
143+
Scroll View can be configured using the following options under `scroll-view`:
144+
145+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
146+
| Option | Description |
147+
+====================+===========================================================================================================================================================================================================================================================+
148+
| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. |
149+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
150+
| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. |
151+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
152+
| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. |
153+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
154+
| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. |
155+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
156+
| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to |
157+
| | |
158+
| | ``` yaml |
159+
| | scroll-view: |
160+
| | activate: true |
161+
| | ``` |
162+
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
163+
164+
For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens:
165+
166+
``` yaml
167+
---
168+
title: "Presentation"
169+
format:
170+
revealjs:
171+
scroll-view:
172+
layout: compact
173+
snap: proximity
174+
progress: true
175+
activation-width: 0
176+
---
177+
```
178+
113179
## Slide Zoom
114180

115181
Hold down the {{< kbd Alt linux=Ctrl >}} key and click on any element to zoom towards it. Try zooming in on one of these images:
@@ -544,72 +610,6 @@ format:
544610

545611
Note that the `secret` value will be included in only the speaker version of the presentation.
546612

547-
## Scroll View
548-
549-
{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}}
550-
551-
Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile).
552-
553-
### Entering Scroll View {#scroll-view-toggle}
554-
555-
To enter Scroll View , do one the following:
556-
557-
- Toggle into Scroll View using the {{< kbd R >}} key
558-
559-
- Toggle into Scroll View using the [Navigation Menu](#navigation-menu)
560-
561-
- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll`
562-
563-
You can easily toggle out of Scroll View by the same action.
564-
565-
### Default View Mode
566-
567-
Scroll View can be set as the default mode for the presentation using the `scroll-view` option:
568-
569-
``` yaml
570-
format:
571-
revealjs:
572-
scroll-view: true
573-
```
574-
575-
### Scroll View Options
576-
577-
Scroll View can be configured using the following options under `scroll-view`:
578-
579-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
580-
| Option | Description |
581-
+====================+===========================================================================================================================================================================================================================================================+
582-
| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. |
583-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
584-
| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. |
585-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
586-
| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. |
587-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
588-
| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. |
589-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
590-
| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to |
591-
| | |
592-
| | ``` yaml |
593-
| | scroll-view: |
594-
| | activate: true |
595-
| | ``` |
596-
+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
597-
598-
For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens:
599-
600-
``` yaml
601-
---
602-
title: "Presentation"
603-
format:
604-
revealjs:
605-
scroll-view:
606-
layout: compact
607-
snap: proximity
608-
progress: true
609-
activation-width: 0
610-
---
611-
```
612-
613613
## Learning More
614614

615615
See these articles lo learn more about using Reveal:

0 commit comments

Comments
 (0)