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

셀렉트

셀렉트를 사용하면 사용자가 여러 옵션 중에서 선택할 수 있습니다.

호출 방식

  1. CSS 클래스를 통한 호출
  2. 사용자 정의 속성을 통한 호출 (컴포넌트가 동적으로 생성된 경우, 초기화를 위해 mdui.mutation()을 호출해야 함)
  3. JavaScript를 통한 호출

관련 읽기

Material Design 가이드라인: 컴포넌트 - 드롭다운 버튼

스타일

기본 단일 선택 select 컴포넌트

<select> 요소에 .mdui-select 클래스를 추가하면 JavaScript 호출 없이도 해당 요소에 아름다운 스타일을 부여할 수 있습니다.

codeplay_arrow
예시
<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

기본 다중 선택 select 컴포넌트

<select multiple> 요소에 .mdui-select 클래스를 추가하여 다중 선택이 가능하게 할 수도 있습니다. 그러나 모든 브라우저에서 이 스타일이 잘 표시되는 것은 아닙니다.

codeplay_arrow
예시
<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

호출 방식

사용자 정의 속성을 통한 호출

이 방식을 사용하면 JavaScript 코드를 작성할 필요가 없습니다. <select> 요소에 .mdui-select 클래스와 mdui-select="options" 속성을 추가하기만 하면 됩니다.

컴포넌트가 동적으로 생성된 경우, 초기화를 위해 mdui.mutation()을 호출해야 합니다.

codeplay_arrow
예시
<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
예시
<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>
codeplay_arrow
예시
<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

JavaScript를 통한 호출

컴포넌트 인스턴스화:

// selector는 <select> 요소의 CSS 선택자, DOM 요소 또는 HTML 문자열
// options는 구성 파라미터이며, 아래의 파라미터 목록을 참조하십시오
var inst = new mdui.Select(selector, options);
codeplay_arrow
예시
<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

매개변수

매개변수 이름유형기본값설명
positionstringauto선택 메뉴가 위치할 곳. auto, top, bottom을 포함
gutterint16선택 메뉴가 창의 위아래 가장자리에서 최소한 유지해야 할 간격(단위: px). 이 파라미터는 position이 auto일 때만 유효합니다.

메서드

메서드 이름설명
open()드롭다운 메뉴 열기.
close()드롭다운 메뉴 닫기.
toggle()드롭다운 메뉴의 열림 상태 전환.
handleUpdate()<select> 요소의 내용을 동적으로 수정한 경우, 드롭다운 메뉴를 다시 생성하기 위해 이 메서드를 호출해야 합니다.
getState()현재 드롭다운 메뉴의 열림 상태를 반환합니다. 총 네 가지 상태(opening, opened, closing, closed)가 있습니다.

이벤트

이벤트 이름설명대상매개변수
open.mdui.select드롭다운 메뉴의 열기 애니메이션이 시작될 때 이벤트가 발생합니다.<select class="mdui-select"></select>event._detail.inst: 인스턴스
opened.mdui.select드롭다운 메뉴의 열기 애니메이션이 끝날 때 이벤트가 발생합니다.
close.mdui.select드롭다운 메뉴의 닫기 애니메이션이 시작될 때 이벤트가 발생합니다.
closed.mdui.select드롭다운 메뉴의 닫기 애니메이션이 끝날 때 이벤트가 발생합니다.

CSS 클래스 목록

클래스 이름설명
.mdui-select셀렉트 컴포넌트를 정의합니다.
arrow_backPrevious
플로팅 액션 버튼
arrow_forwardNext
구분선