NativeScript - Widgets

NativeScript provides a large set of user interface components and are called as ‘widgets’. Each widget does a special task and comes with a set of methods. Let’s understand NativeScript widgets in detail in this section.
Button is a component to execute tap event action. When a user taps the button it performs the corresponding actions. It is defined below −
<Button text="Click here!" tap="onTap"></Button>

Let us add the button in our BlankNgApp as below −
Open the src\app\home\home.component.html. This is the UI design page of our home component.
Add a button inside the GirdLayout component. The complete code is as follows −
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>
Below is the output of the button −
We can style the button using CSS as specified below −
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>
Here, −primary class is used to represent the primary button.
Below is the output of ButtonPrimary −
NativeScript provides formatted option to provide custom icons in the button. The sample code is as follows −
<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}
Here,
&#xf099 specifies the location of the icon in the font, FontAwesome. Download the latest Font Awesome font and place the fontawesome-webfont.ttf in src\fonts folder.
Below is the output of ButtonPrimary −
Rounded button can be created using the below syntax −
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

Below is the output of ButtonPrimary −
Label component is used to display static text. Change the home page as below −
<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>
Here, textWrap wraps the content of the label, if the label extends beyond the screen width.
Below is the output of Label −
TextField component is used to get information from user. Let us change our home page as specified below −
<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>
Here,
color represent text color
color represent text color
backgroundColor represent background of the text box
backgroundColor represent background of the text box
height represent the height of the text box
height represent the height of the text box
Below is the output of Text Field −
TextView Component is used to get multi-line text content from the user. Let us change our home page as specified below −
<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>
Here, maxLength represent maximum length accepted by TextView.
Below is the output of TextView −
This component is used for search any queries or submit any request. It is defined below −
<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>
We can apply styles −
<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>
Below is the output of SearchBarStyle −
Switch is based on toggle to choose between options. Default state is false. It is defined below −
<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>
The output for the above program is shown below −
Slider is a sliding component to pick a numeric range. It is defined below −
<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>
The output for the above program is given below −
Progress widget indicates progress in an operation. Current progress is represented as bar. It is defined below −
<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>
Below is the output of Progress widget −
ActivityIndicator shows a task in a progress. It is defined below −
<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>
Below is the output for ActivityIndicator −
Image widget is used to display an image. It can be loaded using ‘ImageSource’ url. It is defined below −
<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>
The output for Image Widget is as shown below −
WebView shows web pages. Web pages can be loaded using URL. It is defined below −
<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>
The output for the above code is as shown below −
DatePicker component is used to pick date. It is defined below −
<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>
The output of DatePicker component is as shown below −
TimePicker component is used to pick the time. It is defined below −
<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>
Below is the output of TimePicker component −

    22 Lectures 
     1 hours 

 TELCOMA Global
 Print
 Add Notes
 Bookmark this page