Skip to content

Instantly share code, notes, and snippets.

@xeladotbe
Created October 8, 2020 16:55
Show Gist options
  • Save xeladotbe/f1115e566ff9b4fa0336ad8c57b3a89d to your computer and use it in GitHub Desktop.
Save xeladotbe/f1115e566ff9b4fa0336ad8c57b3a89d to your computer and use it in GitHub Desktop.
Simple pager with Navigation Buttons
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "dark",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100vw",
"height": "100vh",
"paddingTop": "64dp",
"paddingRight": "64dp",
"paddingBottom": "64dp",
"paddingLeft": "64dp",
"items": [
{
"type": "Pager",
"id": "myPagerComopnentId",
"width": "100%",
"height": "100%",
"grow": 0,
"shrink": 1,
"items": [
{
"type": "Container",
"items": [
{
"type": "Text",
"text": "Page 1"
},
{
"type": "TouchWrapper",
"onPress": [
{
"type": "SetPage",
"componentId": "myPagerComopnentId",
"position": "relative",
"value": 1
}
],
"item": {
"type": "Text",
"text": "Press me: I'll take you to the next page"
}
}
]
},
{
"type": "Text",
"text": "Page 2"
},
{
"type": "Text",
"text": "Page 3"
}
]
},
{
"type": "Container",
"direction": "row",
"justifyContent": "spaceBetween",
"grow": 0,
"items": [
{
"type": "TouchWrapper",
"onPress": [
{
"type": "SetPage",
"componentId": "myPagerComopnentId",
"position": "relative",
"value": -1
}
],
"item": {
"type": "Text",
"text": "Previous page"
}
},
{
"type": "TouchWrapper",
"onPress": [
{
"type": "SetPage",
"componentId": "myPagerComopnentId",
"position": "relative",
"value": 1
}
],
"item": {
"type": "Text",
"text": "Next page"
}
}
]
}
]
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment