The best Foundation switch Tutorial In 2024, In this tutorial you can learn
Switch size,Fillet switch,Switch group,
Foundation switch
Switch is a mouse click (finger tapping) under switch between "On" and "Off" states:
Switch to use <div class="switch">
Create. <div>
added with a unique id within the <input type="checkbox">
, <label>
element for attributes need <input type="checkbox">
id of matches:
Examples
<Div class = "switch">
<Input id = "mySwitch" type = "checkbox">
<Label for = "mySwitch"> </ label>
</ Div>
Switch size
Use .large
, .small
or .tiny
class to set the switch size:
Examples
<Div class = "switch large" > /en. </ div>
<Div class = "switch"> /en. </ div>
<Div class = "switch small" > /en. </ div>
<Div class = "switch tiny" > /en. </ div>
Fillet switch
Use .radius
and .round
class to set the fillet switch:
Examples
<Div class = "switch"> /en. </ div>
<Div class = "switch radius" > /en. </ div>
<Div class = "switch round" > /en. </ div>
Switch group
You can set individual options by setting the radio button (radio). Note: Note that each option name
attribute must be the same (for instance "myGroup").
Examples
<Div class = "switch">
<Input id = "mySwitch1" type = "radio" name = "myGroup">
<Label for = "mySwitch1"> </ label>
</ Div>
<Div class = "switch">
<Input id = "mySwitch2" type = "radio" name = "myGroup" checked>
<Label for = "mySwitch2"> </ label>
</ Div>