GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Ionic Components Sample App

Ionic components sample app.

The plugin shows possibilities for customization of Ionic components as well as a wide set of use cases to build mobile UI. Feel free to copy any components or approaches to your app.

Creating Sample App

  1. From the Apps page, click Create new app > Ionic > Components Examples.
  2. Click the Create button.

🚧

Important Note!

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

Below, you can find a detailed explanation about how each page was built.

Base_configuration

Index Screen

  1. Create a model for activeScreen configuration and a variable with this model type.
  2. On the DESIGN tab, drop two Buttons (back button, side menu button) and enable Side menu.
  3. Drop a Llist into the Side menu for navigation and set Type = Link.
  4. Bind the Header and Footer with variables.
  5. Bind the visibility of the buttons.

ActiveScreen Directive

A directive is responsible for the base settings which is dependent on the active screen. A directive has the following attributes:

  1. active-screen - responsible for the name on the header and for highlighting the menu item.
  2. isSideMenuDisabled - if this attribute is presented a screen side-menu will be disabled, otherwise, the side menu will be enabled.
  3. isBackButtonEnabled - if this attribute is presented, a screen back-button will be shown in the header, otherwise, it will be hidden.

Landing Page Example

Page with default route. The user will appear here when they enter the app, or when they navigate to the wrong route. You can change the default route in Routing.

Example Of Accordion

In Ionic, the Accordion can be easily emulated with the List component.
Creating an example from scratch:

  1. Drag and drop a List component to the screen, leave two child list items.
  2. Set Divider property of the first item to True and add ng-repeat-start equals item in heroList.
  3. Add a List component to the canvas and delete an item.
  4. Set the Divider property to True and add ng-repeat-start with the items in heroes. value (The variable is set in the init() function of the page).
  5. Add the {{item.name}} value to the text property.
  6. Add the ng-repeat-end property to the second item without any value and define the text property as {{item.description}}.
  7. Add the ng-click directive to the first item and set it to item.opened = !item.opened.
  8. Bind the right icon to the flag: {{item.opened ? 'ion-ios-arrow-down': 'ion-ios-arrow-right'}}.
  9. Add the ng-show directive to the second item and set it to item.opened, which opens the item if the flag is set.
  10. Add the data to init TBD.

Lists

Two types of list:​

  • List with image and badge.
  • List with button and image.

For using List:

  1. Add the needed components for List items.
  2. Input them with the help of ng-repeat directive.

📘

All the images is loading with the help of Media Manager with relative paths.

Grid

Example of using the grid:

  1. Add a Grid component to the screen and keep one row and 3 columns.
  2. To the first two columns, put position center property. To the last one, put the Button.
  3. To the second column, make 50% of the width.
  4. To the whole line, change the responsive property to true.
  5. For the line, make the attribute ng-repeat and put it in the center column for the parameters. The second one - the name.

Card

Basic Cards Screen

The grid with 4 columns is used. Each one has the Card component with different properties. The Grid Row has the property Responsive set to Small. When on large and medium screens, the Card would be shown in a row. On the small screen, it is organized in a column.
The two buttons organized in a button group redirect to more Card samples:
Cards with Image and Cards Showcase Screen.

Cards with Image

The sample with the deactivated menu (by means of the sideMenuActive directive for the Page) and a set of three Card Items: one with two texts of different Container properties, one with the image and one with the styled icon and a text.

Cards Showcase Screen

The realization with Ionic:​

  1. Put the Cards component to the screen.
  2. The type of the second item is item-avatar.
  3. Put there an Image and a Text.
  4. Add another item with the type of item-body.
  5. Place there an image and add full-image class.
  6. Place a text with some description there.

NgModel

This is an example of using ng-model for editing data:

  1. At ng-init, create a variable with initial data:
$scope.profile = {};
$scope.isEdit = false;
$scope.profile.firstName = 'John';
$scope.profile.lastName = 'Doe';
$scope.profile.phone = '1558575';
  1. Put 3 Input and 3 Text components on the screen.
  2. Bind Inputs and Text components with the help of ng-model.
  3. Configure showing the components with the help of ng-show attribute and is an isEdit flag.
  4. Place Button component to the screen. In ng-click, make toggle isEdit flag.
  5. Configure Button's color with the help of color property and isEdit flag.

FormValidation

Example how to validate a form using Angular:

  1. Create a model and a variable of the screen.
  2. Add the HTML component to the canvas and set the container property to form.
  3. Add another attribute and call it name. The value of the attribute to loginForm.
  4. Add the Form component and place it into the HTML component.
  5. Add 3 Textarea components, 3 Input components, and a Button.
  6. Add a unique name and ng-model to each Input and Textarea.
  7. Add ng-model-options and set it to blue so that the models are updated on blue.
  8. Add a Label above the form to display the error messages. To make the error message appear as the label test you need to set up the TBD.
  9. Configure the Input of errors for text, using the bind from form's name and inputs with the needed rules.
  10. Add a function to the Button and pass the form instance to the function. To the Button's submit add a function, where the parameter is formed instance for checking in the code.

Input validation:

  • username
    • ng-pattern: /^[A-Za-z][A-Za-z0-9]$/;*
    • error message visibility: *loginForm.username.$error.pattern
  • email
    • required
    • type = email
    • email format message visibility: loginForm.userEmail.$error.email;
    • required message visibility: loginForm.userEmail.$touched && loginForm.userEmail.$error.required

AngularDirectives

Please see all examples that use ng-model directive.

Spinner

  1. Create a CSS with .centered-spinner class.
  2. Drag and drop the Spinner component and add add the CSS class to it. Open the init() function in Scope and add this code: 
$scope.showSpinner1=true;
  1. Drag and drop the Button component. Using the button ng-click, set the spinner to show or hide. As an example, you can use the following code: 
(showSpinner1)?showSpinner1=false:showSpinner1=true
  1. Set the button Text property to Show/Hide.

Invoke Modal

To invoke a Modal screen:

  1. Create a Modal screen with Modal1 name.
  2. Add a Button that will invoke the snippet to open the Modal screen.
  3. Set the Modal screen name in the snippet and optionally pass any data using modal.scope.
  4. Inside the Modal screen it's now possible to bind the variables passed in.

ng-repeat is used to display a list of users. With the help of ng-click, the selected user is passed to the snippet which opens the Modal screen. The user data is now available in the Modal scope and can be displayed on the screen. Any changes to the user will be displayed as as well. To prevent changes on the screen, it's possible to use angular.copy(user).

Scroll

  1. Add Image asset with full-image class.
  2. Add a Scroll component and drop a List inside.
  3. Disable content scrolling.
  4. Add ng-repeat to the List item.

DelegateScroll

  1. Create page with content.
  2. Set the Delegate Handle property of Content to mainScroll.
  3. Add a ​List. Add ng-repeat directive to the first List Item, remove others.
  4. Add Input and Button below.
  5. In Button's ng-click add scope function with the next code:
var $ionicScrollDelegate = Apperyio.get("$ionicScrollDelegate");
if ($scope.newTeam.name) {
  $scope.teams.unshift(angular.copy($scope.newTeam));
  $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
  $scope.newTeam.name = undefined;
} else {
  alert('please enter team name');
}
  1. After ad​ding the Page item will be scrolled to top.

ImageScroll

  1. Drop the Scroll component and set dimensions to 100%.
  2. Drop Image into the Scroll and upload some big sized image into it.

Dynamic Header

The sample contains a Toggle Header and a Toggle Footer toggling for which can be disabled. To deactivate toggling, define Show Footer/Header as False under the PROPERTIES tab for the Page component.