- NativeScript - Discussion
- NativeScript - Useful Resources
- NativeScript - Quick Guide
- NativeScript - Testing
- NativeScript - Creating an Application in iOS
- NativeScript - Creating an Application in Android
- NativeScript - Native APIs Using JavaScript
- NativeScript - Plugins
- NativeScript - Modules
- NativeScript - Data Binding
- NativeScript - Events Handling
- NativeScript - Navigation
- NativeScript - Layout Containers
- NativeScript - Widgets
- NativeScript - Templates
- NativeScript - Angular Application
- NativeScript - Architecture
- NativeScript - Installation
- NativeScript - Introduction
- NativeScript - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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
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="Cpck here!" tap="onTap"></Button>
Let us add the button in our BlankNgApp as below −
Step 1
Open the srcapphomehome.component.html. This is the UI design page of our home component.
Step 2
Add a button inside the GirdLayout component. The complete code is as follows −
<ActionBar> <Label text="Home"></Label> </ActionBar> <GridLayout> <button text="Cpck Here!"></button> </GridLayout>
Output
Below is the output of the button −
![GirdLayout](/nativescript/images/girdlayout.jpg)
Step 3
We can style the button using CSS as specified below −
<ActionBar> <Label text="Home"></Label> </ActionBar> <GridLayout> <button text="Cpck Here!" class="-primary"></button> </GridLayout>
Here, −primary class is used to represent the primary button.
Output
Below is the output of ButtonPrimary −
![ButtonPrimary](/nativescript/images/buttonprimary.jpg)
Step 4
NativeScript provides formatted option to provide custom icons in the button. The sample code is as follows −
<GridLayout> <Button class="-primary"> <FormattedString> <Span text="" class="fa"></Span> <Span text=" Button.-primary with icon"></Span> </FormattedString> </Button> </GridLayout> .fa { font-family: "FontAwesome", "fontawesome-webfont"; }
Here,
 specifies the location of the icon in the font, FontAwesome. Download the latest Font Awesome font and place the fontawesome-webfont.ttf in srcfonts folder.
Output
Below is the output of ButtonPrimary −
![FontAwesome](/nativescript/images/fontawesome.jpg)
Step 5
Rounded button can be created using the below syntax −
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>
Output
Below is the output of ButtonPrimary −
![Home](/nativescript/images/home.jpg)
Label
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.
Output
Below is the output of Label −
![Label](/nativescript/images/label.jpg)
TextField
TextField component is used to get information from user. Let us change our home page as specified below −
<GridLayout> <TextField hint="Username" color="pghtblue" backgroundColor="pghtyellow" height="75px"> </TextField> </GridLayout>
Here,
color represent text color
backgroundColor represent background of the text box
height represent the height of the text box
Output
Below is the output of Text Field −
![Text Field](/nativescript/images/text_field.jpg)
TextView
TextView Component is used to get multi-pne 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.
Output
Below is the output of TextView −
![TextView](/nativescript/images/textview.jpg)
SearchBar
This component is used for search any queries or submit any request. It is defined below −
<StackLayout> <SearchBar id="bar" hint="cpck here to search ..."></SearchBar> <StackLayout>
![SearchBar](/nativescript/images/searchbar.jpg)
We can apply styles −
<StackLayout> <SearchBar id="bar" hint="cpck here to search ..." color="green" backgroundColor="green"></SearchBar> </StackLayout>
Below is the output of SearchBarStyle −
![SearchBarstyle](/nativescript/images/searchbarstyle.jpg)
Switch
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 −
![Program](/nativescript/images/program.jpg)
Spder
Spder is a spding component to pick a numeric range. It is defined below −
<Spder value="30" minValue="0" maxValue="50" loaded="onSpderLoaded"></Spder>
The output for the above program is given below −
![Spder](/nativescript/images/spder.jpg)
Progress
Progress widget indicates progress in an operation. Current progress is represented as bar. It is defined below −
<StackLayout verticalApgn="center" height="50"> <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress> </StackLayout>
Below is the output of Progress widget −
![Progress](/nativescript/images/progress.jpg)
ActivityIndicator
ActivityIndicator shows a task in a progress. It is defined below −
<StackLayout verticalApgn="center" height="50"> <ActivityIndicator busy="true" color="red" width="50" height="50"></ActivityIndicator> </StackLayout>
Below is the output for ActivityIndicator −
![ActivityIndicator](/nativescript/images/activityindicator.jpg)
Image
Image widget is used to display an image. It can be loaded using ‘ImageSource’ url. It is defined below −
<StackLayout class="m-15" backgroundColor="pghtgray"> <Image src="~/images/logo.png" stretch="aspectFill"></Image> </StackLayout>
The output for Image Widget is as shown below −
![Image](/nativescript/images/image.jpg)
WebView
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 −
![WebView](/nativescript/images/webview.jpg)
DatePicker
DatePicker component is used to pick date. It is defined below −
<StackLayout class="m-15" backgroundColor="pghtgray"> <DatePicker year="1980" month="4" day="20" verticalApgnment="center"></DatePicker> </StackLayout>
The output of DatePicker component is as shown below −
![DatePicker](/nativescript/images/datepicker.jpg)
TimePicker
TimePicker component is used to pick the time. It is defined below −
<StackLayout class="m-15" backgroundColor="pghtgray"> <TimePicker hour="9" minute="25" maxHour="23" maxMinute="59" minuteInterval="5"> </TimePicker> </StackLayout>
Below is the output of TimePicker component −
![TimePicker](/nativescript/images/timepicker.jpg)