I was searching for informations about IONIC 2 grid but I didn't find complex description of it. I've got some questions:
Can I include one <ion-grid> inside another <ion-grid>?
If I have some modules can I build grid for every module separately?
If not maybe I should declare <ion-grid> higher in DOM than modules and in modules operate only on <ion row> and <ion-col>
I find something like that:
<div class="row"><div class="col-6"></div><div class="col-6"></div>
</div>
Is that IONIC (maybe the old one)?
In IONIC2 it should look like:
<ion-row">
<ion-col col-6"></ion-col>
<ion-col col-6"></ion-col>
</ion-row>
Am I right?
PS. Thats my first post on stackoverflow :D Jupi!!
Can I include one inside another ?
Yes you can, but I haven't seen a use case where this was required.
If I have some modules can I build grid for every module separately?
Yes you can, you should see <ion-grid> the same as any other Ionic component like <ion-item> or <ion-card>. Use them as much as you need them in any module.
I find something like that:
<div class="row"><div class="col-6"></div><div class="col-6"></div>
</div>
This is the old version of the , proper use and more information about the <ion-grid> component can be found here
Related
I'm using the Ionic Framework and I wonder if it's possible to defined global options for ion-item elements.
In .html files I got
<ion-item lines="none"></ion-item>
I would like every ion-item to have the "lines=nones". Is there a way to define it globally so that I could only use:
<ion-item></ion-item>
One way to achieve that would be by adding the following in the variables.scss file:
ion-item {
--inner-border-width: 0px;
}
Although to be honest, if in the future you want to show an ion-item with lines it may be hard to remember/debug why the lines are not shown when adding an <ion-item></ion-item> to the view.
So if the only difference is one attribute, I guess it'd be better to just be explicit and add lines="none" on each ion-item that you want to show without lines.
<ion-item lines="none"></ion-item>
<ion-item lines="none"></ion-item>
...
<ion-item></ion-item>
<ion-item></ion-item>
Is it possible to render regular HTML code in ionic? The reason behind is i want to render a chart, that is generated by a python code (Using Altair)
Thanks.
You can render regular html in ionic.
Let's assume you want to render the chart into an ion-item
The code goes something like this
<ion-list>
<ion-item>
<!-- Some code, you may use *ngFor to display the entire data -->
Example: <div class="exClass"><!-- May be a table -->{{ someData }}</div>
</ion-item>
</ion-list>
I have been trying to embed html element from JSON object, and It is currently displaying the html as raw code instead.
Can someone please help me ?
detail.ts
this.questionsData[i].question_type.title = "<ion-input type=\"text\" placeholder=\"Short answer\"></ion-input>";
detail.html
<ion-item *ngFor="let question of questionsData">
{{question.title}}
<br>
Text : {{question.question_type.title}}
<br>
<div [innerHTML]="question.question_type.title">
</div>
</ion-item>
Isn't it should be input box under the text : , anyone know why it's not rendered ?
Thanks
InnerHtml will only help to render pure html code on run time, you can't use ionic components to render dynamically using innerhtml. I think you need to use dynamic component loader feature in angular here. You can refer this link on use cases of this feature https://medium.com/#DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
Your approach needs to change, do not include html tags in component block, instead add parameters as json data and set it at component. Then you can interpolate the tags in the template view.
Ex:
at the component:
this.inputDataArray = [{"title":"What cartoon do you like to watch?", "name":"inp1","placeholder":"short answer"},{"title":"What movie do you like to watch?", "name":"inp2","placeholder":"short answer"}];
at the view:
<ion-item *ngFor="let question of inputDataArray">
{{question.title}}
<br>
Text : <input name={{question.name}} placeholder={{question.placeholder}} />
<br>
</ion-item>
Its just a reference, Hope it helps
This worked for me.
<div [innerHTML]="data.text"></div>
the last time I used Ionic was like a year ago. Now I create a new proyect but I realize that all teh css components of ionic had changed but if a try to use something new I cant because I think i'm using an old version.
For instance - this code, I took it from the official docs:
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
and they show up like plane buttons without style.
But if I write them as I used to, just works.
<button class="button button-positive">
Boton prueba 2
</button>
The thing is as Ionic changed their docs I don't have any reference now to look out so I don't have another alternative to update. Going nuts to accomplish this.
Thanks
In Ionic, we can do something like this for the list view:
<ion-list>
<ion-item href="#">
Butterfinger
</ion-item>
</ion-list>
And also like this:
<div class="list">
<a class="item" href="#">
Butterfinger
</a>
</div>
These 2 basically output the same layout. What is the difference between these 2? Will do it with the div method will result in better performance? If so, then why ion-list?
There is not any differences from CSS styling point of view (except some color styling on child text) between using <ion-list> and <div class="list"> because <ion-list> is a directive and it will render <div class="list"> inside it. If you inspect element you will see this
(rendered html picked from browser element inspection)
<ion-list>
<div class="list">
<ion-item href="#" class="item item-complex">
<a class="item-content" ng-href="#" href="#">
Butterfinger
</a>
</ion-item>
</div>
</ion-list>
As you can see in above code ion-list generate a div with list class.
Plus see the source code of ion-list it will make things more clearer. I am just sharing a line from source code to show what template this directive render
var listEl = jqLite('<div class="list">')
There will be no performance difference between both, but i will suggest you to use <div class="list"> if you do not want to use apis of ion-list and want to have more control over element while doing customization.
As far as your question "why ion-list" is concerned, the directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like here for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.
Quoting from documentation
However, using the ionList and ionItem directives make it easy to
support various interaction modes such as swipe to edit, drag to
reorder, and removing items.
Conclusion: So it totaly depends upon your requirement, whether to use directive or use simple class on div.