Skip to content

Commit 6c99ca1

Browse files
pinkeshmarspinkeshmars
committed
Added pageview widget
1 parent 86bec44 commit 6c99ca1

File tree

3 files changed

+328
-0
lines changed

3 files changed

+328
-0
lines changed

‎docs/ff-concepts/navigation-routing/special-page-navigation/imgs/PageViewDemo.avif

99.1 KB
Binary file not shown.

‎docs/ff-concepts/navigation-routing/special-page-navigation/imgs/setting-initial-page-index.png

31.1 KB
Loading

‎docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
---
2+
slug: pageview
3+
title: PageView
4+
tags: []
5+
description: Learn how to use the PageView widget for creating swipeable pages, perfect for creating onboarding screens or multi-step forms.
6+
sidebar_position: 2
7+
---
8+
9+
# PageView
10+
The PageView widget is used to create swipeable pages. In page view, you can add multiple child widgets, each of which is considered a page and can be scrolled horizontally or vertically.
11+
12+
The PageView is useful when you have a collection of pages that you want to display one at a time, especially if you want the user to be able to swipe between them, such as in an onboarding screen, an app that shows a short video by swiping up or down just like Instagram, TikTok, Youtube shorts, etc.
13+
14+
![PageViewDemo](imgs/PageViewDemo.avif)
15+
16+
## Adding PageView widget
17+
18+
To add the PageView widget to your app:
19+
20+
1. Add the **PageView** widget from the **Layout Elements** tab.
21+
2. By default, it adds three pages and shows the first one in the canvas. In the widget tree, it is represented as **PageView Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the page you want to see.
22+
3. To add a new page, move to the **Properties Panel > Active Page >** click **+ Add Page**.
23+
4. To delete any page, select the **PageView Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard.
24+
5. By default, PageView Page contains an [Image](#) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the [Stack](#) widget and then add some more widgets.
25+
26+
<div style={{
27+
position: 'relative',
28+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
29+
height: 0,
30+
width: '100%'}}>
31+
<iframe
32+
src="https://demo.arcade.software/q5j4curqL6RymQkAR7HD?embed&show_copy_link=true"
33+
title=""
34+
style={{
35+
position: 'absolute',
36+
top: 0,
37+
left: 0,
38+
width: '100%',
39+
height: '100%',
40+
colorScheme: 'light'
41+
}}
42+
frameborder="0"
43+
loading="lazy"
44+
webkitAllowFullScreen
45+
mozAllowFullScreen
46+
allowFullScreen
47+
allow="clipboard-write">
48+
</iframe>
49+
</div>
50+
51+
## Adding infinite scroll
52+
53+
The PageView widget is an incredibly versatile widget that can be utilized in a variety of situations to create interactive applications. For example, you might want to use it in an app that involves reading books, magazines, or similar content to mimic the experience of flipping through pages.
54+
55+
In such situations, you might consider adding an infinite scroll on this widget, which automatically loads the new pages as you swipe.
56+
57+
We have already covered how to [add infinite scroll on ListView](#) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well.
58+
59+
## Customizing
60+
61+
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
62+
63+
### Changing the scroll direction
64+
65+
By default, the PageView comes with a horizontal scroll for the pages. To change the scroll direction to vertical, move to the **Properties Panel > Page View Properties >** set the **Axis** to **Vertical**.
66+
67+
<div style={{
68+
position: 'relative',
69+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
70+
height: 0,
71+
width: '100%'}}>
72+
<iframe
73+
src="https://demo.arcade.software/0BwCT3CCM40u2yHzr5jP?embed&show_copy_link=true"
74+
title=""
75+
style={{
76+
position: 'absolute',
77+
top: 0,
78+
left: 0,
79+
width: '100%',
80+
height: '100%',
81+
colorScheme: 'light'
82+
}}
83+
frameborder="0"
84+
loading="lazy"
85+
webkitAllowFullScreen
86+
mozAllowFullScreen
87+
allowFullScreen
88+
allow="clipboard-write">
89+
</iframe>
90+
</div>
91+
92+
### Enable/disable swipe to scroll
93+
94+
This widget allows you to change the page using a swipe gesture as well as clicking on the indicator (3 dots at the bottom indicate which page is being viewed). You can change this behavior and only allow changing the page on click of the indicator.
95+
96+
To do so, move to the **Properties Panel > Page View Properties >** disable **Allow swipe scrolling**.
97+
98+
<div style={{
99+
position: 'relative',
100+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
101+
height: 0,
102+
width: '100%'}}>
103+
<iframe
104+
src="https://demo.arcade.software/eFNWiP3YP6jU2Do68JBy?embed&show_copy_link=true"
105+
title=""
106+
style={{
107+
position: 'absolute',
108+
top: 0,
109+
left: 0,
110+
width: '100%',
111+
height: '100%',
112+
colorScheme: 'light'
113+
}}
114+
frameborder="0"
115+
loading="lazy"
116+
webkitAllowFullScreen
117+
mozAllowFullScreen
118+
allowFullScreen
119+
allow="clipboard-write">
120+
</iframe>
121+
</div>
122+
123+
### Update page on swipe
124+
125+
Sometimes you might want to rebuild the page on which the PageView widget is contained. i.e., rebuilding the outside of the page view widget. You might want to load data or show/hide UI elements based on the page currently being displayed. For example, you could display a floating action button only on a certain page or show/hide certain widgets based on the page index.
126+
127+
To do so, move to the **Properties Panel > Page View Properties >** turn on the **Update Page on Swipe**.
128+
129+
Here's an example of displaying the current page index on a page that contains the PageView widget.
130+
131+
<div style={{
132+
position: 'relative',
133+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
134+
height: 0,
135+
width: '100%'}}>
136+
<iframe
137+
src="https://demo.arcade.software/KLXXBsYf8Fx7bnbrRuIk?embed&show_copy_link=true"
138+
title=""
139+
style={{
140+
position: 'absolute',
141+
top: 0,
142+
left: 0,
143+
width: '100%',
144+
height: '100%',
145+
colorScheme: 'light'
146+
}}
147+
frameborder="0"
148+
loading="lazy"
149+
webkitAllowFullScreen
150+
mozAllowFullScreen
151+
allowFullScreen
152+
allow="clipboard-write">
153+
</iframe>
154+
</div>
155+
156+
### Trigger action on swipe
157+
158+
You might want to trigger an action when the page is swiped in the PageView widget. For example, you might want to load data for a specific page only when the user swipes to it instead of loading all the data upfront.
159+
160+
To trigger action on swipe:
161+
162+
1. Select the widget from the widget tree or canvas area.
163+
2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
164+
3. You will notice that the **Type of Action** (aka callback) is already set to **On Page Swipe**. That means actions added under this will be called whenever the page is swiped.
165+
4. Now, you can add any action here.
166+
167+
Here is an example showing the [snackbar](#) message whenever the page is swiped to the second page.
168+
169+
<div style={{
170+
position: 'relative',
171+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
172+
height: 0,
173+
width: '100%'}}>
174+
<iframe
175+
src="https://demo.arcade.software/gHg7V0y3lQtetLDuMCgY?embed&show_copy_link=true"
176+
title=""
177+
style={{
178+
position: 'absolute',
179+
top: 0,
180+
left: 0,
181+
width: '100%',
182+
height: '100%',
183+
colorScheme: 'light'
184+
}}
185+
frameborder="0"
186+
loading="lazy"
187+
webkitAllowFullScreen
188+
mozAllowFullScreen
189+
allowFullScreen
190+
allow="clipboard-write">
191+
</iframe>
192+
</div>
193+
194+
### Setting initial page index
195+
196+
You might want to display a specific page as soon as it is loaded. To do so, move to the **Properties Panel > Page View Properties >** enter the **Initial Page Index** value. Please **note** that the page index starts from 0. So, if you want to set page 1, you should enter 0. If you want to set page 2, you should enter 1, and so on.
197+
198+
![setting-initial-page-index.png](imgs/setting-initial-page-index.png)
199+
200+
### Set margin
201+
202+
Margin adds a space between the PageView content and its border. To change the margin, select the **PageView** widget, move to the **Properties Panel > Page View Properties >** find the **Margin** property, and change the values.
203+
204+
<div style={{
205+
position: 'relative',
206+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
207+
height: 0,
208+
width: '100%'}}>
209+
<iframe
210+
src="https://demo.arcade.software/wDvEcRb70O3Wzqvnm2iZ?embed&show_copy_link=true"
211+
title=""
212+
style={{
213+
position: 'absolute',
214+
top: 0,
215+
left: 0,
216+
width: '100%',
217+
height: '100%',
218+
colorScheme: 'light'
219+
}}
220+
frameborder="0"
221+
loading="lazy"
222+
webkitAllowFullScreen
223+
mozAllowFullScreen
224+
allowFullScreen
225+
allow="clipboard-write">
226+
</iframe>
227+
</div>
228+
229+
### Customize the indicator
230+
231+
The Indicator helps you identify which page is currently being viewed. You can change the appearance of the Indicator using the various properties available under the *Indicator Properties* section.
232+
233+
To customize the indicator:
234+
235+
1. Select the **PageView** widget, and move to the **Properties Panel > Indicator Properties**.
236+
2. To change the indicator position,
237+
1. Find the **Horizontal Alignment** property and adjust the value by using the slider or entering a value. A value of -1 will place the Indicator all the way to the left, while a value of 1 will place the Indicator all the way to the right.
238+
2. Similarly, you can also change the indicator position vertically using the **Vertical Alignment** property. A value of -1 will place the Indicator all the way to the top, while a value of 1 will place the Indicator all the way to the bottom.
239+
3. To add padding around the indicator, find the **Padding** property and enter the values in L (Left), T (Top), R (Right), and B (Bottom) properties to get the desired result.
240+
4. To change the active and inactive color, use the **Active Color** and **Inactive Color** properties to change the color.
241+
5. To change the indicator dot size, use the **Dot Width** and **Dot height** properties.
242+
6. To change the size of an active dot, you can use the **Expansion Factor** property. For example, if you enter 2, the active dot size will be twice its normal size.
243+
244+
:::info
245+
The width of the active dot is calculated by multiplying the value of the **Dot Width** property with the value of the **Expansion Factor** property. That means if the Dot Width is set to 40 and *Expansion Factor* is set to 2, then the width of the Active dot will be 80.
246+
:::
247+
248+
7. To add space between the indicator dots, use the **Spacing** property.
249+
8. To adjust the rounded corner of indicator dots, use the **Border Radius** property.
250+
9. To show only the border, enable the **Outline** toggle.
251+
10. If you want to hide the indicators, disable the **Show Indicator** toggle.
252+
253+
<div style={{
254+
position: 'relative',
255+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
256+
height: 0,
257+
width: '100%'}}>
258+
<iframe
259+
src="https://demo.arcade.software/V4Sl8N3DOMqZpAvP6F5U?embed&show_copy_link=true"
260+
title=""
261+
style={{
262+
position: 'absolute',
263+
top: 0,
264+
left: 0,
265+
width: '100%',
266+
height: '100%',
267+
colorScheme: 'light'
268+
}}
269+
frameborder="0"
270+
loading="lazy"
271+
webkitAllowFullScreen
272+
mozAllowFullScreen
273+
allowFullScreen
274+
allow="clipboard-write">
275+
</iframe>
276+
</div>
277+
278+
### Scroll PageView on button press
279+
280+
If you use the PageView widget to create the onboarding experience, you may probably want to allow users to scroll the pages on button press (e.g., next, previous, and skip buttons) in addition to the swipe to scroll. You can do so by adding the PageView and then defining the Control Page View action on the Tap of a Button widget.
281+
282+
Here's an example of scrolling PageView on button press:
283+
284+
1. First, [add the PageView](#adding-pageview-widget) widget.
285+
2. [Customize the PageView](#customizing) widget and add buttons to go to the previous and next pages.
286+
3. Now select any button and define the [Control Page View action](#).
287+
288+
### Show/Hide widget
289+
290+
See how to show or hide any widget using the [Conditional Visibility](#) property.
291+
292+
### Responsive visibility
293+
294+
See how to [add responsive visibility](#) to any widget.
295+
296+
### Add padding & alignment
297+
298+
See how to add [padding](#) and [alignment](#) to any widget.
299+
300+
---
301+
302+
## Video guide
303+
304+
If you prefer watching a video tutorial, here's the one for you:
305+
<div style={{
306+
position: 'relative',
307+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
308+
height: 0,
309+
width: '100%'}}>
310+
<iframe
311+
src="https://www.youtube.com/embed/rFvIjpvMneI"
312+
title=""
313+
style={{
314+
position: 'absolute',
315+
top: 0,
316+
left: 0,
317+
width: '100%',
318+
height: '100%',
319+
colorScheme: 'light'
320+
}}
321+
frameborder="0"
322+
loading="lazy"
323+
webkitAllowFullScreen
324+
mozAllowFullScreen
325+
allowFullScreen
326+
allow="clipboard-write">
327+
</iframe>
328+
</div>

0 commit comments

Comments
 (0)