Horizontal Scrolling Section
Brad creates a horizontal scrolling section, great for lists and menus.
-
-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"> <ActionBar title="Horizontal Scrolling" backgroundColor="#3F51B5" color="#fff" /> <StackLayout padding="10"> <!-- This is the IMPORTANT part --> <ScrollView orientation="horizontal"> <StackLayout orientation="horizontal" class="scroll-menu"> <GridLayout rows="*, auto" columns="*, auto" class="scroll-pane"> <Button row="1" col="1" text="Button" horizontalAlignment="right" /> </GridLayout> <GridLayout rows="*, auto" columns="*, auto" class="scroll-pane"> <Button row="1" col="1" text="Button" horizontalAlignment="right" /> </GridLayout> <GridLayout rows="*, auto" columns="*, auto" class="scroll-pane"> <Button row="1" col="1" text="Button" horizontalAlignment="right" /> </GridLayout> <GridLayout rows="*, auto" columns="*, auto" class="scroll-pane"> <Button row="1" col="1" text="Button" horizontalAlignment="right" /> </GridLayout> <GridLayout rows="*, auto" columns="*, auto" class="scroll-pane"> <Button row="1" col="1" text="Button" horizontalAlignment="right" /> </GridLayout> </StackLayout> </ScrollView> </StackLayout> </Page>
-
.scroll-menu { height: 220; } .scroll-pane { background-color: #FF4081; width: 240; height: 220d; margin: 10; }