머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

선택 컨트롤

선택 컨트롤에는 체크박스, 라디오, 스위치가 포함됩니다.

호출 방식

선택 컨트롤은 순수 CSS로 작성되었으며, HTML 코드를 작성하는 것만으로 적용됩니다.

색상

강조색을 사용합니다.

스타일

체크박스

예시

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  기본 미선택
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  기본 선택
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  비활성화 및 미선택
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  비활성화 및 선택
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  미확정 상태
</label>
<script>
  // indeterminate 속성은 JavaScript를 통해서만 설정할 수 있습니다.
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  비활성화 및 미확정 상태
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

라디오

예시

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    기본 미선택
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    기본 선택
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    비활성화 및 미선택
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    비활성화 및 선택
  </label>
</form>

스위치

예시

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

CSS 클래스 목록

클래스 이름	설명
`.mdui-checkbox`	체크박스를 정의합니다.
`.mdui-checkbox-icon`	체크박스 내의 아이콘을 정의합니다.
`.mdui-radio`	라디오를 정의합니다.
`.mdui-radio-icon`	라디오 내의 아이콘을 정의합니다.
`.mdui-switch`	스위치를 정의합니다.
`.mdui-switch-icon`	스위치 내의 아이콘을 정의합니다.

텍스트 필드

슬라이더

선택 컨트롤

호출 방식

색상

관련 읽기

스타일

체크박스

라디오

스위치

CSS 클래스 목록