IMA BuildeRz

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
<div>{{ item.month | strDate | date:'dd-MM-yyyy' }}</div>
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

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>

App Browser

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

Webview

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

Zoom Image

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

PDF Reader

code

Online for localfile, not support using backend

<pdf-reader url="data/test.pdf" scale="page-fit" ></pdf-reader>

Date Picker

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