What is the Difference between and in Ionic framework?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



What is the Difference between <ion-list> and <div class=“list”> in Ionic framework?



I am learner and i would like to know what is the diff b/w ionic and HTML tags and which tags are good for Hybrid mobile developing apps,Can some one suggest me please below two code working fine in my mobile app but which tags are most preferable?


<div class="list">
<div class="item item-divider"> <!-- this creates the divider -->
</div>
<a class="item" href="#">
</a>




<ion-list>
<ion-item class="item-toggle">
Enable Friends
<label class="toggle">
<input type="checkbox" ng-model="settings.enableFriends">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
</ion-list>





Possible duplicate of Difference between <ion-list> and <div class="list"> in Ionic framework?
– DayOne
Aug 10 at 10:17




2 Answers
2



The difference between the two are the pure html that just use the
css, or the directives that have extended the functionality.



The ion- prefixed directives, ion-list,ion-item, etc, are angular
directives that let you have extended features (swipe to delete,
reorder, etc).
link



As mentioned here, main difference is that ionic tags serves more functionalities, and other than that.





Is there any performance issue occurs if we use pure html tags inside <ionic-content>?
– AbhiRam
Aug 10 at 10:20





Of course no, you can think ionic tags like normal tag with class= "something", namely with css extras. Therefore, using pure tags or html tags does not differ at all in terms of performance.
– Shahriyar Mammadli
Aug 10 at 10:24





Thanks,But is there is no best ionic-tags documentation for UI beatification like below link w3schools.com/howto/howto_css_images_side_by_side.asp
– AbhiRam
Aug 10 at 10:28






Ionic uses term "component" that together creates an app so documentations are based on that. Therefore, you search for proper component while developing. Ionic documentation is actually is best I think, it provides demos for its components. So, when you need specific functionality, find it in documentation and use the corresponding demo(or mostly documentation is enough). Here is the documentation if you have not seen yet: ionicframework.com/docs/components
– Shahriyar Mammadli
Aug 10 at 10:38





Ok thanks @Shahriyar Mammadli
– AbhiRam
Aug 10 at 10:43



ion-list comes with certain styles already applied to it so that you do not have to write custom CSS for them to look presentable. Also ion-list has features that come out of box enabling you to put together a quick prototype. It also includes features like swipe which are normal actions taken by users on mobile so that developers dont have to write custom javascript to enable such features.





Thanks @Sameeksha Kumari
– AbhiRam
Aug 10 at 10:44






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

make 2 or more post in bootsrap

Image
Clash Royale CLAN TAG #URR8PPP make 2 or more post in bootsrap I am making a CMS and I want to add two or more content post in every row, I can made one post in one columns, please see my code below. I am using PHP , HTML and bootstrap . CMS PHP HTML bootstrap How can I add two or more content post in every row? Code: <div class="container"> <div class="row"> <!-- Post Content Column --> <div class="col-lg-4 border border-dark rounded"> <?php $query = "SELECT * FROM POSTS"; $run_query_post = mysqli_query($connection, $query); while ($row = mysqli_fetch_assoc($run_query_post)) $post_id = $row['post_id']; $post_title = $row['post_title']; $post_author = $row['post_author']; $post_date = $row['post_date']; $post_image = $row['post_image']; $post_content = substr($row['post_content'], 0, 50); $post_status = $row['post_status']; if ($post_status !=...
Read more

Store custom data using WC_Cart add_to_cart() method in Woocommerce 3

Image
Clash Royale CLAN TAG #URR8PPP Store custom data using WC_Cart add_to_cart() method in Woocommerce 3 I am creating a membership site and totally created static pages for each Membership plans (have only 3 plans). However, I have added products for each plan and when I hit SELECT PLAN button I redirect to some custom form where I ask users range of info we are going to use to fulfil the plan (same as sneakertub.com). I have written code into the PHP page which will handle SUBMIT action of the form. This PHP file, infopage.php , will process POST data I sent via POST call and stores these all data into WC session. infopage.php $customer_name = $_POST["customer_name"]; $customer_email = $_POST["customer_email"]; $customer_sex = $_POST["customer_sex"]; $customer_age = $_POST["customer_age"]; $product_id = $_POST["product_id"]; global $wp_session; $data = array( 'customer_name' => $customer_name, 'customer_email' =...
Read more

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more