Material Design Lite组件之切换按钮

1.复选框

1.1.配置选项

类名	效果	其他
mdl-checkbox	定义一个label作为MDL组件	需要label标签
mdl-js-checkbox	为lable标签添加默认事件	需要label标签
mdl-checkbox__input	input标签复选框样式	使用在input元素上
mdl-checkbox__label	将基本默认行为应用于标题	span元素必需
mdl-js-ripple-effect	点击波纹效果	可选

注意：可以使用disable属性禁用选择框

<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled>

1.2.应用举例

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
  <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

2.单选按钮

2.1.配置选项

类名	效果	其他
mdl-radio	定义MDL组件	必需
mdl-js-radio	设置label标签的默认行为	label必需
mdl-radio__button	设置radio标签的默认行为	radio必需
mdl-radio__label	将radio默认行为应用与标题	span必需
mdl-js-ripple-effect	设置点击波纹效果	可选

2.2.应用举例

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
  <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
  <span class="mdl-radio__label">First</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
  <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
  <span class="mdl-radio__label">Second</span>
</label>

3.图标切换

3.1.配置选项

类	效果	其他
mdl-icon-toggle	定义label标签为MDL组件	label标签必需
mdl-js-icon-toggle	给label标签添加默认行为效果	label标签必需
mdl-icon-toggle__input	icon切换按钮添加默认效果	input标签必需
mdl-icon-toggle__label	添加默认行为到标题	i标签必需
mdl-js-ripple-effect	点击波纹效果	可选

3.2.应用举例

<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
  <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>

4.切换按钮

4.1.配置选项

类名	效果	其他
mdl-switch	设置label标签为MDL组件	必需
mdl-js-switch	给label标签添加默认行为效果	label元素必需
mdl-switch__input	应用切换效果	input元素必需
mdl-switch__label	切换效果应用到标题	span必需
mdl-js-ripple-effect	点击波纹效果	可选

4.2.应用举例

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label"></span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
  <input type="checkbox" id="switch-2" class="mdl-switch__input">
  <span class="mdl-switch__label"></span>
</label>