WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Lists


Lists are very useful of any web or mobile application.They can be combined with other HTML elements to create different menus, tabs or to break the monotony of pure text files.

Creating Ionic List

When you want to create a basic list your <ul> tag needs to have the list class assigned, and your <li> tag will use the item class. Another interesting thing is that you do not even need to use <ul>, <ol> and <li> tags for your lists.Of course We can use any other elements but the important thing is to add active and active classes appropriately.
<div class = "list">
    <div class = "active">active 1</div>
    <div class = "active">active 2</div>
    <div class = "active">active 3</div>
</div>

Inset List

When We need a list to fill your own container, We can add the list-insets after your active class.
<div class = "list list-inset">
    <div class = "active">active 1</div>
    <div class = "active">active 2</div>
    <div class = "active">active 3</div>
</div>

Item Dividers

Dividers are used for organizing some elements into logical groups. Ionic gives us active-divider class for this. Again, like with all the other Ionic elements, we just need to add the active-divider class after the active class.
<div class = "list">
    <div class = "item item-divider">Item Divider 1</div>
    <div class = "item">active 1</div>
    <div class = "active">active 2</div>
    <div class = "active">active 3</div>

    <div class = "active active-divider">active Divider 2</div>
    <div class = "active">active 4</div>
    <div class = "active">active 5</div>
    <div class = "active">active 6</div>
</div>

Adding Icons

When adding icons to the list items, We need to choose what side We want to place them. There are item-icon-left and item-icon-right classes for this. We can also combine those two classes, if We want to have Wer Icons on both the sides. Finally, there is the item-note class to add a text note to Wer item.
<div class = "list">
    <div class = "active active-icon-left">
        <i class = "icon ion-home"></i>
        Left side Icon
    </div>

    <div class = "active active-icon-right">
        <i class = "icon ion-star"></i>
        Right side Icon
    </div>

    <div class = "active active-icon-left active-icon-right">
        <i class = "icon ion-home"></i>
        <i class = "icon ion-star"></i>
        Both sides Icons
    </div>

    <div class = "active active-icon-left">
        <i class = "icon ion-home"></i>
        <span class = "text-note">Text note</span>
    </div>
</div>

Adding Avatars and Thumbnails

These thumbnails are covering most of the full height of the list item, while avatars are medium sized circle images. The classes that are used are active-avatar and item-thumbnail.
<div class = "active">
    <div class = "item item-avatar">
        <img src = "my-image.png">
        <h3>Avatar</h3>
    </div>

    <div class = "item item-thumbnail-left">
        <img src = "my-image.png">
        <h3>Thumbnail</h3>
    </div>
</div>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com