Ionic 4: todo App + firebase

12 Creating Lists and Sliding List in Ionic Building Mobile A

lisps and sliding lisps in this lesson we are going to learn how we can clear different types of lists in ionic we'll also learn how we can create lists with

slidable items in slidable lists the items can be slid either to the left or to the right to reveal options that are otherwise hidden and finally we'll learn how we can customize the look of these

list items so here we are back inside Visual Studio code and I'll just get rid of all the content inside my iron content component so I'll just get rid of all these tags

that we created in the last video and I'll save the file and now again the page goes blank I'll also make a little more room on the screen so I'll just go ahead and hide

the Explorer here and now I have a little more room on my screen to create a simple list the component that you have to use is iron list for each item inside your list you have

to use a component called eye on item and inside I an item the content of your item goes so here you can just go ahead and type in anything that you want you

as I save it you can see that I get a list of items on my page as of now the only thing that we have inside our eye on item is the text list item 1 but you can also add images and text of variable

sizes inside your list item to use text of variable size and formatting all you have to do is just use the component iron label and inside your iron label within an h2 tag you can type in the

heading for your list item for example we can go ahead and type in fact publishing and as I save it you can see that I get this text just after my h2 tag I create an h3 tag

and inside the h3 tag we can go ahead and type in a subtitle and as I save you can see that I get their text in a slightly smaller font after the h3 tag you can use a P tag or

the paragraph tag to add some descriptive content and as I save you can see that I get the text but it carries different formatting the text is very light in color and the

font size is also smaller just like you can have different types of eggs you can also add images inside your eye on item and you can do that in two ways you can either add an avatar image which

is a round image or you can add a thumbnail image which is a square image let's add an avatar image first to add an avatar image all you have to do is just use the component I an avatar and

inside this component you can use the image tag and specify the URL to an image for now I just paste in the URL to the adorable avatars API that gives a random avatar image that will be

displayed inside our application so now as I save it you can see that I get the image but the image in the text are very close to each other so the formatting is not right and

to fix that on iron avatar we have to add the slot property and specify whether we want to have the iron avatar in the start or in the end of the list item so if I type and start here the

list item will be displayed towards the left of the text and if I type in and here the list item will be displayed towards the end inside our iron item let's keep it start for

now and I just go ahead and copy this list item and I'll paste it just below it and now I change I an avatar to iron thumbnail and this will change the image from the

round avatar image to a square thumbnail image the size of the thumbnail image is slightly larger than the size of an avatar image if you want to get rid of this extra spacing surrounding your list

then all you have to do is just go to your iron content and get rid of this padding attribute that you have on your iron content and as we remove it and save the file you can see that now we

don't have that extra spacing outside the list so now that we know how we can create different types of lists let's learn how we can make these list items slidable so

that we can slide them towards the left or towards the right to reveal some hidden options so for now for the sake of simplicity I'll make this first list item slidable

to make a list item slidable all you have to do is wrap the Ion item inside a component called buy an item sliding so I'll just cut the closing tag and paste it after the Heian items closing

tag let's reformat the document if you save right now you will not notice any changes inside your list the list item looks exactly the same and still you cannot slide it to make its light bill

you have to add at least one and at most two iron item options components so let's square it and add one so here right after the closing of my iron item I'll use the component iron item options

and inside the iron item options component we will have to create an iron item option for each hidden option that will be revealed when the user slides the list item along with that we also

need to specify a side attribute on iron item options and the value of side can either be start or it can be end if you pass in the value start to the side in your higher item options the options

will be placed towards the left inside the list item and therefore you will have to slide your list item towards the right to reveal the options on the other hand if you pass in the value end to the

side property then the options are placed towards the right in the list item and you will have to slide them towards the left to reveal the options so let's pass in start here and inside

iron item options will create an iron item option and for now I'll just go ahead and type in the text archive on this iron item option just like I have created this first iron item options

component and pass the value start to the side property I'll create another one and this time I'll pass the value end to the side property and I will change the text on this iron item option

as delete let's save that and see how it looks like so it looks the same and as a slide the archive button which is blue in color by default is revealed

and as I slide towards the left the delete button which is also blue in color is also revealed let's try changing the colors of these buttons to do that all you have to do is just pass

in the color property on your iron item option so for this first iron item option which is towards the left I'll use the color secondary and for the second one which is the iron item option

with the text delete on it I'll use the color danger let's save that and as the application refreshes now if I slide it towards the right you can see that the archive button is green in color and if

I slide it towards the left the delete button is red in color along with specifying colors you can also pass in icons to your eye on item options to do that all you have to do is

just define an eye on icon inside your eye on item option so here I'll just go ahead and use the icon with the name ad and also I'll pass in slot and the value of slot is going to be start which means

that the icon will be placed towards the left of the text in the option now if I save it and if I slide it towards the right you can see that I get this plus icon on this eye on item option and the

icon is towards the left of this text however if you just want to have an icon and don't want to have the text you can do that as well all you have to do is just get rid of

the text and use an eye on icon with the value of slot set equal to I can only and define the name of the icon for now I'll use the trash icon and let's save it and now if I slide it towards the

left I get this icon which clearly tells me that I can use this option to delete this item from the list on the other hand if I slide towards the right I can use this archive button to archive this

list item so this is how you can create lists and sliding lists in your ionic applications in the next video we are going to learn about cards and grades in ionic