WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Lists


Lists ar terribly helpful of any net or mobile application.They can be combined with different markup language parts to make totally different menus, tabs or to interrupt the monotony of pure text files.

Creating Ionic List

When you wish to make a basic list your tag has to have the list category assigned , and your tag can use the item category. Another attention-grabbing issue is that you simply don't even have to be compelled to use , and tags for your lists.Of course we are able to use the other parts however the vital issue is to feature active and active categories befittingly.
<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.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
welookups.com