Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
250 lines (149 sloc) 14.5 KB
title description position tags slug publish previous_url
Components
Get familiar with the default user interface elements (widgets) that are used as building blocks for the UI of a NativeScript mobile app.
20
user interface widgets, nativescript widgets, nativescript ui components
components
false
/ui-views,/ui/ui-views

User Interface Widget Components

NativeScript ships with a set of user interface views (also known as widgets) which you can use to build the user interface of a mobile application. Most of these views wrap the corresponding native view for each platform while providing a common API for working with it. For example, the Button view renders an android.widget.Button on Android and UIButton on iOS.

Defining the layout of the application is also an important part of the application development. For more information about the different layout containers that are available in NativeScript, see [The NativeScript Layout System]({%slug layouts %}).

TIP: You can access the underlying native widget for each view at runtime using the nativeView property:

<view>.nativeView

Accessing the native widgets might be useful when you want to use some platform-specific functionalities of the widget. You can find information about the underlying native component for each view below.

Each component comes with a set of common methods available from the extended View class. Dedicated documentation section covering the different measuring and position methods can be found [here]({%slug properties#view-class-common-methods %}).

Button

The {% nativescript %}[Button]({%slug button%}){% endnativescript %} {% angular %}[Button]({%slug button-ng%}){% endangular %} widget provides a standard button widget that reacts to a tap event.

button androidbutton ios

Native Component

Android iOS
android.widget.Button UIButton

Label

The {% nativescript %}[Label]({%slug label%}){% endnativescript %} {% angular %}[Label]({%slug label-ng%}){% endangular %} widget provides a text label that shows read-only text.

label androidlabel ios

Native Component

Android iOS
android.widget.TextView UILabel

TextField

The {% nativescript %}[TextField]({%slug text-field%}){% endnativescript %} {% angular %}[TextField]({%slug text-field-ng%}){% endangular %} widget provides an editable single-line text field.

text-field androidtext-field ios

Native Component

Android iOS
android.widget.EditText UITextField

TextView

The {% nativescript %}[TextView]({%slug text-view%}){% endnativescript %} {% angular %}[TextView]({%slug text-view-ng%}){% endangular %} widget provides an editable multi-line text view.

You can use it to show multi-line text and implement text editing.

text-view androidtext-view ios

Native Component

Android iOS
android.widget.EditText UITextView

SearchBar

The {% nativescript %}[SearchBar]({%slug search-bar%}){% endnativescript %} {% angular %}[SearchBar]({%slug search-bar-ng%}){% endangular %} widget provides a user interface for entering search queries and submitting requests to the search provider.

search-bar androidsearch-bar ios

Native Component

Android iOS
android.widget.SearchView UISearchBar

Switch

The {% nativescript %}[Switch]({%slug switch%}){% endnativescript %} {% angular %}[Switch]({%slug switch-ng%}){% endangular %} widget provides a two-state toggle switch from which you can choose between two options.

switch androidswitch ios

Native Component

Android iOS
android.widget.Switch UISwitch

Slider

The {% nativescript %}[Slider]({%slug slider%}){% endnativescript %} {% angular %}[Slider]({%slug slider-ng%}){% endangular %} widget provides a slider that you can use to pick a numeric value within a configurable range.

slider androidslider ios

Native Component

Android iOS
android.widget.SeekBar UISlider

Progress

The {% nativescript %}[Progress]({%slug progress%}){% endnativescript %} {% angular %}[Progress]({%slug progress-ng%}){% endangular %} widget is a visual bar indicator of a progress in a operation. It shows a bar representing the current progress of the operation.

progress androidprogress ios

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = false) UIProgressView

ActivityIndicator

The {% nativescript %}[ActivityIndicator]({%slug activity-indicator%}){% endnativescript %} {% angular %}[ActivityIndicator]({%slug activity-indicator-ng%}){% endangular %} widget is a visual spinner indicator which shows that a task is in progress.

activity-indicator androidactivity-indicator ios

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = true) UIActivityIndicatorView

Image

The {% nativescript %}[Image]({%slug image%}){% endnativescript %} {% angular %}[Image]({%slug image-ng%}){% endangular %} widget shows an image. You can load the image from an ImageSource or from a URL.

image androidimage ios

Native Component

Android iOS
android.widget.ImageView UIImageView

ListView

The {% nativescript %}[ListView]({%slug list-view%}){% endnativescript %} {% angular %}[ListView]({%slug list-view-ng%}){% endangular %} shows items in a vertically scrolling list. You can set an itemTemplate to specify how each item in the list should be displayed.

list-view androidlist-view ios

Native Component

Android iOS
android.widget.ListView UITableView

HtmlView

The {% nativescript %}[HtmlView]({%slug html-view%}){% endnativescript %} {% angular %}[HtmlView]({%slug html-view-ng%}){% endangular %} represents a view with HTML content. Use this component instead of WebView when you want to show just static HTML content.

html-view androidhtml-view ios

Native Component

Android iOS
android.widget.TextView UITextView

WebView

The {% nativescript %}[WebView]({%slug web-view%}){% endnativescript %} {% angular %}[WebView]({%slug web-view-ng%}){% endangular %} shows web pages. You can load a page from a URL or by navigating back and forward.

web-view androidweb-view ios

Native Component

Android iOS
android.webkit.WebView WKWebView

TabView

With the {% nativescript %}[TabView]({%slug tab-view%}){% endnativescript %} {% angular %}[TabView]({%slug tab-view-ng%}){% endangular %} control, you can implement tab navigation.

tab-view androidtab-view ios

Native Component

Android iOS
android.support.v4.view.ViewPager UITabBarController

SegmentedBar

With the {% nativescript %}[SegmentedBar]({%slug segmented-bar%}){% endnativescript %} {% angular %}[SegmentedBar]({%slug segmented-bar-ng%}){% endangular %} control, you can implement discrete selection.

segmented-bar androidsegmented-bar ios

Native Component

Android iOS
android.widget.TabHost UISegmentedControl

DatePicker

With the {% nativescript %}[DatePicker]({%slug date-picker%}){% endnativescript %} {% angular %}[DatePicker]({%slug date-picker-ng%}){% endangular %} control, you can pick a date.

date-picker androiddate-picker ios

Native Component

Android iOS
android.widget.DatePicker UIDatePicker

TimePicker

With the {% nativescript %}[TimePicker]({%slug time-picker%}){% endnativescript %} {% angular %}[TimePicker]({%slug time-picker-ng%}){% endangular %} widget, you can pick a time.

time-picker androidtime-picker ios

Native Component

Android iOS
android.widget.TimePicker UIDatePicker

ListPicker

With the {% nativescript %}[ListPicker]({%slug list-picker%}){% endnativescript %} {% angular %}[ListPicker]({%slug list-picker-ng%}){% endangular %} widget, you can pick a value from a list.

list-picker androidlist-picker ios

Native Component

Android iOS
android.widget.NumberPicker UIPickerView

Dialogs

The {% nativescript %}[dialogs module]({%slug dialogs %}){% endnativescript %} {% angular %}[dialogs module]({%slug dialogs-ng%}){% endangular %} lets you create and show dialog windows.

dialog-confirm androiddialog-confirm ios