Bootstrap UI Components

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.

🚧
Note that the option of creating new apps with the Bootstrap framework was removed but we still support the projects that were created with it earlier.

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.

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), can have more than one option available from the context menu. The + button duplicated by a 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.

📘
Note
To delete a component, you can select it using breadcrumbs or OUTLINE 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.

The component with the same properties appears right after the original component by default. For the most part, all UI components or their parts can be cloned but the ability to be cloned depends on the component’s environment. So, some components cannot clone their own parts. For example: you can’t clone a 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 on 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.

📘
Note
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 into Header Controls in Ionic index screen, which accepts only Buttons and Inputs)
Nothing to paste (in this instance, 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).

📘
Note
Copying/pasting works for the active frame context only: clicking on the DESIGN tab of the screen editor (for example, Toolbar or Project view) and applying special hotkeys will result in nothing. Click on the Project 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 the Style.
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 the 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 are described by the following model:

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:

Add Alert to the screen. Set property ng-if = showAlert1.
Open the SCOPE tab and create a new variable showAlert1, Type = Boolean.
In init() method, initialize this variable: $scope.showAlert = True.
Create a new method closeAlert() that changes this variable to False while clicking on the x button in Alert.
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 the 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](http://getbootstrap.com/components/#btn-groups).

Checkbox

The Checkbox component is an option that may be checked.

The Checkbox component has the following properties:

Block – determines if a check box is stretched to screen width.
Checked – determines if a check box is checked by default.
Text – a check box text.
Value – a check box value.
ng-model – binds a check box 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 check box 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 the 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.

📘
Note
If you prefer to enable toggling by using some other component (for example, Checkbox), you must pass the hideCollapse1 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.

📘
Note
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.

📘
Note
To toggle Dropdownitems on visual editor, you should change Menu opened property to true or double click on the component.

Visit the Bootstrap documentation to read more about Dropdown.

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 drop down 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 drop down 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:

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

Form

The Form component is a form with a 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 is 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.

Google Map

It is the main container for the map. To change its dimensions in the preview, assign any class name to the map and set the desirable style via CSS. By default it’s 100% wide and 250px high.

📘
Note
The visual editor doesn’t represent any changes in the CSS styles of Google Maps, they are assigned in preview.

Google Map may contain 3 types of children: Marker, Markers and Window. In Visual Editor they are grouped into three areas for accessibility. Use the + buttons, which appear inside each area after selecting the map, for adding appropriate children.

The Google Map has the following required properties:

Center (expression) – expression to evaluate as an object representing the map center. This can be in the form of an object containing latitude and longitude properties, or a GeoJSON Point object.
Pan (string or boolean) – this attribute is a flag to indicate how the map’s centering should behave.

📘
Note
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.

There are the following extra properties such 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, a position could be changed programmatically.

For making the Marker draggable, create an object in the scope containing property draggable = true, and pass this object name to the options property of the Marker.

📘
Note
Don’t use ng-click to indicate clicking on a marker. Use the click 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 are using 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. This maybe in the form of an object containing latitude and longitude 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-repeatmarker 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 and longitudeproperties, or a GeoJSON Point object. The special value self 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: {{title}} will display title variable from scope).

In Appery.io, it might be used in two ways:

Select Marker and click + button inside it. A window will be added into the marker. Thus, all the properties are not required and a 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.
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 controlled 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).

📘
Note
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 its coords and show properties while clicking on each marker. This approach might be useful in pairing with Marker and Markers 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 a window, programmatically adjusted to appear at the particular marker. Before using Windows components, please check Angular-UI docs – windows section in the Directives list.

Windows doesn’t have the required properties. Property HTML is used to type custom HTML and display it in each window. Using scope variables in HTML is referred to each marker’s scope and may help make each window unique.

API Key

The Google Map component API key is required for the component to work properly. Read how to get an API key. The API key can be set in Project > App settings > Components. The same API key will be used for all components in an app. If you are creating a hybrid app, you don't need to set any API key restrictions.

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 columns 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 of two cells by default. You can add cells and rows by clicking the green plus icon in the upper right corner of the component.

📘
Note
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 are 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 columns if their content doesn’t match in height.
Columns – columns size. Bootstrap’s grid system allows up to 12 columns across the page:
Hidden – defines if the component will be hidden:

📘
Note
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 a left margin to a column.
Strictly Visible – forces an element to be shown or hidden on the predefined screen type.

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.

📘
Note
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 the 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 the ng-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. This is just a Href with Bootstrap styles that will work as follows:

<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.

In the page SCOPE tab add a function named goTo (page) with the following code:

Apperyio.navigateTo(page);

Go to the page DESIGN tab, open the Link component properties and add the attribute ng-click = goTo('pageName').
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.

Navbar

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 the bottom, Static top (please find more here).

Visit the Bootstrap documentation to read more about Navbar.

Using 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 a 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).

📘
Note
Bootstrap documentation requires manual body padding to prevent Navbar overlapping other components. Appery.io sets a default padding value of 70px 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 a setup custom variable and controlled 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.

Using Navbar On Index Screen

The steps below describe how to create navigation between screens through the main menu as Navbar on the index screen with the selection link for a current active screen.

All the steps for index page:

In SCOPE tab, add this code to the method init():

$scope.currentPage = {name: 'StartScreen' }; // or other route-name

Add method nav() (you can use other name) in SCOPE tab with an argument page_name and the following code:

Apperyio.navigateTo(page_name);
$scope.currentPage.name = page_name;

On index screen DESIGN tab, add a Navbar component above ng-view.
For navigation Link component:

add property ng-class with the following value: {active: currentPage == 'routeName_to_page'}
add property ng-click with the following value: nav('routeName_to_page').

📘
Note
If your app needs navigation actions from child screens, you can use the same steps for ng-click on Link:
nav('routeName')

Navs

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.

Using 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:

.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.

📘
Note
All advanced attributes and the className that you apply to a nav Link via the PROPERTIES panel is in fact applied to
wrapping this Link. For example, to apply CSS styles to a link, you would need to set className = my-link and then use this code:
.my-link > a {
	margin: 5px;
}
Instead of the following:
.my-link {
	margin: 5px;
}
Page Header

The Page Header component is a simple shell for a 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.

Radiobutton

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 the 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 and event.relatedTarget to target the active tab and the previously active tab (if available) respectively.

shown.bs.tab – This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

Here is an example:
$('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, div, a, h1-h6).

Text – a text content. HTML tags are not supported. Multiline text is supported (lines will be separated with br tag).

Visit the Bootstrap documentation to read more about Text.

Components Palette Overview

🚧

Actions With Components

Context Menu

📘Note

Cloning Components

Copying And Pasting Components

📘Note

📘Note

General Components Properties

Autocomplete

Accordion

Alert

Using Alert

Button

Button Group

Checkbox

Collapse

📘Note

📘Note

Dropdown

📘Note

Custom Bootstrap Widget Events

Form

Google Map

Google Map

📘Note

📘Note

📘Note

Marker

📘Note

Markers

Window Directive

📘Note

Windows Directive

API Key

Grid Layout

Working With Bootstrap Grid Layout

📘Note

📘Note

HTML

📘Note

Image

Input

Making The Input Required

Label

Link

Using Link

Listgroup

Navbar

Using Navbar

📘Note

Technical Details

Using Navbar On Index Screen

📘Note

Navs

Using Navs

📘Note

Page Header

Panel

Radiobutton

Select

Table

Tabs

Custom Bootstrap Widget Events

Text

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note

📘
Note