# Page View

The Page View widget displays a scrollable list of pages. It is commonly used for onboarding screens, carousels, or any UI that requires full-page swiping.

{% embed url="<https://youtu.be/uHpNUKQjOI8?si=fV3y_tfpRb06ga3I>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=uHpNUKQjOI8>

### Core Concepts

1. **Page-by-Page Navigation**
   * Content is split into **discrete pages**, not continuous scroll.
   * User navigates via **swipe** or programmatic control (using a controller).
2. **PageController & Index**
   * A `PageController` manages:
     * Current page index
     * Animating to the next/previous page
   * You can sync this index with indicators, tabs, or other UI.
3. **One Layout per Page**
   * Each child is a **full layout** (could be a whole screen).
   * Perfect when each state/step deserves its **own dedicated screen**, but you still want **smooth swipe navigation**.
4. **Horizontal or Vertical**
   * Commonly horizontal (like stories or onboarding),
   * Can be vertical if your UX calls for it.

### Properties

#### 1. Page View Settings

| Property            | Description                                                        |
| ------------------- | ------------------------------------------------------------------ |
| `Data Source`       | A list of data that can be used to dynamically generate pages.     |
| `Controller`        | A PageController variable to control the currently displayed page. |
| `Initial Page`      | The index of the page to show when the widget is first displayed.  |
| `Viewport Fraction` | The fraction of the viewport that each page should occupy.         |
| `Scroll Direction`  | The direction of scrolling (`horizontal` or `vertical`).           |

#### 2. Behaviour

| Property        | Description                                                              |
| --------------- | ------------------------------------------------------------------------ |
| `Preload Page`  | If `true`, pages adjacent to the current page are preloaded.             |
| `Keep Page`     | If `true`, the state of each page is preserved as it scrolls off-screen. |
| `Allow Scroll`  | If `true`, the user can scroll between pages.                            |
| `Reverse`       | If `true`, the order of the pages is reversed.                           |
| `Pad Ends`      | If `true`, padding is added to the ends of the list of pages.            |
| `Page Snapping` | If `true`, the scroll view will snap to the nearest page.                |

#### 3. Actions

| Property        | Description                                                                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onPageChanged` | An action triggered when the currently displayed page changes. Receives an object with `currentItem` (the current page data) and `index` (the page index). |

### Children of Page View

| Slot       | Description                                                                                                                                                                                                                                                    |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | The child widgets that represent each page in the page view. Each child has access to `currentItem` (the data for that page) and `index` (the page index). You can access these directly by name or with the PageView name prefix: `pageViewName.currentItem`. |

***

### Default Properties

The Page View widget supports the following sections of [Default Properties](/ui-building-blocks/widgets/default-properties.md):

**Layout**

* `width`
* `height`
* `padding`
* `margin`

**Alignment**

* `align`

**Visibility**

* `visible`

### Use Cases

The **PageView** widget lets users **swipe between full-screen pages** horizontally (or vertically). Each page is usually a complete screen or section.

Use **PageView** when you want:

* **Onboarding / Intro Screens**
  * Multiple slides explaining features of the app
  * Combined with dots/indicators to show progress (like your Digia onboarding)
* **Tabbed, swipeable content**
  * Swipe between “Overview / Details / Reviews”
  * News sections, categories, or stories that users can swipe through
* **Step-by-step flows**
  * Multi-step forms (Step 1 → Step 2 → Step 3)
  * Tutorials or walkthroughs with one step per page
* **Carousel-style full pages**
  * Full-screen banners or hero sections you can swipe
  * Feature highlights or campaigns laid out as separate pages


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/navigation-widgets/page-view.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.