переключатель Foundation
Коммутатор является щелчок мыши (палец нажатие) под переключателем между "On" и "Off" гласит:
Переключатель использовать <div class="switch"> Создать. <div> добавлен уникальный идентификатор в <input type="checkbox"> , <label> элемент для атрибутов нужно <input type="checkbox"> идентификатор матчей:
примеров
<Div класс = "переключатель">
<Input ID = тип "mySwitch" = "флажок">
<Ярлык = "mySwitch"> </ метка>
</ Div>
<Input ID = тип "mySwitch" = "флажок">
<Ярлык = "mySwitch"> </ метка>
</ Div>
Попробуйте »
размер переключателя
Используйте .large , .small или .tiny класс , чтобы установить размер переключателя:
примеров
<Div класс = "большой переключатель" > ... </ DIV>
<Div класс = "переключатель"> ... </ DIV>
<Div класс = "маленький переключатель" > ... </ DIV>
<Div класс = "крошечный переключатель" > ... </ DIV>
<Div класс = "переключатель"> ... </ DIV>
<Div класс = "маленький переключатель" > ... </ DIV>
<Div класс = "крошечный переключатель" > ... </ DIV>
Попробуйте »
переключатель Скругление
Используйте .radius и .round класс установить переключатель скругления:
примеров
<Div класс = "переключатель"> ... </ DIV>
<Div класс = "радиус переключатель" > ... </ DIV>
<Div класс = "переключатель круглый" > ... </ DIV>
<Div класс = "радиус переключатель" > ... </ DIV>
<Div класс = "переключатель круглый" > ... </ DIV>
Попробуйте »
Переключение группы
Вы можете установить индивидуальные настройки, установив переключатель (радио). Примечание: Обратите внимание , что каждый из этих вариантов name атрибута должно быть одинаковым (например , "MyGroup").
примеров
<Div класс = "переключатель">
<Input ID = тип "mySwitch1" = "радио" название = "MyGroup">
<Ярлык = "mySwitch1"> </ метка>
</ Div>
<Div класс = "переключатель">
<Input ID = тип "mySwitch2" = "радио" название = "MyGroup" проверено>
<Ярлык = "mySwitch2"> </ метка>
</ Div>
<Input ID = тип "mySwitch1" = "радио" название = "MyGroup">
<Ярлык = "mySwitch1"> </ метка>
</ Div>
<Div класс = "переключатель">
<Input ID = тип "mySwitch2" = "радио" название = "MyGroup" проверено>
<Ярлык = "mySwitch2"> </ метка>
</ Div>
Попробуйте »