In the last section we had a discussion on flex box in particular the two properties justified content 2
and the line items. 3
These two properties can be applied to container styling and all because any elements within the container 4
to be positioned in a certain fashion. 5
So again we're going to be. 6
We're going to be applying the justify content and the on line items properties to the view tag that's 7
going to cause our text tagged to move around on the screen. 8
So let's fix up our view style here we're going to add on a couple of more properties first because 9
we want to center the text tag on the screen. 10
We only use justified content of center to move it halfway down the view tag and then align items center 11
to move it halfway across the tag. 12
I'm also going to apply a set height of 60 and a padding top to it at the same time. 13
I made sure I got all my commas in there as well. 14
So height behaves just as you would expect. 15
We can pass it a pixel value and we will get 60 pixels on the screen and padding top behaves just the 16
same way as it does on. 17
Excuse me CSSA as well a lot of padding to the top of the element. 18
So I'm going to save this. 19
And let's check out how the header looks now. 20
All right. 21
Definitely big improvement. 22
It's not inside the network tag anymore. 23
We've got it nicely centered beneath the networking bar so it doesn't look half bad. 24
Now the next thing I want to do with this header component is make sure we kind of get a bottom border 25
here as well. 26
Again the video doesn't quite convey it I'm sure but there's come to settle off white or kind of gray 27
looking color to the header and by adding on a bottom border of sorts it kind of just add to distinguish 28
between the header and any other content that we have on the screen. 29
So let's walk through adding on a couple of more properties to this view style tag rather than giving 30
just a solid border color like you know just a border or a straight line. 31
We'll use a shadow property. 32
So a shadow property is going to make it appear that there's kind of shadowing at the bottom of the 33
header to add on a shadow. 34
We use a couple of different properties. 35
First we'll specify a shadow color. 36
This will say hey I want there to be a shadow on this element. 37
Please use this color and I will say just use black. 38
Next we'll define a shadow offset or shadow offset is what actually tells the element. 39
Hey here is exactly the dimensions of the shadow or how tall or how wide it should be. 40
We want a width of zero. 41
So there will be no shadowing on the left or the right hand side. 42
But there will be a height to it. 43
So you know vertical of two pixels. 44
And finally we'll give it a shadow shadow opacity of 0.2 shadow pass you right here is kind of the darkness 45
of the shadow or how heavy it is. 46
So let's now check this out inside of the browser. 47
Excuse me simulator. 48
And now OK this is looking pretty good. 49
We've got a nice shadow on here as well. 50
You can play around these properties a whole bunch. 51
So maybe I'll give it like you know a height of 20. 52
Now it really extends up and down that's definitely way too much. 53
So I go back to two. 54
I can also play around with the opacity as well so I can go all the way up to say like you know point 55
nine. 56
It's a number that ranges between 1 and 0. 57
So at 9 it starts to get really dark. 58
You could go all the way down to like say point 5 that starts to look pretty reasonable as well but 59
I'm going to run with just the default of 0.2 if you want to use something darker. 60
You certainly can. 61
It's totally up to you. 62
Now there's two final properties I want to play I'm place on this view style. 63
They're not super relevant right now but they will be relevant later on. 64
And certainly we will come back to the component and discuss why replacing them here. 65
But we're just going to kind of do it right now and just kind of accept it and then talk about why they're 66
here later on. 67
So I'm also going to add on the property elevation of two and a position of relative again. 68
We're going to come back and discuss these properties we'll deal with it later on. 69
All right let's give one last look at our component here. 70
It's looking pretty darn good. 71
This is a great start for application. 72
Let's continue with the rest of our app and the next section.