Can I use simple HTML to create the UI?


#1

Hello!

I’m trying to make my angular app work with nativescript.
As the title says, can I use simple HTML to create the UI of each component?
Some of the demos on youtube show components with simple html but when I try to display anything (even just text) all I get is a blank screen.
If I use any of the nativescript components like , it is displayed normally.

Thanks!


#2

Which HTML elements are you trying to use?


#3

This is the entire html file:

<div class="login-screen">

  <h1 class="logo">
    logo 
  </h1>

  <form class="form login-form">
    <input name="name"/>
    <button class="btn sign-in-button"> Sign in</button>
    <a class="forgot-password"> Forgotten your password?</a>
  </form>

  <button class="btn sign-in-with-facebook-button"> Sign in with facebook</button>
  <a routerLink="/auth/create" class="btn create-account-button"> Create an account</a>
</div>

I removed all the css I had and I no longer get a blank screen but what I’m getting is a giant square button with no text in it.


#4

No you cannot use HTML. When you see the .HTML extension used it’s for code highlighting only, the contents are still XML.


#5

Like @SP1966 said,
you can’t use HTML elements in nativescript.


#6

I’m going to assume you are using NativeScript Angular, based on the routerLink reference. If so, your template would look more like this:

<StackLayout class="login-screen">
    <Label class="h1 logo" text="logo"></Label>
    <StackLayout class="form login-form">
        <TextField hint="Name"></TextField>
        <Button class="btn sign-in-button" (tap)="signInTapped()" text="Sign in"></Button>
        <Label class="forgot-password" text="Forgotten your password?"></Label>
    </StackLayout>
    <Button class="btn sign-in-with-facebook-button" text="Sign in with facebook"></Button>
    <Label [nsRouterLink]="['/auth/create']" class="btn create-account-button" text="Create an account"></Label>
</StackLayout>

#7

Thank you all for your replies. Is there a url that points out the limitations of angular in nativescript?
Also, is CSS 100% available?


#8

100% of CSS is not available yet


#9

Is there a list of what is and what isn’t available compared to a browser?


#10

https://docs.nativescript.org/ui/styling#supported-css-properties

this must be what you are looking for