# Page

To access the property from outside:

```
document.childByName("Page 1").PROPERTY_NAME
```

To access the property from the page:

```
page.PROPERTY_NAME
```

For example, to change page background color on click the button:

```
import QtQuick 2.5

Item {
    Connections {
        target: document.childByName("Button 1").scriptAdaptor
        onEventItemClicked: {
            document.childByName("Page 1").style.blockBackgroundColor = "#ff0000"
        }
    }
}
```

## Interaction

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRl8GzDTsLlm5ZO%2FProperty-Interaction.png?alt=media&#x26;token=0ddec7d5-6e37-4a5d-a627-341bb5ebb6d6" alt=""></div>

| Property            | Function                                                                                                                                                                                                                          | Type   |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| Static              | <p>Sets static page<br><br><strong>Actions editor:</strong><br><code>Property > Page > Interaction > Static</code><br><strong>Code:</strong><br><code>page.isStatic</code></p>                                                    | `bool` |
| Have maximized item | <p>Gets true if there is maximized widget on page<br><br><strong>Actions editor:</strong><br><code>Property > Page > Interaction > Have maximized item</code><br><strong>Code:</strong><br><code>page.haveExpandedItem</code></p> | `bool` |

## Style

### Background

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRpedLCGkIdAzJ0%2FProperty-Page-Style-Background.png?alt=media&#x26;token=6b3a83c1-2077-46f2-be67-978662e54e8e" alt=""></div>

| Property             | Function                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                           |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Background color     | <p>Sets page background color<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background color</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundColor</code></p>            | `color`                                                                                                                                                                                                                                                        |
| Background image     | <p>Sets page background image<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background image</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Background fill mode | <p>Sets page background fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background fill mode</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Overlay

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRqA9_DJhWDtG6t%2FProperty-Page-Style-Overlay.png?alt=media&#x26;token=ad7357bb-8b29-49d8-b1ba-b1ec733be9e2" alt=""></div>

| Property          | Function                                                                                                                                                                                                                  | Type                                                                                                                                                                                                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Overlay image     | <p>Sets page overlay image<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Overlay > Overlay image</code><br><strong>Code:</strong><br><code>page.style.pageOverlayMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Overlay fill mode | <p>Sets page overlay fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Overlay > Overlay fill mode</code><br><strong>Code:</strong><br><code>page.style.pageOverlayFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Icon

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukRo65A6ZSJ8mWnu%2FProperty-Page-Icon.png?alt=media&#x26;token=e41df715-5729-426c-802e-f2e8c6caf9c5" alt=""></div>

| Property | Function       | Type     |
| -------- | -------------- | -------- |
| Icon     | Not documented | `string` |

## Actions

| Property      | Function                                                                                                                                                                                                                                |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enter         | <p>Manually fire Enter event<br><br><strong>Actions editor:</strong><br><code>Actions > Enter</code><br><strong>Code:</strong><br><code>page.script.actionEntered()</code></p>                                                          |
| Press         | <p>Manually fire Press event<br><br><strong>Actions editor:</strong><br><code>Actions > Press</code><br><strong>Code:</strong><br><code>page.script.actionItemPressed()</code></p>                                                      |
| Click         | <p>Manually fire Click event<br><br><strong>Actions editor:</strong><br><code>Actions > Click</code><br><strong>Code:</strong><br><code>page.script.actionItemClicked()</code></p>                                                      |
| Double click  | <p>Manually fire Double click event<br><br><strong>Actions editor:</strong><br><code>Actions > Double click</code><br><strong>Code:</strong><br><code>page.script.actionItemDoublePressed()</code></p>                                  |
| Execute       | <p>Execute custom script<br><br><strong>Actions editor:</strong><br><code>Actions > Execute</code><br><strong>Code:</strong><br><code>page.script.actionExecute(QString code)</code></p>                                                |
| Minimize all  | <p>Minimize all maximized items<br><br><strong>Actions editor:</strong><br><code>Actions > Minimize all</code><br><strong>Code:</strong><br><code>page.script.actionShrinkAll()</code></p>                                              |
| Save as image | <p>Save current page as image to default Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Save as image</code><br><strong>Code:</strong><br><code>page.script.actionSaveAsImage(QString fileName)</code></p> |
| Unload page   | <p>Unload page<br><br><strong>Actions editor:</strong><br><code>Actions > Unload page</code><br><strong>Code:</strong><br><code>page.script.actionUnloadPage()</code></p>                                                               |

## Events

| Property       | Function                                                                                                                                                                                                            |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Changed        | <p>Event when any property is changed<br><br><strong>Actions editor:</strong><br><code>Event > Changed</code><br><strong>Code:</strong><br><code>page.script.eventChanged()</code></p>                              |
| Enter          | <p>Event when the page was opened<br><br><strong>Actions editor:</strong><br><code>Event > Enter</code><br><strong>Code:</strong><br><code>page.script.eventEntered()</code></p>                                    |
| Leave          | <p>Event when leave the page<br><br><strong>Actions editor:</strong><br><code>Event > Leave</code><br><strong>Code:</strong><br><code>page.script.eventLeaved()</code></p>                                          |
| Before enter   | <p>Event before open page<br><br><strong>Actions editor:</strong><br><code>Event > Before enter</code><br><strong>Code:</strong><br><code>page.script.eventBeforeEnter()</code></p>                                 |
| Press          | <p>Event when mouse is pressed on the page or widget on the page<br><br><strong>Actions editor:</strong><br><code>Event > Press</code><br><strong>Code:</strong><br><code>page.script.eventItemPressed()</code></p> |
| Click          | <p>Event when mouse is released<br><br><strong>Actions editor:</strong><br><code>Event > Click</code><br><strong>Code:</strong><br><code>page.script.eventItemClicked()</code></p>                                  |
| Double click   | <p>Event when double clicked on the page<br><br><strong>Actions editor:</strong><br><code>Event > Double click</code><br><strong>Code:</strong><br><code>page.script.eventItemDoublePressed()</code></p>            |
| Maximized item | <p>Event when page item is maximized<br><br><strong>Actions editor:</strong><br><code>Event > Maximized item</code><br><strong>Code:</strong><br><code>page.script.eventExpandItem()</code></p>                     |
| Minimized item | <p>Event when page item is minimized<br><br><strong>Actions editor:</strong><br><code>Event > Minimized item</code><br><strong>Code:</strong><br><code>page.script.eventShrinkItem()</code></p>                     |
| Mouse over     | <p>Event when mouse over page<br><br><strong>Actions editor:</strong><br><code>Event > Mouse over</code><br><strong>Code:</strong><br><code>page.script.eventMouseOver()</code></p>                                 |
| Loaded         | <p>Event when page loaded<br><br><strong>Actions editor:</strong><br><code>Event > Loaded</code><br><strong>Code:</strong><br><code>page.script.eventLoaded()</code></p>                                            |
| Swipe left     | <p>Event when swipe left<br><br><strong>Actions editor:</strong><br><code>Event > Swipe left</code><br><strong>Code:</strong><br><code>page.script.eventSwipeLeft()</code></p>                                      |
| Swipe right    | <p>Event when swipe right<br><br><strong>Actions editor:</strong><br><code>Event > Swipe right</code><br><strong>Code:</strong><br><code>page.script.eventSwipeRight()</code></p>                                   |
| Swipe up       | <p>Event when swipe up<br><br><strong>Actions editor:</strong><br><code>Event > Swipe up</code><br><strong>Code:</strong><br><code>page.script.eventSwipeUp()</code></p>                                            |
| Swipe down     | <p>Event when swipe down<br><br><strong>Actions editor:</strong><br><code>Event > Swipe down</code><br><strong>Code:</strong><br><code>page.script.eventSwipeDown()</code></p>                                      |