javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(safe-area): add scroll view with grid layout examples

Browse Source
This commit is contained in:
Vasil Chimev
2018-07-31 14:24:55 +03:00
committed by Martin Yankov
parent 52f8e67203
commit 3a7a944ba1
7 changed files with 224 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="scrollview/fragments">
<ActionBar>
<Label text="Action Bar"></Label>
</ActionBar>
<fragments:hscroll-grid-fragment></fragments:hscroll-grid-fragment>
</Page>

10
e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="scrollview/fragments">
<ActionBar>
<Label text="Action Bar"></Label>
</ActionBar>
<fragments:vscroll-grid-fragment></fragments:vscroll-grid-fragment>
</Page>

92
e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml Normal file
View File

@@ -0,0 +1,92 @@
<ScrollView orientation="horizontal" backgroundColor="LightGreen">
<GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
<StackLayout row="0" col="0" backgroundColor="SkyBlue">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="0" col="1" backgroundColor="LightPink">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="1" col="0" backgroundColor="LightYellow">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="1" col="1" backgroundColor="LightGray">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
</GridLayout>
</ScrollView>

92
e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml Normal file
View File

@@ -0,0 +1,92 @@
<ScrollView orientation="vertical" backgroundColor="LightGreen">
<GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
<StackLayout row="0" col="0" backgroundColor="SkyBlue">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="0" col="1" backgroundColor="LightPink">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="1" col="0" backgroundColor="LightYellow">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
<StackLayout row="1" col="1" backgroundColor="LightGray">
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
<Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
</StackLayout>
</GridLayout>
</ScrollView>

7
e2e/safe-area/app/scrollview/no-action-bar/hscroll-grid-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="scrollview/fragments"
actionBarHidden="true">
<fragments:hscroll-grid-fragment></fragments:hscroll-grid-fragment>
</Page>

7
e2e/safe-area/app/scrollview/no-action-bar/vscroll-grid-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="scrollview/fragments"
actionBarHidden="true">
<fragments:vscroll-grid-fragment></fragments:vscroll-grid-fragment>
</Page>

8
e2e/safe-area/app/scrollview/scrollview-page.xml
View File

@@ -5,7 +5,7 @@
</ActionBar>
<StackLayout>
<StackLayout>
<StackLayout horizontalAlignment="center">
<Label text="Pages w/ ActionBar"></Label>
<Button text="HScroll HStack" tap="onNavigate" route="scrollview/action-bar/hscroll-hstack-page" />
<Button text="VScroll VStack" tap="onNavigate" route="scrollview/action-bar/vscroll-vstack-page" />
@@ -13,10 +13,12 @@
<Button text="VScroll VWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-vwrap-page" />
<Button text="HScroll VWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-vwrap-page" />
<Button text="VScroll HWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-hwrap-page" />
<Button text="HScroll Grid" tap="onNavigate" route="scrollview/action-bar/hscroll-grid-page" />
<Button text="VScroll Grid" tap="onNavigate" route="scrollview/action-bar/vscroll-grid-page" />
<Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-hscroll-hstack-page" />
<Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-vscroll-vstack-page" />
</StackLayout>
<StackLayout>
<StackLayout horizontalAlignment="center">
<Label text="Pages w/o ActionBar"></Label>
<Button text="HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hstack-page" />
<Button text="VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vstack-page" />
@@ -24,6 +26,8 @@
<Button text="VScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vwrap-page" />
<Button text="HScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-vwrap-page" />
<Button text="VScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-hwrap-page" />
<Button text="HScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/hscroll-grid-page" />
<Button text="VScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/vscroll-grid-page" />
<Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-hscroll-hstack-page" />
<Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-vscroll-vstack-page" />
</StackLayout>