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;
    }