Components Palette Overview
The components PALETTE
is shown to the left of the screen, and includes the following mobile UI components:
- Appery.io components.
- AngularJS and Bootstrap components.
- HTML component – to write any custom HTML code.
Actions with components
Appery.io provides a standard set of tools to copy, paste, clone (duplicate) and remove UI components. All of those actions can be accessed trough the context menu.
To add a UI component to your app, locate it on the PALETTE
and then drag and drop it to the editor page.
To manipulate it, select the component and access the context menu by clicking the gear button.
Generally, the context menu consists of the Сlone
, Сopy
, Paste
, and Delete
options. However, several UI components (for example, Card
or Grid
) have one more option available from the context menu: + button duplicated by an Add item
option on the drop-down, that will add another nested item to the component. For example, it will add another cell to the Grid
:
Depending on the situation, some options can also be unavailable.
To delete a component, you can select it using
breadcrumbs
orOUTLINE
view and click Delete.
Cloning components
Cloning existing UI components can be useful and time-saving. A full clone of a UI component with all nested children, including other components will be created. To apply this feature, select the component and, from the menu, click Clone
.
Button
inside the Input Addon
in an Bootstrap/AngularJS project. Here, cloning will be unavailable for the Button
component.Copying and pasting components
Most of the PALETTE
components can be copied with all their properties and nested components by using the context menu for the selected component.
To use the copy-paste feature:
- Click
Copy
to deposit the selected component in Local storage (which allows copy-pasting for different projects and sessions). - Then select any container UI component. The component may be located within the same page or on the other one, it may even be a part of another project of the similar type.
- Open the intended destination context menu and select
Paste
.
If the
Paste
option is disabled, the remembered component may not be contained within the currently selected one.
Copy-Paste Hotkeys
Components can be copied and pasted via the Ctrl+C
(⌘+C
for Mac) and Ctrl+V
(⌘+V
for Mac) hotkeys as well. Some components (i.e. those not present in the PALETTE
) cannot be copied, as well as sub-components (e.g. Card Item
, Grid Cell
, etc.).
The previously copied component cannot be pasted into the currently selected one for one of the following reasons:
- different project types (e.g. copying from Ionic project and trying to paste into Bootstrap project)
- incompatible components (e.g. trying to paste a
Textarea
component intoHeader Controls
in Ionicindex
screen, which accepts onlyButtons
andInputs
) - nothing to paste (in this case, the
Empty Clipboard
message appears)
With Ctrl+V
hotkeys (⌘+V
for Mac), you can paste a component not only inside of the currently selected one, but also right after it. If the selected component is not a container or is incompatible with the component being pasted – the latter attempts to be pasted near the selected component (only if it is compatible with one’s parent).
Copying/pasting works for the active frame context only: clicking outside the
DESIGN
tab of the screen editor (for example,Tool bar
orProject
view) and applying special hotkeys will result in nothing. Click within theProject
tabs:DESIGN
,PROPERTIES
,PALETTE
panels, etc, to make the hotkeys work.
General components properties
Every component contains properties; some are general, others are unique for each component. General properties belonging to most components include:
- Class – set classes here.
- Component Name – the mandatory property used for identifying the component. When you drag and drop the component from the components
PALETTE
, the Appery.io Visual Builder gives it the standard name (e.g.GoogleMap1
,Image1
etc.). It’s beneficial to rename the components so you can easily identify them. - Hidden – every component on the page is visible by default. You may need to hide components. This can be set up for different screen sizes.
- Icon – some components support icons. To choose the icon you want, expand
Icon
and click No icon right to theStyle
:
- Attribute name – a new attribute value.
All complex and not obvious properties are provided with tooltips: by hovering over them, you can get information on the property and how to use it:
Autocomplete
The intelligent autocomplete mechanism is available for all editable properties in the PROPERTIES
panel, with the exception of combo-boxes (they already have predefined set of values).
To access the autocompletion window, in DESIGN
view, select a UI component you need and, on the PROPERTIES
panel, focus on an editable property. Press Ctrl+Space
or simply start typing to invoke the drop-down with the list of available variables and functions with their types.
Code assist will suggest some scope variables and functions matching the entered part:
Now you can navigate among the alternatives using the up and down buttons. To apply the selected value, press Enter or Tab, or click on it with the mouse.
The autocompletion feature is available for custom attribute names. It suggests all known angular directive names, including custom directives:
The autocompletion drop-down is shown after typing the opening double-braces in the properties that accept that binding:
This feature demonstrates intellectual behavior: assume we have a scope variable people
with type arr
described by the following model:
1 2 3 4 5 |
arr : Array arr[i] : Object name : String age : String |
Having added ng-repeat
= person in people
to a List item
and trying to use person
variable in other properties inside of this component, you will see the variable recognized by code assist with the suggested sub-properties.
Accordion

The Accordion
component is a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item’s header.
The Accordion
component has the following properties:
- closeOthers – determines if expanding an item causes the other items to close.
The Accordion item
has the following properties:
- Disabled – determines whether an item can be opened/closed.
- Opened – determines whether an item is opened by default.
- Text – an accordion item text.
The Accordion Item Header
has the following property:
- Text – a header text.
Visit the AngularJS documentation page to read more about Accordion.
Alert
The Alert
component provides contextual feedback messages for typical user actions.
The Alert
component has the following properties:
- Icon:
- Color – an icon color.
- Position – left, right.
- Style – Glyph icons.
- Text – an alert text.
- Type – success, info, warning, danger.
- close – determines if a close button is displayed.
- ng-if – condition for displaying.
Using Alert
You can find an example of using Alert
in the Angular-UI documentation: http://angular-ui.github.io/bootstrap/#/alert
They use an array of alerts, a special method for closing an alert. In general, it is also doable within the Appery.io editor. You can use AngularJS directives to control an alert.
To use a single Alert
, not as described in the Angular-UI, you can do the following:
1) Add Alert
to the screen. Set property ng-if
= showAlert1
.
2) Open the SCOPE
tab and create a new variable showAlert1
, Type
= Boolean
.
3) In init()
method, initialize this variable: $scope.showAlert
= True
.
4) Create a new method closeAlert()
that changes this variable to False
while clicking on the x button in Alert
.
5) Set property close
= closeAlert()
. It will be invoked while clicking on the x button in Alert
.
Visit the AngularJS documentation for the complete Alert component API.
Button

The Button
component is one of the most commonly used. It can navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close popups, invoke a service, or run JavaScript.
The Button
component has the following properties:
- Block – determines if a button is stretched to screen width.
- Icon:
- Color – an icon color.
- Position – left, right.
- Style – Glyph icons.
- Size – extra small, small, default, large.
- Submit button – determines if this is a button to send form data to server.
- Text – a button text.
- Type – default, primary, success, info, warning, danger, link.
- ng-click – an action that happens when you click the button.
Button Group

The Button Group
component includes several buttons together on a single line.
The Button Group
component has the following properties:
- Block – determines if a button group is stretched to screen width.
- Orientation – horizontal, vertical.
- Size – extra small, small, default, large.
Visit the Bootstrap documentation to read more about Button Group.
Checkbox

The Checkbox
component is an option that may be checked.
The Checkbox
component has the following properties:
- Block – determines if a checkbox is stretched to screen width.
- Checked – determines if a checkbox is checked by default.
- Text – a checkbox text.
- Value – a checkbox value.
- ng-model – binds a checkbox to a property on the scope.
Visit the Bootstrap documentation to read more about Checkbox.
Collapse

The Collapse
component is a combination of a Toggle block Button
and Text
components that makes it easy to hide and show an element with a CSS transition.
The Collapse Button
has the following properties:
- Block – determines if a checkbox is stretched to screen width.
- Icon:
- Color – an icon color.
- Position – left, right.
- Style – Glyph icons.
- Size – extra small, small, default, large.
- Submit Button – determines if this is a button to send form data to server.
- Text – a button text.
- Type – default, primary, success, info, warning, danger, link.
- ng-click – an action that happens when you click the button.
The Collapse Button
is set to hide/show the Collapse Text
block by default.
If you prefer to enable toggling by using some other component (for example,
Checkbox
), you must pass thehideCollapse1
variable to the component’s attribute (ng-model
=hideCollapse1
).
The Collapse Text
is the collapsible container where you can add components you need.
The Collapse Text
component has the following properties:
- Container – a content type (span, label, p, h1-h6).
- Text – a text content.
You may use several independent Collapse
components in your app.
Collapse requires the transitions plugin to be included in your version of Bootstrap.
Dropdown

The Dropdown
component is a group of options.
The Dropdown
component has the following properties:
- Icon:
- Color – an icon color.
- Position – left, right.
- Style – Glyph icons.
- Menu Opened – opens a menu (works in the Appery.io Visual Builder only and doesn’t affect the preview).
- Menu Up – makes menu toggled from the bottom up instead of top down and flips the arrow direction.
- Size – extra small, small, default, large.
- Splitted – splits a dropdown text and the arrow.
- Text – a dropdown text.
- Type – default, primary, success, info, warning, danger, link.
The Dropdownitem
has the following properties:
- Header – determines if this is a header.
- Label – an option text.
To toggle
Dropdownitems
on visual editor, you should changeMenu opened
property totrue
or double click on the component.
Custom Bootstrap widget events
The Dropdown
component has the following widget events:
- show.bs.dropdown – this event fires immediately when the show instance method is called. The toggling anchor element is available as the
relatedTarget
property of the event. - shown.bs.dropdown – this event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the
relatedTarget
property of the event. - hide.bs.dropdown – this event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the
relatedTarget
property of the event. - hidden.bs.dropdown – this event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the
relatedTarget
property of the event.
Here is an example:
1 2 3 |
$('#myDropdown').on('show.bs.dropdown', function () { // do something... }) |
Form

The Form
component is a form with the simple HTML markup and extended classes for different styles of forms. Bootstrap simplifies the form styling process.
The Form
component has the following properties:
- Layout – default, inline.
- Name – a form name. If specified, the form controller is published onto the current scope under this name.
- ng-submit – enables binding AngularJS expressions to onsubmit events. AngularJS prevents the default action (form submission to the server and reloading the current page), unless the form has an action attribute specified.
Visit the Bootstrap documentation to read more about Form.
Google Map

The Google Map
component allows you to embed Google Maps into your app page. Google Map
is a complex component, containing 5 main components (called directives): Google Map
itself, Marker
, Markers
, Window
and Windows
.
Each directive in Appery.io contains necessary and unnecessary (only the most commonly used) properties. The latter are added as custom attributes by default and may be deleted. You can add any other properties that are present in Angular-UI documentation and absent in component defaults.
A short description of each directive with their required properties is provided next. To learn more about them, check the AngularJS UI documentation.
This tutorial will show you how to use the
Google Map
component.
The Google Map
has the following required properties:
- Center (expression) – expression to evaluate as an object representing the map center. May be in the form of an object containing
latitude
andlongitude
properties, or a GeoJSON Point object. - Pan (string or boolean) – this attribute is a flag to indicate how the map’s centering should behave.
Evaluated on the attribute only. This means it is not watched or followed on the scope.
- Zoom (expression) – expression to evaluate as the map’s zoom level. This must be a number between 1 and 20.
Besides, there are the following extra properties as:
- control – if some object is passed (via scope binding) functionality is appended to that object.
- dragging – dragging state.
- refresh – expression to trigger a map refresh.
- bounds – expression to fit a map in the specified bounds.
Note: If you are adding aÂ
Google Map
component toÂModal
 screen, add an attributeÂng-if
=true
 to the component.
Marker
Marker’s position is defined by coords
property. If the property is equal to scope variable, position could be changed programmatically.
For making the Marker
draggable, create an object in scope containing property draggable
= true
, and pass this object name to the options
property of the Marker
.
Don’t use
ng-click
to indicate clicking on marker. Useclick
property instead.
The Marker
has the following required properties:
- idKey (expression) – expression to evaluate a field as key/id to identify a marker. Normally this is some identifier which can be used out of your database. Examples: 1,2,3 or “1”,”2″,”3″, or “one”,”two”,”three”. The most important part is that they should be unique! Note that if you use a simple string, you should use quotes (otherwise, AngularJS will search for a variable in scope with a specified name).
- coords (expression) – expression to evaluate as an object representing the marker location. May be in the form of an object containing
latitude
andlongitude
properties, or GeoJSON Point object. - control – if some object is passed (via scope binding) functionality is appended to that object.
Markers
The Markers
directive is similar to the marker
directive, but it is used when many markers need to be added to the map. It overcomes the high overhead of using the ng-repeat
marker
directive.
For making it work in Appery.io, you should specify the models array in scope, which contains objects with coords and ids of each marker.
The Markers
has the following required properties:
- Coords (string) – the name of the property in the models array containing the marker coordinates. Must refer to an object containing
latitude
andlongitude
properties, or a GeoJSON Point object. The special valueself
can be used to tell the directive that the objects in the array directly contain the marker coordinate object values. - Models (expression) – an array of objects defining each marker to add to the map.
- idKey (expression) – expression to evaluate a field as key/id to identify a marker. Normally, this is some identifier which can be used out of your database. Examples: 1,2,3 or “1”,”2″,”3″, or “one”,”two”,”three”. The most important part is that they should be unique! Note that if you use a simple string, you should use quotes (otherwise AngularJS will search for a variable in scope with a specified name).
- fit – automatically adjusts to fit the screen size.
- control – if some object is passed (via scope binding) functionality is appended to that object.
Window directive
The window
directive is used to display a single InfoWindow object on your map. Its content is set via HTML
property, where you can put simple text, HTML
tags or scope variables (e.g. Marker title: <b>{{title}}</b>
will display title
variable from scope).
In Appery.io, it might be used in two ways:
1) Select Marker
and click + button inside it. A window
will be added into the marker. Thus, all the properties are not required, window will appear after clicking the marker. Variables used in its properties (e.g. HTML
property) will be taken first from the marker’s scope.
2) Select Google Maps
and click the last + button. A window
will be added directly into the map. Thus, it can be displayed without a marker, but its displaying should be controled by the necessary property show
and coords
should be passed into the coords
property. Variables used in properties will be taken first from google-map scope (so using {{title}}
in HTML property will lead to the same title displaying in each window).
This case is recommended if you don’t want different windows to be displayed for each marker simultaneously (otherwise use
Windows
directive). You can use a single window and change itscoords
andshow
properties while clicking on each marker. This approach might be useful in pairing withMarker
andMarkers
directive.
The Window
doesn’t have required properties. The property HTML
is used to type custom HTML to display in a window.
Windows directive
The windows
directive is only optimal if you need to render a lot of windows all at once. Thus, different windows will be visible simultaneously after clicking different markers. Otherwise, it is highly suggested to use window,
programmatically adjusted to appear at the particular marker. Before using Windows
components, please check Angular-UI docs – section windows
in Directives list
.
Windows
doesn’t have required properties. Property HTML
is used to type custom HTML
to display in each window. Using scope variables in HTML
referred to each marker’s scope may help make each window unique.
Grid Layout

The Grid Layout
component allows you to format page content into rows and columns.
The Grid Layout
component has the following property:
- Fluid Container – determines if a grid expands to fill screen width.
The Grid Cell
has the following properties:
- Clearfix – clears the cols if their content doesn’t match in height.
- Columns – columns size: large, medium, small, Xtra-Small.
- Hidden – hides the
Grid Cell
components on the predefined devices types: large, medium, small, Xtra-Small. - Offset – centers columns: large, medium, small, Xtra-Small.
- Strictly Visible – shows the
Grid Cell
components on the predefined devices types: large, medium, small, Xtra-Small.
Working with Bootstrap Grid Layout
As you add the Grid Layout
(Grid
) component to the page, it has one row with two cells by default:
You can add cells and rows by clicking the green plus icon in the upper right corner of the component.
Working with the
Grid
component, pay attention to the breadcrumbs above the phone frame.
- If you click plus when the
Grid
is selected, the row (with two default cells) will be added:
- If you click plus when the
GridRow
is selected, a cell in the selected row will be added:
The Grid
component has two default properties:
- Component Name – if you change the name, it will appear in the breadcrumbs.
- Fluid Container – determines if the grid expands to fill screen width.
A fluid row (using class row-fluid
) will horizontally size a column using a percentage instead of a fixed pixel value. Using a percentage means a fluid row can expand to fill all available horizontal space when it is in a large container, and shrink columns to keep them from vertically stacking as the container shrinks.
The Grid Row
has only one default property:
- Component Name – the name that appears in the breadcrumbs.
To set the Grid Cell
properties, you can use 4 different grid classes to define your layouts: large, medium, small, Xtra-Small applicable to Columns
, Hidden
, Offset
, and Strictly Visible
properties.
Defining these, you can differentiate how you want the grid to be displayed on the different screen sizes.
The Grid Cell
has the following properties:
- Clearfix – clears the cols if their content doesn’t match in height.
If the component is set to
hidden
, the layout is reorganized to hide the element on the predefined screen type (Xtra-Small
) while the other types show it:
- Offset – by using offset, you can move a column to the right of its native position. This is achieved by suitably adding left margin to a column.
The Checkbox label
element won’t be shown on extra small devices and will be shown on the other screen types:
Visit the Bootstrap documentation to read more about Grid Layout.
HTML

The HTML
component allows you to insert custom tags.
The HTML
component has the following properties:
- Container – html, div, span, h1-h6.
Actually, the HTML
component is generated only if html
is selected for Container
property. Otherwise, it is just a component container.
- HTML – contents of HTML component with
html
type.
You can use a special keyword
%children%
to insert child components in the middle of html content.
Image

The Image
component allows you to add custom images to your app.
The Image
component has the following properties:
- Alt. Text – alternative text to be displayed instead of an image.
- Dimensions:
- Height.
- Width.
- Image – uploads an asset.
- Responsive – automatically adjusts to fit the screen size.
- Shape – default, rounded, circle, thumbnail.
- ng-src – an alternative source to dynamically load image. Prevents the browser from loading images before the handlebars get parsed when loading dynamically. To specify the dynamic path,
ng-src
should be used in{{}}
markup. More information about theng-src
directive is here.
Visit the Bootstrap documentation to read more about Image.
Input

The Input
component allows you to receive data from the app user. It may be a name, login, email, password, a word, phrase, location or anything else you need in your app.
The Input
component has the following properties:
- Add-on Left – enables a prepended add-on.
- Add-on Right – enables an appended add-on.
- Block – determines if an input is stretched to screen width.
- Name – an input name.
- Placeholder – when being replaced, the placeholder text is removed and the actual text is put in its place.
- Size – small, default. large.
- Text – an input text.
- Type – text, password.
- ng-model – binds an input to a property on the scope.
Visit the Bootstrap documentation to read more about Input.
Making the Input required
See this blog post to learn how to make Input
required.
Label

The Label
component is used to show information to the app user.
The Label
component has the following properties:
- Text – a label text.
- Type – default, primary, success, info, warning, danger, or badge.
Visit the Bootstrap documentation to read more about Label.
Link

The Link
component is similar to the Label
component. The difference is that upon clicking the Link
component, the user will navigate to the specified URL. That is, this is just a Href
with Bootstrap styles that works as follows:
1 |
<a href = "..."> </a> |
The Link
component has the following properties:
- Href – a link where you need to navigate to.
- Target – _blank, _self.
- Text – a link text.
Using Link
You can use the Link
component to navigate between screens.
1) In the page SCOPE
tab add a function named goTo (page)
with the following code:
1 |
Apperyio.navigateTo(page); |
2) Go to the page DESIGN
tab, open the Link
component properties and add the attribute ng-click
= go
To('pageName')
.
3) Empty the Href
property (remove #body
) to make navigation work. You may leave it if the Link
component is inside Navbar
or Navs
.
Listgroup

The Listgroup
component shows a list of items.
The Listgroup
component has the following property:
- Linked – makes listgroup items clickable.
The List Group Item
has the following properties:
- Badge – enables an item badge with custom text.
- Disabled – determines if an option is disabled.
- Header – enables an item header with custom text.
- Text – an item text.
- Type – default, success, info, warning, danger.
Visit the Bootstrap documentation to read more about Listgroup.
The Navbar
component contains a Navs
with two Links
and a Dropdown
component by default.
The Navbar
component has the following properties:
- Brand:
- Image – navbar brand image (if absent than brand text is used, if present than brand text is used as image alt).
- Text – navbar brand text.
- Inverted – determines if inverted.
- Vertical Alignment – None, Fixed on top, Fixed on bottom, Static top (please find more here).
Visit the Bootstrap documentation to read more about Navbar.
Drag the Navbar
component to a page. It already contains a Navs
with two Link
components and a Dropdown
. You can delete them or add more components.
On an XS screen
, double click the right button to expand/collapse a Navbar
. In this mode it has upper and lower containers with all the components stretched to screen width (except for buttons). On larger screens, containers are displayed in a line and have left-right alignment (you can read here about it).
Only the following components can be added to a Navbar
: Navs
, Link
, Button
, Text
. You can also add a Form
component to implement a search, for example (please find more here).
Bootstrap documentation requires manual body padding to prevent
Navbar
overlapping other components. Appery.io sets a default padding value of70px
for a needed screen side (instead of body). To change this value, you can set screen styles using custom CSS.
Technical details
On narrow screens, Navbar
opening logic is based on setup custom variable and control with predefined AngularJS directives ng-init
and ng-click
for toggle button, and ng-class
for Navbar
container.
Variable name is built as componentName
and _collapsed
postfix. Keep this in mind to prevent intersection when adding other AngularJS directives via Advanced Properties.
The steps below describe how to create navigation between screens through the main menu as Navbar
on index
screen with selection link for a current active screen.
All the steps for index
page:
- In
SCOPE
tab, add this code to the methodinit()
:1$scope.currentPage = {name: 'StartScreen' }; // or other route-name - Add method
nav()
(you can use other name) inSCOPE
tab with an argumentpage_name
and the following code:12Apperyio.navigateTo(page_name);$scope.currentPage.name = page_name; - On
index
screenDESIGN
tab, add aNavbar
component aboveng-view
. - For navigation
Link
component:- add property
ng-class
with the following value:1{active: currentPage == 'routeName_to_page'} - add property
ng-click
with the following value:1nav('routeName_to_page')
- add property
If your app needs navigation actions from child screens, you can use the same steps for
ng-click
onLink
:
1 |
nav('routeName') |
The Navs
component contains two Links
and a Dropdown
component by default. All Nav
components have shared base markup and styles. Usually, Navs
is used to build rich navbars.
The Navs
component has the following properties:
- Justified – determines if navs are stretched to screen width.
- Vertical – determines if navs are aligned vertically.
Visit the Bootstrap documentation to read more about Navs.
When you drag the Navs
component to a page, it already has two Link
components and a Dropdown
by default. You can delete them or add more Link
and Dropdown
components.
To make a Link
active, set the property Class
= active
in PROPERTIES
.
To disable a Link
or a Dropdown
, add a CSS asset with the following code (you can use any name for class, here we used disabled-pointer
) and set the property Class
= disabled
disabled-pointer
in PROPERTIES
:
1 2 3 |
.disabled-pointer { pointer-events: none; } |
To disable a Dropdown
, you can also set the property Class
= disabled
in PROPERTIES
and just add a custom attribute Disabled
= True
.
It’s reasonable to use SCOPE
variables for this purpose.
Please find more here.
All advanced attributes and the
className
that you apply to a navLink
viaPROPERTIES
panel are in fact applied to<li>
wrapping thisLink
. For example, to apply CSS styles to a link, you would need to setclassName
=my-link
and then use this code:
1 2 3 |
.my-link > a { margin: 5px; } |
Instead of the following:
1 2 3 |
.my-link { margin: 5px; } |
Page Header

The Page Header
component is a simple shell for an h1
to appropriately space out and segment sections of content on a page.
The Page Header
component has the following properties:
- Subtext – a subheader text.
- Text – a header text.
Visit the Bootstrap documentation to read more about Page Header.
Panel

The Panel
component allows you to create sliding panels which appear from the left or right.
The Panel
component has the following properties:
- Footer Text – a footer text.
- Header – determines if a title has big size.
- Header Text – a title.
- Text – a panel text.
- Type – default, primary, success, info, warning, danger.
The Radiobutton
component is a group of options where only one may be checked.
The Radiobutton
component has the following properties:
- Block – determines if a radiobutton is stretched to screen width.
- Checked – determines if a radiobutton is checked by default.
- Name – a radiobutton name.
- Text – a radiobutton text.
- Value – a radiobutton value.
- ng-model – binds a radiobutton to a property on the scope.
Visit the Bootstrap documentation to read more about Radiobutton.
Select

The Select
component allows you to choose one item from a predefined set of values.
The Select
component has the following properties:
- Block – determines if a select is stretched to screen width.
- Multiple – adds a scroll for multiple options.
- Opened – opens a select.
- ng-model – binds a select to a property on the scope.
- ng-options – dynamically generates a list of select options.
The Select Option
has the following properties:
- Selected – determines if an option is selected.
- Text – an option text.
- Value – an option value.
Visit the Bootstrap documentation to read more about Select.
Table

The Table
component allows you to create tables.
The Table
component has the following properties:
- Bordered – adds borders on all sides of the table and cells.
- Cols – a number of cols.
- Condensed – makes tables more compact by cutting cell padding in half.
- Hover – enables a hover state on table rows.
- Responsive – makes a table scroll horizontally on small devices.
- Rows – a number of rows.
- Striped – adds zebra-striping to table rows.
The Table Row
has the following properties:
- Cols – parent-inherited.
- Header – determines if cells in this row are headers.
- Type – default, success, info, warning, danger.
The Table Cell
has the following properties:
- Colspan – indicates how many columns a cell should take up.
- Rowspan – indicates how many rows a cell should take up.
- Text – a cell text.
- Type – default, success, info, warning, danger.
Visit the Bootstrap documentation to read more about Table.
Tabs

The Tabs
component consists of clickable tabs.
The Tabs
component has the following properties:
- Active tab – an active tab by default.
- Justified – determines if tabs are stretched to screen width.
- Type – tabs, pills.
- Vertical – determines if tabs are aligned vertically or horizontally.
The Tabs Item
has the following properties:
- Active – determines if a tab is active.
- Disabled – determines if a tab is disabled.
- Heading – a text heading.
If needed, other UI components (like Button
, Input
, etc.) can be added to a Tabs Item
.
Visit the AngularJS documentation to read more about Tabs.
Custom Bootstrap widget events
The Tabs
component has the following widget events:
- show.bs.tab – This event fires on tab show, but before the new tab has been shown. Use
event.target
andevent.relatedTarget
to target the active tab and the previous active tab (if available) respectively. - shown.bs.tab – This event fires on tab show after a tab has been shown. Use
event.target
andevent.relatedTarget
to target the active tab and the previous active tab (if available) respectively.
Here is an example:
1 2 3 4 |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) |
Text

The Text
component allows the app user to enter text.
The Text
component has the following properties:
- Container – a content type (span, label, p, h1-h6).
- Text – a text content.
Visit the Bootstrap documentation to read more about Text.
Textarea

The Textarea
component allows the app user to enter multiline text.
The Textarea
component has the following properties:
- Block – determines if a textarea is stretched to screen width.
- Content – a multiline text.
- Placeholder – when being replaced, the placeholder text is removed and the actual text is put in its place.
- Rows – a number of rows in text.
- ng-model – binds a textarea to a property on the scope.
Visit the Bootstrap documentation to read more about Textarea.
Also, to apply AngularJS styling to the app platform, the
ionic.Platform
utility can be used. Learn here, how to use it to dynamically style app elements.