Footer

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€66.52
List Price:  €95.03
You save:  €28.51
£55.40
List Price:  £79.15
You save:  £23.74
CA$97.77
List Price:  CA$139.67
You save:  CA$41.90
A$107.48
List Price:  A$153.55
You save:  A$46.07
S$94.07
List Price:  S$134.39
You save:  S$40.32
HK$544.73
List Price:  HK$778.22
You save:  HK$233.49
CHF 61.85
List Price:  CHF 88.36
You save:  CHF 26.51
NOK kr773.61
List Price:  NOK kr1,105.21
You save:  NOK kr331.59
DKK kr496.19
List Price:  DKK kr708.87
You save:  DKK kr212.68
NZ$119.31
List Price:  NZ$170.45
You save:  NZ$51.14
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,370.95
List Price:  ৳11,959.01
You save:  ৳3,588.06
₹5,916.42
List Price:  ₹8,452.40
You save:  ₹2,535.97
RM312.50
List Price:  RM446.45
You save:  RM133.95
₦117,624.49
List Price:  ₦168,042.19
You save:  ₦50,417.70
₨19,473.08
List Price:  ₨27,819.88
You save:  ₨8,346.79
฿2,426.48
List Price:  ฿3,466.55
You save:  ฿1,040.07
₺2,418.28
List Price:  ₺3,454.83
You save:  ₺1,036.55
B$406.67
List Price:  B$580.99
You save:  B$174.31
R1,268.60
List Price:  R1,812.36
You save:  R543.76
Лв130.09
List Price:  Лв185.85
You save:  Лв55.76
₩98,070.61
List Price:  ₩140,106.88
You save:  ₩42,036.26
₪261.37
List Price:  ₪373.41
You save:  ₪112.03
₱4,133.88
List Price:  ₱5,905.80
You save:  ₱1,771.92
¥10,806.63
List Price:  ¥15,438.71
You save:  ¥4,632.07
MX$1,423.91
List Price:  MX$2,034.25
You save:  MX$610.33
QR255.44
List Price:  QR364.93
You save:  QR109.49
P956.94
List Price:  P1,367.12
You save:  P410.17
KSh9,046.20
List Price:  KSh12,923.70
You save:  KSh3,877.50
E£3,475.04
List Price:  E£4,964.56
You save:  E£1,489.51
ብር8,733.50
List Price:  ብር12,476.97
You save:  ብር3,743.46
Kz63,853.79
List Price:  Kz91,223.61
You save:  Kz27,369.81
CLP$68,157.66
List Price:  CLP$97,372.26
You save:  CLP$29,214.60
CN¥506.84
List Price:  CN¥724.09
You save:  CN¥217.25
RD$4,224.90
List Price:  RD$6,035.83
You save:  RD$1,810.93
DA9,349.94
List Price:  DA13,357.64
You save:  DA4,007.69
FJ$158.89
List Price:  FJ$226.99
You save:  FJ$68.10
Q540.76
List Price:  Q772.55
You save:  Q231.78
GY$14,655.30
List Price:  GY$20,937.04
You save:  GY$6,281.74
ISK kr9,679.61
List Price:  ISK kr13,828.61
You save:  ISK kr4,149
DH699.78
List Price:  DH999.72
You save:  DH299.94
L1,274.52
List Price:  L1,820.82
You save:  L546.30
ден4,093.48
List Price:  ден5,848.08
You save:  ден1,754.59
MOP$561.60
List Price:  MOP$802.33
You save:  MOP$240.72
N$1,270.52
List Price:  N$1,815.10
You save:  N$544.58
C$2,577.69
List Price:  C$3,682.57
You save:  C$1,104.88
रु9,455.06
List Price:  रु13,507.81
You save:  रु4,052.75
S/265.82
List Price:  S/379.77
You save:  S/113.94
K281.99
List Price:  K402.86
You save:  K120.87
SAR262.75
List Price:  SAR375.38
You save:  SAR112.62
ZK1,938.58
List Price:  ZK2,769.51
You save:  ZK830.93
L331.04
List Price:  L472.94
You save:  L141.89
Kč1,685.42
List Price:  Kč2,407.85
You save:  Kč722.43
Ft27,354.11
List Price:  Ft39,078.98
You save:  Ft11,724.86
SEK kr771.99
List Price:  SEK kr1,102.90
You save:  SEK kr330.90
ARS$70,181.20
List Price:  ARS$100,263.16
You save:  ARS$30,081.95
Bs485.08
List Price:  Bs693
You save:  Bs207.92
COP$308,906.07
List Price:  COP$441,313.30
You save:  COP$132,407.23
₡35,572.52
List Price:  ₡50,820.06
You save:  ₡15,247.54
L1,770.13
List Price:  L2,528.86
You save:  L758.73
₲548,589.81
List Price:  ₲783,733.33
You save:  ₲235,143.51
$U2,994.50
List Price:  $U4,278.05
You save:  $U1,283.54
zł289.22
List Price:  zł413.19
You save:  zł123.97
Already have an account? Log In

Transcript

Hello, in this ionic video we are going to cover photos. Photos are basically just a small region at the bottom of the bottom of the screen. That's actually the opposite of a header header, the top for truth, the bottom very basic stuff. And for styling it, you can use the exact same classes that you use for a header. So they are right here and they'll be available in the source code. So to add a footer to do do Actually, you know what?

For I even do any of this, I'm going to run the application so similarly looks like we have just the headline is so bad, and then show you what it looks like with a footer added. Okay, okay, so this is loading up. I wish you would load faster. I really do. Oh, They're so loaded up now. Almost done.

Come on. Second now. Here we go. Okay, so we've got our header, our sub header. So now let's add a footer to do that you do a div. Inside the Dave actually, first of all, you add some classes, it's gonna be bar, four dash footer for the footer.

That's the only difference really, you put a footer there instead of header. And now we're going to put bar dash, whatever style we want to use. So I'm going to use oil. So royal and inside, you just put div class equals title. And I'm going to save that and build this on. Snow Boyd build iOS So let's just wait for this to build our project which is essentially just copied or it does all the stuff, we just copied it to the V folder.

Okay, so as we run our application as you can see, we have a footer at the bottom. Now, another cool thing I want to show you is if for example, I've got this footer, and I add a button, we haven't covered buttons yet, I will be covering that in a separate video. So this is an an explanation of the buttons here has component items quickly with fruit code in there sometimes gonna code up a button so bear with me, bear with me, and you'll see something really, really cool that the footer component does in ionic which is fantastic. Now it's gonna call this left, save that and now compile it. Now rerun the application. And see we've got our button.

But it's actually on the left, he is actually anchored to the left is not next to me or anything. And let me show you what happened if I were to put a nonverbal turn after it, I think as you can imagine, it puts it to the right which is a great way of creating your UI without having to do well extra code to style it so you can see what our title, we've got the button on the left and the right and as I said, we're going to cover button buttons from ionic, in more depth in a separate video. So check that out and You'll be able to see how to create a variety of buttons styles. One thing to note is if, for example, I delete all this code, I only have a button here. So if I save, I'm going to leave the text as it is for build this rerun the application.

So as you can see the button on the left but what if we wanted the button on the right without having a title inside the footer. To do that, you just simply add a class of poll, right? And now build it. We run our application as you can see, it's now anchored to the Robert fantastic. Four I want to do is just leave it like so so you can easily modify it. If you have any questions, feel free to post them.

Yeah, I mean, feel free to up. I sort of said it and then at the same time anyway, feel free to post them it familiar. Feel free to post them on our education platform sonar learning Dakota, UK, there'll be a link in the description to that. There also be a link in the description to our GitHub page, which has all the source code from this series. If you liked this video, please do the thumbs up hit that subscribe button and leave a comment. And as usual, thank you fortune and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.