In Ionic 3, how can I expose the Ionic components in dynamically loaded HTML.
In the controller:
testHtml = `<h1>Testpage</h1><button ion-button>This should look like a button</button>`;
In the view/template:
<div innerHtml="testHtml"></div>"
Issue: The button is not rendered as an ion-button, but a regular html button.
Loading dynamic HTML will not compile the ionic components. Instead you should use the ionic classes used to create buttons like this:
testHtml = '<h1>Testpage</h1><button class="button button-md button-default button-default-md">This should look like a button</button>';
Hope this helps you.
Related
I would like to have the "ion-android-sync" icon (http://ionicons.com)
My current code is
<button class="button" ng-click="loadEvents()">L</button>
What's the proper class structure for that?
Also, if I just load the css file advertised on ionicons.com is enough?
you can use ion-icon element to use ionic icons inside button.
I hope it will reach your requirement
for example, i will add facebook logo inside button
<button class="button" ng-click="loadEvents()"><ion-icon name="logo-facebook"></ion-icon></button>
I'm using the Ionic framework and I just got the template project side-menu from them. I was wondering if it's possible to put the ion-header-bar appear above the ion-side-menu.
This is how it is right now:
This is how I want it to be:
Any ideas?
You could use an alternative drawer component for your side menu, for example:
https://github.com/beaver71/ionic-ion-drawer
Basic usage is:
<drawer side="left">
<ion-content>
....
</ion-content>
</drawer>
Here is a working example: http://codepen.io/beaver71/pen/BKpRjM/
When using ionic framework for building apps, there are two ways how UI elements can be defined:
using div tags:
<div class="bar bar-header bar-positive">
...
</div>
using directives:
<ion-header-bar class="bar-positive">
...
</ion-header-bar>
In the documentation, the first variant (using div) is used. But in a course I was watching, the second one was used (and it seemed cleaner to me).
What are the differences between the two ways shown above? Is there a preferred or recommended way of defining UI elements?
I recommend you to use Directives instead of Div if you need to access to corresponding APIs. For example for a list : http://ionicframework.com/docs/api/directive/ionList/
Using the directive will allow you to use APIs options.
BUT, if you just want a beautiful UI, and you don't need APIs, you can use div which will render templates fastly.
ion-header-bar tag is just Directive written by ionic with some fantastic attribute which you will not get in div tag
attribute like :
align-title
no-tap-scroll
this both comes with ion-header-bar tag so if you want to perform any action on the view so u can use ion tag or only for view purpose you can use div tag.
in a Intel-Xdk AppFramework 3 application i would like to style a card element according to the current os Theme.
I want the Header of the card to be the same color of the header of the page , how do i do?
card:
<div class="widget uib_w_2 widget-container content-area vertical-col uib-card d-margins section-dimension-2 cpad-1" data-uib="layout/card" data-ver="0">
<section class="card-header widget-container content-area vertical-col">card header</section>
<p>card content</p>
</div>
The card element in Intel XDK's App designer is not part of the AppFramework UI elements, its a custom element for all frameworks, so you have manually add set a class and add css to match the frameworks header color :(
Checkout example css for osTheme here and add custom css like this:
.ios7 .card-header {...}
.android .card-header {...}
...
I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div