PAGER - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<PAGER/> : <BOX/>
The <PAGER/> widget creates a paged layout allowing the user to flip between pages. At the bottom is a page indicator which also serves as a way to navigate, pages can be navigated by events as well.
- Pager allows the user to go back and forward, if you need a solution that does not allow the user to go back consider programmatically hiding sections or using multiple templates and manipulating the
NAVIGATIONstack
Attributes :: VisibleWidget (inherited attributes)
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| pager | bool | true | Shows/Hides the dots page indicator on the bottom | |
| initialpage | int | 1 | The page to start on when the template is opened | |
| transition | string | slide |
slide / jump, slide animates to the page, jump instantly shows the page |
| Name | Type | Default | Description |
|---|---|---|---|
| currentpage | int | null | The current page the user is flipped to. |
PAGER contains PAGEs which acts as a wrapper around the content, see examples below
| Name | Type | Default | Description |
|---|---|---|---|
| page | int/string | null | sets the page to an int/'next'/'previous'/first'/'last' |
Checkout the examples below to see how to programmatically change the page!
<FML>
<BOX color="white" />
<PAGER id="p1" pager="true">
<PAGE>
<BOX layout="column" valign="center" halign="center" color="#E2ACC6,#FDCC98">
<TEXT style="h1">
Page 1
</TEXT>
</BOX>
</PAGE>
<PAGE>
<BOX layout="column" valign="center" halign="center" color="#FDCC98,#FC6C81">
<TEXT style="h1">
Page 2
</TEXT>
</BOX>
</PAGE>
<PAGE>
<BOX layout="column" valign="center" halign="center" color="#FC6C81,#D168B1">
<TEXT style="h1">
Page 3
</TEXT>
</BOX>
</PAGE>
<PAGE>
<BOX layout="column" valign="center" halign="center" color="#D168B1,#5E2AD4">
<TEXT style="h1">
Page 4
</TEXT>
</BOX>
</PAGE>
</PAGER>
<POS bottom="25">
<BOX halign="center" layout="row" expand="false" width="100%" color="#F0EEF4">
<TOOLTIP label="First Page"><BUTTON label="«" onclick="page('first')" /></TOOLTIP>
<TOOLTIP label="Previous Page"><BUTTON label="‹" onclick="page('previous')" /></TOOLTIP>
<BOX expand="false">
<TEXT width="100">
Current Page: {p1.currentpage}
</TEXT>
<BOX layout="row" expand="false">
<TEXT value="Go to: " />
<PADDING left="5" />
<LINK onclick="p1.page(1)"><TEXT color="blue" value="_1_" /></LINK>
<PADDING left="5" />
<LINK onclick="p1.page(2)"><TEXT color="blue" value="_2_" /></LINK>
<PADDING left="5" />
<LINK onclick="p1.page(3)"><TEXT color="blue" value="_3_" /></LINK>
<PADDING left="5" />
<LINK onclick="p1.page(4)"><TEXT color="blue" value="_4_" /></LINK>
</BOX>
</BOX>
<TOOLTIP label="Next Page"><BUTTON label="›" onclick="p1.page('next')" /></TOOLTIP>
<TOOLTIP label="Last Page"><BUTTON label="»" onclick="p1.page('last')" /></TOOLTIP>
</BOX>
</POS>
</FML>
