tns-template-hello-world/app/main-page.xml

Nativescript hello-world project template

<!--
The markup in NativeScript apps contains a series of user interface components, each
of which NativeScript renders with a platform-specific iOS or Android native control.
You can find a full list of user interface components you can use in your app at
https://docs.nativescript.org/ui/components.
-->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <!--
    The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
    http://docs.nativescript.org/ui/action-bar
    -->
    <ActionBar title="My App" icon=""></ActionBar>

    <!--
    The StackLayout stacks UI components on the screen—either vertically or horizontally.
    In this case, the StackLayout does vertical stacking; you can change the stacking to
    horizontal by applying a orientation="horizontal" attribute to the <StackLayout> element.
    You can learn more about NativeScript layouts at
    https://docs.nativescript.org/ui/layout-containers.

    These components make use of the NativeScript core theme, which styles them with element selectors.
    The theme also provides a set of helper class names such as p-20, h1, h2, and text-center to enhance styling.
    You can learn more about the NativeScript core theme at https://github.com/nativescript/theme
    -->
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="-primary"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>