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.
Related
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>
Good day all
I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.
In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.
In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.
I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
Is there something similar that one can use, or do I need to use JavaScript to achieve this?
Any advice would be greatly appropriated
So since I've been asked for a solution by someone else, let me post the workaround that I used:
I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS (in my Type Sctipr file):
#ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.
Hope this helps!
Is it possible, using Foundation Framework, to make a scrollable sticky div like this (StyckyScroll)?
For example:
<div class="row">
<div class="eight columns">
Very long content here
</div>
<div class="four columns">
Small but SCROLLABLE CONTENT here
</div>
</div>
The problem is that the sticky div gets out of the parent container.
Thank you in advance.
Foundation supports a couple types of sticky navigation. If you're looking for a navbar-type implementation, check out the docs on their top bar module (docs and example at: http://foundation.zurb.com/docs/components/topbar.html)
You can implement a sticky navbar in foundation by wrapping the normal top bar module like so:
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
YOUR NAVBAR MARKUP HERE
</nav>
</div>
If you're looking for sticky navigation that's less omnipresent than the top-bar, you can also use their Magellan plugin (docs and example at: http://foundation.zurb.com/docs/components/magellan.html)
Using
<div class="lift:Menu.builder"/>
menu on website is vertically, any ideas because i cant found anywhere, how to make menu across ?
This is more a CSS question than a Lift question. The HTML produced for the menu looks something like this:
<div class="column span-6 colborder sidebar">
<hr class="space" />
<ul>
<li> <span>Home</span></li>
<li> Login</li>
<li> Sign Up</li>
<li> Lost Password</li>
<li> Search</li>
</ul>
...
</div>
I.e., about as vanilla as possible, so it's very easy to add some CSS to create a horizontal menu out of the list—see for example the "Horizontal lists" examples on Listamatic.
It would be simplest just to add the CSS code to the header in src/main/webapp/templates-hidden/default.html, but you could also use your own separate CSS file without too much fuss.
I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.