Switch

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€91.79
List Price:  €128.51
You save:  €36.71
£78.95
List Price:  £110.53
You save:  £31.58
CA$136.16
List Price:  CA$190.63
You save:  CA$54.47
A$149.21
List Price:  A$208.90
You save:  A$59.69
S$134.58
List Price:  S$188.42
You save:  S$53.84
HK$780.18
List Price:  HK$1,092.29
You save:  HK$312.10
CHF 91.18
List Price:  CHF 127.65
You save:  CHF 36.47
NOK kr1,073.95
List Price:  NOK kr1,503.58
You save:  NOK kr429.62
DKK kr686.39
List Price:  DKK kr960.97
You save:  DKK kr274.58
NZ$162.99
List Price:  NZ$228.20
You save:  NZ$65.20
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,647.67
List Price:  ৳16,307.21
You save:  ৳4,659.53
₹8,329.22
List Price:  ₹11,661.24
You save:  ₹3,332.02
RM468.70
List Price:  RM656.20
You save:  RM187.50
₦146,985.30
List Price:  ₦205,785.30
You save:  ₦58,800
₨27,706.17
List Price:  ₨38,789.74
You save:  ₨11,083.57
฿3,598.96
List Price:  ฿5,038.70
You save:  ฿1,439.73
₺3,224.01
List Price:  ₺4,513.75
You save:  ₺1,289.73
B$510.40
List Price:  B$714.59
You save:  B$204.18
R1,832.74
List Price:  R2,565.91
You save:  R733.17
Лв179.88
List Price:  Лв251.83
You save:  Лв71.95
₩135,425.45
List Price:  ₩189,601.05
You save:  ₩54,175.60
₪369.26
List Price:  ₪516.98
You save:  ₪147.71
₱5,784.42
List Price:  ₱8,098.42
You save:  ₱2,313.99
¥15,565.94
List Price:  ¥21,792.94
You save:  ¥6,227
MX$1,660.69
List Price:  MX$2,325.03
You save:  MX$664.34
QR362.75
List Price:  QR507.87
You save:  QR145.11
P1,347.76
List Price:  P1,886.91
You save:  P539.15
KSh12,980.20
List Price:  KSh18,172.80
You save:  KSh5,192.60
E£4,681.28
List Price:  E£6,553.98
You save:  E£1,872.69
ብር5,713.27
List Price:  ብር7,998.81
You save:  ብር2,285.53
Kz84,891.51
List Price:  Kz118,851.51
You save:  Kz33,960
CLP$89,440.82
List Price:  CLP$125,220.73
You save:  CLP$35,779.90
CN¥722.24
List Price:  CN¥1,011.17
You save:  CN¥288.92
RD$5,826.59
List Price:  RD$8,157.46
You save:  RD$2,330.87
DA13,462.75
List Price:  DA18,848.39
You save:  DA5,385.64
FJ$222.79
List Price:  FJ$311.92
You save:  FJ$89.12
Q772.81
List Price:  Q1,081.96
You save:  Q309.15
GY$20,810.17
List Price:  GY$29,135.07
You save:  GY$8,324.90
ISK kr13,781.37
List Price:  ISK kr19,294.47
You save:  ISK kr5,513.10
DH990.33
List Price:  DH1,386.51
You save:  DH396.17
L1,760
List Price:  L2,464.07
You save:  L704.07
ден5,654.52
List Price:  ден7,916.55
You save:  ден2,262.03
MOP$799.37
List Price:  MOP$1,119.16
You save:  MOP$319.78
N$1,819.78
List Price:  N$2,547.77
You save:  N$727.98
C$3,661.69
List Price:  C$5,126.52
You save:  C$1,464.82
रु13,260.75
List Price:  रु18,565.58
You save:  रु5,304.83
S/371.45
List Price:  S/520.05
You save:  S/148.59
K386.26
List Price:  K540.79
You save:  K154.52
SAR374.96
List Price:  SAR524.96
You save:  SAR150
ZK2,538.86
List Price:  ZK3,554.51
You save:  ZK1,015.64
L457.57
List Price:  L640.62
You save:  L183.04
Kč2,271.57
List Price:  Kč3,180.29
You save:  Kč908.72
Ft35,579.92
List Price:  Ft49,813.32
You save:  Ft14,233.39
SEK kr1,071.59
List Price:  SEK kr1,500.27
You save:  SEK kr428.67
ARS$88,151.52
List Price:  ARS$123,415.66
You save:  ARS$35,264.13
Bs687.27
List Price:  Bs962.21
You save:  Bs274.93
COP$380,678.73
List Price:  COP$532,965.46
You save:  COP$152,286.72
₡50,906.29
List Price:  ₡71,270.84
You save:  ₡20,364.55
L2,462.78
List Price:  L3,448
You save:  L985.21
₲745,276.15
List Price:  ₲1,043,416.42
You save:  ₲298,140.27
$U3,879.22
List Price:  $U5,431.06
You save:  $U1,551.84
zł391.77
List Price:  zł548.49
You save:  zł156.72
Already have an account? Log In

Transcript

Hello, in this video, I am going to show you the switch component. So the switch component essentially allow it basically a toggle, essentially. And you've seen on applications, you know, all the time, just to know the switch itself doesn't maintain any particular state. When you change what looks like the state from, you know, on 12th off to one, it basically has a method called unchanged, which is a required method that you need to implement. And we'll do that in a second. And that allows you to detect what's been changed but on its own doesn't maintain the state, we have to actually handle that.

So to creditors, which is which correctly, obviously, and then inside of here, there's two, you know, required parameter. value, which is, whether it's on or off, you know, by default false is all on is true or true. And then next is on change. And this is just a nerd function and in here. Okay, so let's save that. And let's see what we get.

So it's just hot reload in, and we got this little thinking. So if I click it, we can obviously, you know, slide in like so. And at the moment, if you notice, it's constantly just true. So we need to, you know, essentially have a way of handling that. And we need to basically set the state. So we add side of the equation variable, want to create a variable, I need the counter.

I'm gonna say boy, oh, J equals false by default. And this will be we'll change this to that. So if we change that to true, it will be on by default. Let me do that. Don't read any of this. It's true, that's true.

So you look slightly different. And in here, all you do is set state. Inside of here, we want to say, state. All, I'll rename this to F, I'm gonna say state because and now if we want to run, and let's do a print out as well. So when state, and obviously, we can use this state variable outside of the actual switch itself. So maybe we're on a second page, we're talking stuff on and off, maybe notifications, that sort of stuff.

And once we click save, he could use this variable, you know, variables like this for multiple switches, and then save it accordingly. So if I save that thought reloaded By default it is on. If I click it in now actually toggles on and off. Instead of me having to slide it now it's false. Click it again, it is true. Click it again, it is false.

Click it again, it is true. And obviously the sliding mechanism will work as well as if you want to go down that route for switches, that's really all there is to it. These are the main two things that need make sure, generally speaking, this is the same as mine, and that you have this really variable state there are other property that you can modify like you know the color if you want to have a form now image, you know, the inactive color, all of that stuff. As an extra test. I want you to experiment with these other extra aesthetic properties. That's it.

If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.

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.