NativeScript UI is a free suite of rich and customizable premium UI widgets for building NativeScript apps. It is available for download as a plugin on npmjs.com under nativescript-pro-ui.
Continue reading more about each component below or take them up for a spin with the NativeScript UI sample app on GitHub.
AutoCompleteTextView offers suggested options to your user based on characters they’ve already typed. It provides means for easy customization and data management, among which:
- Suggest modes - you can choose to show suggestions in a drop-down list, one suggestion at a time in the text input, or a combination of both
- Two distinct display modes -
Plainin which only one item can be selected, and
Tokensallowing multiple selection of suggestions, each of which displayed as a token
The Calendar is a highly customizable calendar components that exposes a unified API covering:
- Four different view modes -
- Inline events
- Vast control over the styling and cell customization options
The Chart can be used to visualize data in a human-readable way through lines, areas, bars, pies and much more.
- Various data types - feed numerical, string or
DataTimedata depending on the chart you want to visualize.
- Smooth interaction and zooming
The chart series your application needs:
- Show trends with
- Compare sets of data with
- Illustrate proportions with
Donutcharts and use
Spline Areacharts to plot data that require the use of curve fittings
- Show relationship among values using
Bubbleseries, even use
Financialseries and indicators.
- Show trends with
- Annotations, tooltips and trackball
- Multiple axes support
The DataForm provides an easy and versatile approach to processing data objects’ public members and building mobile forms fast.
- Bind to an object with a single line of code
- Take advantage of more than 15 built-in editors or provide your own custom editor
- Create groups of editors, allow them to be collapsed and style them
- Take control over the collected data through in validation - use a built-in validator or create a custom one
The Gauges allow you to show the current status of a value within a range of upper and lower bounds, illustrate progress towards a goal or a summary of a fluctuating metric.
- Add one or more
RadialScaleinstances to your gauge
Barindicators to visualize a range of values or a
Needleindicator to point to a specific value
- Ready-to-use animations for smooth transition effects
RadListView is a virtualizing list component that provides the most needed features associated with scenarios where a list of items is used, such as:
- Pull to refresh
- Items animation when the user scrolls and 4 out-of-the-box effects to choose from
Staggeredlayout modes, allowing horizontal and vertical scrolling direction
- Single and multiple selection modes
- Smart defaults for many gestures - select on long press, execution of special action on swipe, reorder of items on long press and drag, refreshing the list on swipe or loading more items only when needed
The SideDrawer allows you to follow a popular application pattern and show a hidden view which contains navigation UI or common settings.
- Embed any content inside the sliding panel from text and icons to sliders and filters
- The control slides in from all four sides of the screen
- Pick from a large set of polished out-of-the-box transition modes
- Programmatic control over the state of the side drawer
- Ability to show over the navigation or action bar