cronapp-framework-mobile-js 2.8.9

package/components/templates/inlinetextinput.template.html

@@ -0,0 +1,4 @@
+<div class="item item-input">
+    <span class="input-label">Label</span>
+    <input type="text" ng-model="vars.input${RANDOM}" aria-label="Aria Label Text" placeholder="input placeholder" mask keyboard>
+</div>

package/components/templates/ion-footer-bar.template.html

@@ -0,0 +1,9 @@
+<ion-footer-bar class="bar bar-footer bar-positive" xattr-theme="bar-positive">
+    <div class="buttons">
+        <button class="button button-left bar-energized" left-button-theme="background-color: #387ef5;" id="crn-button-left" style="background-color: #387ef5;">Left Button</button>
+    </div>
+    <h1 class="title" xattr-position="text-align: center;" style="left: 91px; right: 110px; text-align: center;" id="crn-heading-title">Title!</h1>
+    <div class="buttons">
+        <button class="button button-right bar-balanced" right-button-theme="background-color: #387ef5;" id="crn-button-right" style="background-color: #387ef5;">Right Button</button>
+    </div>
+</ion-footer-bar>

package/components/templates/ion-header-bar.template.html

@@ -0,0 +1,13 @@
+<ion-header-bar class="bar bar-positive" data-component="crn-ion-header-bar" xattr-theme="bar-positive">
+  <div class="buttons buttons-left header-item" data-component="crn-header-button" id="crn-header-button-1">
+    <button class="button button-clear component-holder" menu-toggle="left">
+      <i class="ion ion-android-menu"></i>
+    </button>
+  </div>
+  <h1 class="title" align-title="text-align: center;" style="text-align: center; left: 40px; right: 40px;">Title!</h1>
+  <div class="buttons buttons-right header-item" data-component="crn-header-button" id="crn-header-button-2">
+    <button class="button button-clear component-holder" menu-toggle="right">
+      <i class="ion ion-android-menu"></i>
+    </button>
+  </div>
+</ion-header-bar>

package/components/templates/ion-tab-item.designtime.html

@@ -0,0 +1,5 @@
+<a class="tab-item has-badge">
+  <span class="badge">{{attrs.badge}}</span>
+  <i class="icon {{attrs['icon-off']}}"></i>
+  <span class="tab-title">{{attrs.title}}</span>
+</a>

package/components/templates/ion-tab.template.html

@@ -0,0 +1,8 @@
+<ion-tabs class="tabs-icon-bottom tabs-standard tabs-positive" data-component="crn-ion-tab" xattr-theme="tabs-positive">
+  <ion-tab title="Home" id="ion-tab-${RANDOM}-1" icon-on="ion ion-ios-home" icon-off="ion ion-ios-home" data-component="crn-ion-tab-item" href="" badge="" class="">
+  </ion-tab>
+  <ion-tab title="Chat" id="ion-tab-${RANDOM}-2" icon-on="ion ion-chatbubbles" icon-off="ion ion-chatbubbles" data-component="crn-ion-tab-item" href="" badge="">
+  </ion-tab>
+  <ion-tab title="Profile" id="ion-tab-${RANDOM}-3" icon-on="fa fa-user" icon-off="fa fa-user" data-component="crn-ion-tab-item" href="" badge="1">
+  </ion-tab>
+</ion-tabs>

package/components/templates/item.avatar.template.html

@@ -0,0 +1,5 @@
+<a class="item item-avatar-left text-left" xattr-image-position="item-avatar-left" xattr-text-position="text-left">
+  <img alt="Avatar" src="img/nophoto.png" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+  <h2 class="dark" xattr-theme="dark">Item Title</h2>
+  <h3 class="dark" xattr-theme="dark">Item Subtitle</h3>
+</a>

package/components/templates/item.icon.template.html

@@ -0,0 +1,4 @@
+<a class="item item-icon-left" xattr-icon-position="item-icon-left" href="" xattr-text-position="text-left">
+  <i class="icon ion ion-home dark" xattr-theme="dark" xattr-icon-size="font-size:200%;" style="font-size:200%;"></i>
+  <h2 class="dark" xattr-theme="dark">Item Content</h2>
+</a>

package/components/templates/item.options.template.html

@@ -0,0 +1,14 @@
+<div class="crn-item-options" data-item="true">
+  <ion-option-button class="button-positive button" data-component="crn-button">
+    <i class="ion ion-home"></i>
+    <span>Home</span>
+  </ion-option-button>
+  <ion-option-button class="button-assertive button"  data-component="crn-button">
+    <i class="ion ion-trash-a"></i>
+    <span>Delete</span>
+  </ion-option-button>
+  <ion-option-button class="button-positive button"  data-component="crn-button">
+    <i class="ion ion-edit"></i>
+    <span>Edit</span>
+  </ion-option-button>
+</div> vc

package/components/templates/item.slider.template.html

@@ -0,0 +1,4 @@
+<ion-slide xattr-theme="dark-bg" id="crn-slider-item-${RANDOM}-1" data-component="crn-slider-item"
+    class="dark-bg active" style="width: 100%; height: 200px; position: relative"  data-container="true" data-replace="true">
+    <h2 data-component="crn-label" style="color: white; font-weight: bold; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute;" data-container="true" data-replace="true">SLIDE TITLE</h2>
+</ion-slide>

package/components/templates/item.swipe.template.html

@@ -0,0 +1,14 @@
+<ion-list crn-datasource="" class="listCanSwipe" id="crn-list-swipe${RANDOM}">
+  <ion-item class="item" id="crn-list-item-swipe${RANDOM}" data-component="crn-item-swipe">
+    <h2 class="titleItem" style="display: inline">Item</h2>
+    <div id="crn-item-options${RANDOM}" class="component-holder" data-component="crn-item-options">
+      <div class="crn-item-options" data-item="true">
+        <ion-option-button id="crn-option-button${RANDOM}" data-component="crn-button" class="button-positive button editButton">
+          <i class="ion ion-edit"></i><span>Edit</span>
+        </ion-option-button>
+        <ion-option-button id="crn-option-button${RANDOM}-2" data-component="crn-button"
+          class="button-assertive button deleteButton"><i class="ion ion-trash-a"></i><span>Delete</span></ion-option-button>
+      </div>
+    </div>
+  </ion-item>
+</ion-list>

package/components/templates/item.template.html

@@ -0,0 +1,5 @@
+<ion-item class="item dark text-left component-holder item-complex" xattr-theme="dark" xattr-text-position="text-left" data-replace="true" >
+    <div class="item-content">
+        <p>Item 1</p>
+    </div>
+</ion-item>

package/components/templates/item.thumbnail.template.html

@@ -0,0 +1,5 @@
+<a class="item item-thumbnail-left text-left" xattr-image-position="item-thumbnail-left" href="" xattr-text-position="text-left">
+    <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100"  class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+    <h2 class="dark" xattr-theme="dark">Item Title</h2>
+    <h3 class="dark" xattr-theme="dark">Item Subtitle</h3>
+</a>

package/components/templates/kendo-chat.designtime.html

@@ -0,0 +1,20 @@
+<div id="chat" data-role="chat" class="k-widget k-chat">
+    <div class="k-message-list k-avatars" data-role="chat" aria-live="polite">
+        <div class="k-message-list-content">
+            <div me="" class="k-message-group k-alt k-no-avatar">
+                <div class="k-message k-only">
+                    <time class="k-message-time">22:01:47</time>
+                    <div class="k-bubble">Ola, seja bem vindo ao cronchat</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="k-message-box" data-role="chat"><label class="k-hidden"
+                                                       for="inputId_80fd3281-a8fe-4b57-bd57-23dd2ccbc752">Digite aqui sua mensagem</label><input type="text" class="k-input" id="inputId_80fd3281-a8fe-4b57-bd57-23dd2ccbc752"
+                                                                                                                                                 placeholder="Type here...">
+        <button class="k-button k-flat k-button-icon k-button-send" title="Send message" aria-label="Send message">
+            <svg version="1.1" ixmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"></path></svg>
+        </button>
+    </div>
+    <div class="k-toolbar-box" role="toolbar" style="display:none;"></div>
+</div>

package/components/templates/kendo-chat.template.html

@@ -0,0 +1,75 @@
+<kendo-chat
+  id="kendo-chat${RANDOM}"
+  chat-placeholder="Digite uma mensagem"
+  ng-on-post-message=""
+  ng-on-send-message=""
+  ng-on-typing-start=""
+  ng-on-typing-end=""
+>
+  <div data-role="chat" class="k-widget k-chat">
+    <div class="k-message-list k-avatars" data-role="chat" aria-live="polite">
+      <div class="k-message-list-content">
+        <div cronapp="" class="k-message-group">
+          <p class="k-author">Cronapp</p>
+          <img
+            src="https://ide.cronapp.io/resources/favicon/favicon.svg"
+            alt="Cronapp"
+            class="k-avatar"
+          />
+          <div class="k-message k-first">
+            <time class="k-message-time">14:25:32</time>
+            <div class="k-bubble">Olá Usuário, este é o Cron Chat</div>
+          </div>
+          <div class="k-message k-last">
+            <time class="k-message-time">14:25:32</time>
+            <div class="k-bubble">Seja bem vindo!</div>
+          </div>
+        </div>
+        <div me="" class="k-message-group k-alt">
+          <img
+            src="https://www.creph.com.br/assets/all/img/default.png"
+            alt="User"
+            class="k-avatar"
+          />
+          <div class="k-message k-first">
+            <time class="k-message-time">14:25:37</time>
+            <div class="k-bubble">Olá!</div>
+          </div>
+          <div class="k-message k-last">
+            <time class="k-message-time">14:25:46</time>
+            <div class="k-bubble">Muito legal! :)</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="k-message-box" data-role="chat">
+      <label class="k-hidden" for="inputId_56884ad4-d5ca-4bb0-bc84-d352644d6410"
+        >Digite a mensagem</label
+      ><input
+        type="text"
+        class="k-input"
+        id="inputId_56884ad4-d5ca-4bb0-bc84-d352644d6410"
+        placeholder="Digite a mensagem"
+      /><button
+        class="k-button k-flat k-button-icon k-button-send"
+        title="Send message"
+        aria-label="Send message"
+      >
+        <svg
+          version="1.1"
+          ixmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 16 16"
+          xml:space="preserve"
+        >
+          <path
+            d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+    <div class="k-toolbar-box" role="toolbar" style="display: none;"></div>
+  </div>
+</kendo-chat>

package/components/templates/list.avatar.template.html

@@ -0,0 +1,7 @@
+<div class="" crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
+	<a class="item item-avatar-left text-left" xattr-position="item-avatar-left" xattr-text-position="text-left" data-component="crn-list-item-avatar" id="crn-list-item-avatar-${RANDOM}">
+    <img alt="Avatar" src="img/nophoto.png" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+    <h2 class="dark" xattr-theme="dark">List Title</h2>
+    <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
+	</a>
+</div>

package/components/templates/list.icon.template.html

@@ -0,0 +1,6 @@
+<div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-icon${RANDOM}"  xattr-text-position="text-left">
+  <a class="item item-icon-left" xattr-position="item-icon-left" data-component="crn-list-item-icon" id="crn-list-item-icon${RANDOM}" href="">
+    <i class="icon ion ion-home dark" xattr-theme="dark"></i>
+    <h2 class="dark" xattr-theme="dark">List Content</h2>
+  </a>
+</div>

package/components/templates/list.swipe.template.html

@@ -0,0 +1,16 @@
+<ion-list crn-datasource="" class="listCanSwipe" id="crn-list-swipe${RANDOM}">
+  <div ng-repeat="rowData in datasource.data" class="to-repeat">
+    <ion-item class="item" id="crn-list-item-swipe${RANDOM}" data-component="crn-item-swipe">
+      <h2 style="display: inline;">Item</h2>
+      <div id="crn-item-options${RANDOM}" class="component-holder" data-component="crn-item-options">
+        <div class="crn-item-options" data-item="true">
+          <ion-option-button id="crn-option-button${RANDOM}" data-component="crn-button" class="button-positive button editButton">
+            <i class="ion ion-edit"></i><span>Edit</span>
+          </ion-option-button>
+          <ion-option-button id="crn-option-button${RANDOM}-2" data-component="crn-button"
+            class="button-assertive button deleteButton"><i class="ion ion-trash-a"></i><span>Delete</span></ion-option-button>
+        </div>
+      </div>
+    </ion-item>
+  </div>
+</ion-list>

package/components/templates/list.template.html

@@ -0,0 +1,5 @@
+<div class="list">
+  <div crn-datasource=""  ng-repeat="rowData in datasource.data">
+    <ion-item data-component="crn-list-item" class="item dark text-left item-content" xattr-theme="dark" xattr-text-position="text-left">Content</ion-item>
+  </div>
+</div>

package/components/templates/list.thumbnail.template.html

@@ -0,0 +1,7 @@
+<div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
+    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" href="" xattr-text-position="text-left">
+        <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+        <h2 class="dark" xattr-theme="dark">List Title</h2>
+        <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
+    </a>
+</div>

package/components/templates/maps.designtime.html

@@ -0,0 +1 @@
+<iframe class="cronMap" src="" width="" height="" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

package/components/templates/maps.template.html

@@ -0,0 +1 @@
+<cron-map class="cronMap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3655.2165684653255!2d-46.71442368505524!3d-23.632413984647545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce51ad27188dbf%3A0x999630947e3dda9f!2sTechne!5e0!3m2!1spt-BR!2sbr!4v1627059464115!5m2!1spt-BR!2sbr" width="100%" height="400"></cron-map>

package/components/templates/menu.template.html

@@ -0,0 +1,21 @@
+<ion-side-menus ng-if="!isOldMenu">
+  <ion-side-menu-content drag-content="false">
+      <ion-nav-bar class="bar-stable" ng-show="isOldMenu">
+          <ion-nav-back-button></ion-nav-back-button>
+          <ion-nav-buttons side="left">
+              <button aria-labelledby="menu_template_left_navicon_sr" class="button button-clear" menu-toggle="left" data-component="crn-button" xattr-type="button-clear">
+                  <i class="icon ion-navicon"></i>
+                  <span id="menu_template_left_navicon_sr" class="sr-only">{{'Accessibility.Button.Aria.Label.NavIcon' | translate}}</span>
+              </button>
+          </ion-nav-buttons>
+      </ion-nav-bar>
+      <ion-nav-view name="menuContent"></ion-nav-view>
+  </ion-side-menu-content>
+  <ion-side-menu side="left">
+      <div ng-include src="'views/logged/menu.view.html'"></div>
+  </ion-side-menu>
+  <ion-side-menu side="right">
+      <div ng-include src="'views/logged/menu.view.html'"></div>
+  </ion-side-menu>
+</ion-side-menus>
+<div ng-include src="'views/logged/menu.view.html'" ng-if="isOldMenu"></div>

package/components/templates/multiselect.template.html

@@ -0,0 +1,5 @@
+<div class="item item-input item-select">
+	<span class="input-label">Label</span> 
+	<select aria-label="Seleção Múltipla" multiple ng-model="vars.multiselect${RANDOM}" crn-datasource="" class="form-control" id="multiselect-${RANDOM}" name="multiselect-${RANDOM}">
+	</select>
+</div>

package/components/templates/nav.bar.template.html

@@ -0,0 +1,5 @@
+<ion-nav-buttons side="right" class="crn-ion-nav-buttons">
+    <button class="button button-stable">
+        <i class="icon ion-plus-round"></i>
+        </button>
+</ion-nav-buttons>

package/components/templates/publicMenu.template.html

@@ -0,0 +1,14 @@
+<ion-side-menus>
+  <div class="row" data-container="true">
+    <ion-side-menu-content drag-content="false">
+      <ion-nav-view name="menuContent">
+      </ion-nav-view>
+    </ion-side-menu-content>
+    <ion-side-menu side="left" >
+      <div ng-include src="'views/public/menu.view.html'"></div>
+    </ion-side-menu>
+    <ion-side-menu side="right" >
+      <div ng-include src="'views/public/menu.view.html'"></div>
+    </ion-side-menu>
+  </div>
+</ion-side-menus>

package/components/templates/radiogroup-dynamic.template.html

@@ -0,0 +1,15 @@
+<div class="component-holder ng-binding ng-scope" data-component="crn-radiogroup" id="crn-radiogroup-726495"> 
+  <div class="list radio-group" crn-datasource="[{'key': 1,'value':'Value 1' },{'key': 2,'value':'Value 2','checked' : false },{'key': 3,'value':'Value 3'}]"> 
+	<div class="item item-divider ng-binding">
+	   RadioGroup : {{datasource.active}}
+	</div> 
+	<label class="item item-radio ng-not-empty ng-valid" ng-repeat="rowData in datasource.data"> 
+	<input aria-label="Aria Label Text" type="radio" ng-model="datasource.active" ng-value="rowData.key" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" style="">
+	  <div class="radio-content">
+		<div class="item-content disable-pointer-events">
+		  <span class="ng-binding">{{rowData.value}}</span>
+		</div>
+		<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
+	  </div></label>
+  </div> 
+</div> 

package/components/templates/radiogroup.template.html

@@ -0,0 +1,21 @@
+<div class="list radio-group" ng-model="vars.radio${RANDOM}" data-component="crn-radio">
+  <div class="item item-divider ng-binding">
+    RadioGroup
+  </div>
+  <div data-component="crn-radioOption">
+    <label class="item item-radio" crn-value="" value="1"> <input aria-label="Aria Label Text" type="radio"
+        name="group">
+      <div class="radio-content">
+        <div class="item-content">Choose A</div><i class="radio-icon ion-checkmark"></i>
+      </div>
+    </label>
+  </div>
+  <div data-component="crn-radioOption">
+    <label class="item item-radio" crn-value="" value="2"> <input aria-label="Aria Label Text" type="radio"
+        name="group">
+      <div class="radio-content">
+        <div class="item-content">Choose B</div> <i class="radio-icon ion-checkmark"></i>
+      </div>
+    </label>
+  </div>
+</div>

package/components/templates/range.template.html

@@ -0,0 +1,5 @@
+<div class="item range range-positive" id="crn-range${RANDOM}">
+    <i class="icon ion-ios-sunny-outline left-icon"></i>
+    <input class="ng-pristine ng-untouched ng-valid ng-empty" aria-label="Volume" type="range" name="volume" min="0" max="100" value="33" ng-model="vars.range${RANDOM}">
+    <i class="icon ion-ios-sunny right-icon"></i>
+</div>

package/components/templates/rating.template.html

@@ -0,0 +1,9 @@
+<div class="energized" xattr-theme="energized">
+    <cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="ion ion-android-star-outline" xattr-default-value="">
+        <i style="font-size: 200%;" class="component-holder ion ion-android-star"></i>
+        <i style="font-size: 200%;" class="component-holder ion ion-android-star"></i>
+        <i style="font-size: 200%;" class="component-holder ion ion-android-star"></i>
+        <i style="font-size: 200%;" class="component-holder ion ion-android-star"></i>
+        <i style="font-size: 200%;" class="component-holder ion ion-android-star"></i>
+    </cronapp-rating>
+</div>

package/components/templates/search.template.html

@@ -0,0 +1,6 @@
+<div class="item item-input" id="cloud-search${RANDOM}">
+	<i class="icon ion-search placeholder-icon"></i> 
+	<input aria-label="Aria Label Text" type="text" placeholder="Placeholder text"
+		ng-model="vars.search${RANDOM}" mask="" cronapp-filter="" crn-datasource="" 
+		cronapp-filter-caseinsensitive="true" cronapp-filter-autopost="true" cronapp-filter-operator="=" keyboard>
+</div>

package/components/templates/slider.template.html

@@ -0,0 +1,24 @@
+<div class="crn-slider display-ion-slider" id="crn-slider-${COMPONENTID}">
+  <ion-slide-box class="" auto-play="true" slide-interval="2000" does-continue="true">
+    <ion-slide xattr-theme="positive-bg" id="crn-slider-item-${RANDOM}-1" data-component="crn-slider-item"
+      class="positive-bg active" style="width: 100%; height: 200px; position: relative" data-container="true"
+      data-replace="true">
+      <h2 data-component="crn-label"
+        style="color: white; font-weight: bold; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute"
+        data-container="true" data-replace="true">SLIDE 1</h2>
+    </ion-slide>
+    <ion-slide xattr-theme="royal-bg" id="crn-slider-item-${RANDOM}-2" data-component="crn-slider-item" class="royal-bg"
+      style="width: 100%; height: 200px; position: relative" data-container="true" data-replace="true">
+      <h2 data-component="crn-label"
+        style="text-align: center; color: white; font-weight: bold; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute"
+        data-container="true" data-replace="true">SLIDE 2</h2>
+    </ion-slide>
+    <ion-slide xattr-theme="balanced-bg" id="crn-slider-item-${RANDOM}-3" data-component="crn-slider-item"
+      class="balanced-bg" style="width: 100%; height: 200px; position: relative" data-container="true"
+      data-replace="true">
+      <h2 data-component="crn-label"
+        style="text-align: center; color: white; font-weight: bold; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute"
+        data-container="true" data-replace="true">SLIDE 3</h2>
+    </ion-slide>
+  </ion-slide-box>
+</div>

package/components/templates/tabs-icon-only.template.html

@@ -0,0 +1,16 @@
+<ion-tabs class="tabs-striped background-white tabs-icon-blue icon-size-large component-holder" background-color="background-white" tabs-color="tabs-icon-blue" tabs-size="icon-size-large" data-component="crn-tabs-icon-only" id="crn-tabs-icon-only-707450">
+    <div class="tabs">
+        <a class="tab-item active" title="Home" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon ion-home"></i>
+            <span>Home</span>
+        </a>
+        <a class="tab-item" title="User" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon fa fa-user"></i>
+            <span>User</span>
+        </a>
+        <a class="tab-item" title="Config" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon ion-gear-a"></i>
+            <span>Config</span>
+        </a>
+    </div>
+</ion-tabs>

package/components/templates/tabs.template.html

@@ -0,0 +1,5 @@
+<div class="tabs">
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Home</a> 
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Favorites</a> 
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Settings</a> 
+</div>