Ionic 4: todo App + firebase

11 Inputs, Buttons, and Icons Building Mobile Apps with Ionic

inputs buttons and icons in this video we are going to learn how we can create text input fields in our ionic applications and we'll also learn how we

can create and style different types of buttons in ionic and towards the end of this video we'll also learn how we can use icons in ionic so here we are back in Visual Studio code and the first

thing I'll do is get rid of all the content within the iron content component so I'll delete all this code that I have within the iron content component and now if I save you can see

that the content on the page in our application is gone so all the content of the page inside our application goes inside our iron content everything above the iron content should be included in

your header bar and everything below iron content should be included in your footer bar so let's go ahead and learn how we can use input fields inside our ionic application to create an input

field all you have to do is use the component called iron input and this creates an input field on your page if I save the application right now you cannot see anything on the page but we

have an input field right here on the page and here I can just go ahead and type in the input there are a few attributes that you can define for this component just like a regular HTML input

element this component also takes in the type as a parameter and the type can either be text numbers telephone email etc so if I just go ahead and type in text it will accept textual input we can

also pass in a placeholder value and now the textfield becomes visible now that we have an input field in place let's create a button below this input field so inside my iron content I am

going to create a button and to create a button all you need to do is use the component called iron button within the tags you should pass in the text that you want to be displayed on your button

and as I save you can see that I get a simple button the text on the button says click me and that's because the text between the tags is click me the button component also takes in a number

of inputs if you guess the first input right it's color using the color attribute you can specify the color of your button the default color of buttons is primary which is why we have the blue

button you can also specify different colors like the danger color will change the color of the button to red now we have a red button apart from the color attribute the button accepts four

different parameters or inputs the first one is expand and the value of expand can either be full or block if you pass in block you will get a full width button but the corners of the

button will be rounded so you can see that I get a full width button but the corners are still rounded however if I pass in full I get a full width button and the corners are square so either way

the button takes up all the available horizontal space but the corners are different for full and block buttons another attribute that you can pass in to the iron button component is shape

and the shape input only accepts one value which is round and this gives you a button with more rounded corners so now you can see that the button is completely rounded in shape the third

parameter that you can pass in to a button is fill and the fill parameter takes in three different values and the value that you can pass in to the fill input can either be solid which is the

default value it can be outline or it can be clear so if you pass in solid you can see that nothing changes however if you pass an outline you will only get to see the outline of the

button the fill in the button is gone if you pass in clear only the text of the button is visible neither the outline nor the fill are visible in this case so those are the

three values that you can pass in to the fill property and the last input that the iron button component takes in is size the default size is called as default which will not change the size

of the button however if you pass in small you will get a small size button this button will be smaller than the default button and if you pass in large you'll get a larger button this button

is larger than the default button so those are the ways you can customize your buttons you can use all these attributes together and make unique combinations to achieve the button that

you want in your application for example if you want a full width rounded button that has no fill all you have to do is just combine the shape attribute the expand attribute

and the fill attribute so for shape I have passed in round because I want to have rounded corners for expand I have passed in block which will give me a full width button and for

fill I have passed in outline which will give me a button with only the outline and I got what I wanted so this is how you can create different types of buttons in your application

in addition to having simple text in your button you can also have icons and using icons inside your buttons is easier than you think all you have to do is use the ion icon component and pass

in the name of the icon let's look at an example so on this very first button just before the text click me inside the ion button component I'm going to create another component called ion icon and

give it a name I'm going to type in home as the name of the icon and that's it as I say if you can see that I get a home icon on my button the icon looks okay but there should be slight space between

the icon and the text it doesn't look very nice and to fix that the icon component takes in an attribute called slot and the value of slot can be start if you want to have the icon to the left

of your text or it can be end which will move the icon to the right of your text if you just want to have a button that has no text but only an icon in that

case you should pass the value I can only to the slot parameter let's learn how we can create and I can only button so I'm going to create a simple button I'll make it a green one using the

secondary color and I'll also give the round shape to the button inside this button I want to have an icon let's keep the icon home and along with the name I'll pass in the slot and give

it a value of icon – only and as I save you can see that I get a button that only has an icon and the size of the icon in this case is slightly larger than on the other button and that's

because of the I can only value that we have passed in to the slot and this is how you can put in icons inside your buttons you can use icons pretty much anywhere in your application using them

inside and iron button is just an example there are a lot of icons available and they are built into ionic and all you have to do is just pass in the name of the correct icon to get the

desired icon to find out the name of the available icons head over to iron-icons comm and you will get a large number of icons that ionic has developed and made available for all developers in ionic

you don't have to install anything all these icons are shipped with ionic and all you have to do is just use the iron icon component with the right value for the name so now that we know how we can

create inputs buttons and icons inner ionic applications let's learn how we can create lists and sliding lists in our ionic applications