谁赢得了 NativeScript Uplabs 挑战赛？

几个月前，NativeScript 和 Uplabs 合作，向开发者和设计师发起挑战，让他们使用 NativeScript（当然）和 NativeScript Playground，构建最好的原生应用程序 UI。

我们主要将其视为一项设计挑战。每个人都知道你可以用 NativeScript 创建真正的原生 UI，但并非每个人都知道你可以构建引人入胜的原生 UI。

nativescript uplabs challenge example - spacex

就像你们中的许多人一样，我们很高兴看到提交的作品不断涌现！说实话，许多参赛作品让我们惊叹不已。我承认我甚至不知道你可以用一些 NativeScript 布局代码和 CSS 如此轻松地构建这些 UI。

从

<GridLayout rows="auto, *" class="intro">
    <GridLayout class="m-t-30">
        <StackLayout class="order" [class.order-slide-in]="opening"
            [class.order-slide-out]="!opening">
            <Label class="header" text="ORDER"></Label>
        </StackLayout>
        <StackLayout class="taker" [class.taker-slide-in]="opening"
            [class.taker-slide-out]="!opening">
            <Label class="header" text="TAKER"></Label>
        </StackLayout>
    </GridLayout>

    <AbsoluteLayout class="welcome text-center" rowSpan="2">
        <StackLayout class="overlay center">
            <Stacklayout class="m-x-15" [class.overlay-zoom-in]="opening"
                [class.overlay-zoom-out]="!opening"></Stacklayout>
        </StackLayout>
        <StackLayout class="center details">
            <StackLayout orientation="horizontal" horizontalAlignment="center">
                <Label text="Welcome" class="title text-center m-r-5"></Label>
                <Image src="~/assets/happy.png" class="happy"></Image>
            </StackLayout>
            <Label text="Easy bill split with your friends" class="sub-title text-center m-t-20"></Label>

            <GridLayout class="btn-container">
                <Button [class.fade-out]="!opening" text="CREATE AN ORDER"
                    class="m-x-15 welcome-btn" (tap)="newOrder()"></Button>
                <Image [class.fade-out]="!opening" src="~/assets/plus.png"></Image>
            </GridLayout>
        </StackLayout>
    </AbsoluteLayout>
</GridLayout>

到

nativescript uplabs challenge example - order