IMA BuildeRz v18

Easy Creating Your Own Hybrid Apps Without Coding

Helper Tools -» (IMAB) Code Docs

Reference
Ionic Class

ClassName for Colors

When you find the className in page editor, it is the color, you can replace it with another className.

TEXT BACKGROUND BUTTON ITEM
light light-bg item item-light
stable stable-bg item item-stable
positive positive-bg item item-positive
positive-900 positive-900-bg item item-positive-900
calm calm-bg item item-calm
calm-900 calm-900-bg item item-calm-900
balanced balanced-bg item item-balanced
balanced-900 balanced-900-bg item item-balanced-900
energized energized-bg item item-energized
energized-900 energized-900-bg item item-energized-900
assertive assertive-bg item item-assertive
assertive-900 assertive-900-bg item item-assertive-900
royal royal-bg item item-royal
royal-900 royal-900-bg item item-royal-900
dark dark-bg item item-dark

You can change this color scheme using Custom Themes

Filter
HTML
<div ng-bind-html="item.string | strHTML"></div>
<div ng-bind-html="item.string | to_trusted"></div>
Trusted URL

Example using in iframe

<iframe width="100%" ng-src="{{ 'http://domain/page' | trustUrl }}" ></iframe>

Example using in audio

<audio controls="controls" ng-src="'http://domain/file.ogg' | trustUrl }}" ></audio>

Example using in youtube

<div class="embed_container"><iframe width="100%" ng-src="{{ 'https://www.youtube.com/embed/YOUTUBE_ID' | trustUrl }}" allowfullscreen></iframe></div>
Limit
<div>{{ item.string | limitTo:140 | strHTML }}</div>
<div ng-repeat="item in items | limitTo : 10:0" >
Date
TimeStamp JS
<div>{{ item.month | date:'dd-MM-yyyy' }}</div>
String
<div>{{ item.month | strDate | date:'dd-MM-yyyy' }}</div>
TimeStamp PHP
<div>{{ item.month | phpTime | date:'dd-MM-yyyy' }}</div>
more: w3schools
Escape
<div>{{ item.string | strEscape }}</div>
Unscape + Trusted HTML
<div ng-bind-html="item.string | Unscape"></div>
Number
<div>{{ item.string | number }}</div>
Currency
<div>{{ item.string | currency:"Rp.":2 }}</div>
Directive

CALL

code
<button run-app-call phone="082233333734" class="button icon-left ion-android-call">082233333734</button>
config.xml
<allow-intent href="tel:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

SMS

code
<button run-app-sms phone="082233333734" message="Your Message" class="button button-assertive icon-left ion-email">SMS</button>
config.xml
<allow-intent href="sms:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Email

code
<button run-app-email email="jasman@ihsana.com" subject="Subject Message" message="Your Message" class="icon-left ion-email">Email</button>
config.xml
<allow-intent href="mailto:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Line

code
<button run-app-line message="Your Message" class="button button-calm icon-left ion-ios-chatbubble">Line</button>
config.xml
<allow-intent href="line:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Whatsapp

code
<button run-app-whatsapp message="Your Message" class="button button-calm icon-left ion-social-whatsapp">Whatsapp</button>
config.xml
<allow-intent href="whatsapp:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Facebook

code
<button run-app-facebook link="http://ihsana.com" class="button button-calm icon-left ion-social-facebook">Facebook</button>
config.xml
<allow-intent href="fbapi20130214:*" />
<allow-intent href="fb:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Twitter

code
<button run-app-twitter message="Your Message" class="button button-calm icon-left ion-social-twitter">Twitter</button>
config.xml
<allow-intent href="twitter:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Social Sharing

code
<button run-social-sharing message="Your Message" class="button button-calm icon-left">Share This</button>
config.xml
<allow-intent href="whatsapp:*" />
<allow-intent href="line:*" />
<allow-intent href="twitter:*" />
plugin
  • cordova-plugin-whitelist
  • cordova-plugin-inappbrowser

Open URL

code
<a run-open-url href="http://yourlink">Link</a>

GEO Location

code
<a run-app-geo href="geo:78,454">Link</a>

App Browser

code
<button run-app-browser href="http://yourlink">Link</button>

Webview

code
<button run-webview href="http://yourlink">Link</button>

Zoom Image

code
<img zoom-view src="thumbnail.jpg" zoom-src="large.jpg" />

Date Picker

code
<div class="item" ion-datetime-picker ng-model="datetimeValue">Date: {{datetimeValue| date: "yyyy-MM-dd H:mm:ss"}}</div>