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

다이알로그

mdui의 다이얼로그는 정보를 묻거나 사용자에게 알림이나 경고를 전달할 때 자주 사용되는 범용 컴포넌트입니다.

한 번에 하나의 다이얼로그만 표시될 수 있습니다. 현재 다이얼로그가 닫히기 전에 다음 다이얼로그를 열면 다음 다이얼로그는 대기열에 추가되며, 현재 다이얼로그가 닫힌 후 열리게 됩니다.

호출 방식

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

스타일

표준 다이얼로그

표준 다이얼로그 예시입니다.

예시

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

제목 표시줄 없음

제목 표시줄이 없는 다이얼로그입니다.

예시

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

수직 버튼 배치

다이얼로그 하단의 버튼은 기본적으로 가로로 정렬됩니다. <div class="mdui-dialog-actions"></div>에 .mdui-dialog-actions-stacked 클래스를 추가하면 버튼을 세로로 정렬할 수 있습니다.

예시

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

고정된 제목과 버튼

다이얼로그 내용이 다이얼로그 높이를 초과할 경우, .mdui-dialog-content 내부 내용에 스크롤바가 생성됩니다.

만약 .mdui-dialog-title과 .mdui-dialog-actions를 .mdui-dialog-content 내부에 넣으면 제목과 하단 버튼이 스크롤과 함께 움직입니다. 반대로 외부에 두면 제목과 버튼은 각각 상단과 하단에 고정되어 스크롤되지 않습니다.

예시

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

사용자 정의 내용

다이얼로그에서는 <div class="mdui-dialog"></div> 요소만 필수이며, 내부 내용은 자유롭게 HTML로 교체할 수 있습니다.

아래 예시는 다이얼로그 내부에 탭을 배치한 경우입니다:

예시

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

호출 방식

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

이 방식은 JavaScript 코드를 작성할 필요가 없습니다. 트리거 역할을 하는 요소(예: 버튼)에 mdui-dialog="options" 속성을 추가하기만 하면 됩니다. 사용자 정의 속성을 통해 호출할 때는 제어할 다이얼로그를 지정하기 위해 target 파라미터를 추가해야 하며, 값은 대상 다이얼로그의 CSS 선택자여야 합니다.

예시

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

다이얼로그 내부 요소에 속성을 추가하여 이벤트를 바인딩할 수 있으며, 이 속성들은 JavaScript로 호출할 때도 사용할 수 있습니다.

속성	설명
`mdui-dialog-close`	이 요소를 클릭하면 `close.mdui.dialog` 이벤트가 발생하고 다이얼로그가 닫힙니다.
`mdui-dialog-cancel`	이 요소를 클릭하면 `cancel.mdui.dialog` 이벤트가 발생합니다.
`mdui-dialog-confirm`	이 요소를 클릭하면 `confirm.mdui.dialog` 이벤트가 발생합니다.

JavaScript를 통한 호출

컴포넌트 인스턴스화:

// selector는 다이얼로그의 CSS 선택자, DOM 요소 또는 HTML 문자열입니다.
// options는 설정 파라미터로, 아래 파라미터 목록을 참조하십시오.
var inst = new mdui.Dialog(selector, options);

실행

매개변수

매개변수 이름	유형	기본값	설명
`overlay`	`boolean`	`true`	다이얼로그를 열 때 오버레이(마스크)를 표시할지 여부입니다.
`history`	`boolean`	`true`	다이얼로그를 열 때 url hash를 추가할지 여부입니다. true인 경우 다이얼로그가 열린 후 브라우저의 뒤로 가기 버튼이나 안드로이드의 뒤로 가기 키로 다이얼로그를 닫을 수 있습니다.
`modal`	`boolean`	`false`	다이얼로그 모달 여부입니다. false일 경우 다이얼로그 바깥 영역을 클릭하면 다이얼로그가 닫히며, true일 경우 닫히지 않습니다.
`closeOnEsc`	`boolean`	`true`	Esc 키를 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnCancel`	`boolean`	`true`	취소 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnConfirm`	`boolean`	`true`	확인 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`destroyOnClosed`	`boolean`	`false`	다이얼로그를 닫은 후 다이얼로그를 자동으로 파기할지 여부입니다.

메서드

메서드 이름	설명
`open()`	다이얼로그를 엽니다.
`close()`	다이얼로그를 닫습니다.
`toggle()`	다이얼로그의 열림/닫힘 상태를 전환합니다.
`getState()`	다이얼로그 상태를 가져옵니다. 총 네 가지 상태(`opening`, `opened`, `closing`, `closed`)가 있습니다.
`destroy()`	다이얼로그를 파기합니다.
`handleUpdate()`	다이얼로그 위치와 스크롤바 높이를 재조정합니다. 다이얼로그를 연 후 내용이 변경된 경우 이 메서드를 호출해야 합니다.

이벤트

이벤트 이름	설명	대상	매개변수
`open.mdui.dialog`	다이얼로그 열기 애니메이션이 시작될 때 이벤트가 발생합니다.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: 인스턴스
`opened.mdui.dialog`	다이얼로그 열기 애니메이션이 끝날 때 이벤트가 발생합니다.
`close.mdui.dialog`	다이얼로그 닫기 애니메이션이 시작될 때 이벤트가 발생합니다.
`closed.mdui.dialog`	다이얼로그 닫기 애니메이션이 끝날 때 이벤트가 발생합니다.
`cancel.mdui.dialog`	취소 버튼을 눌렀을 때 이벤트가 발생합니다.
`confirm.mdui.dialog`	확인 버튼을 눌렀을 때 이벤트가 발생합니다.

미리 정의된 다이얼로그

mdui는 자주 사용되는 시나리오를 위해 몇 가지 미리 정의된 다이얼로그 함수를 제공합니다. 이 다이얼로그들은 JavaScript로만 호출되며 별도의 HTML 코드를 작성할 필요가 없습니다.

이 함수들은 모두 다이얼로그 인스턴스를 반환합니다.

mdui.dialog()

제목, 내용, 버튼 등을 사용자 정의할 수 있는 다이얼로그를 엽니다. 매우 범용적인 메서드이며, mdui.alert(), mdui.confirm(), mdui.prompt()는 모두 이 메서드를 기반으로 만들어졌습니다.

mdui.dialog(options)

예시

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: '취소'
    },
    {
      text: '확인',
      onClick: function(inst){
        mdui.alert('확인 버튼 클릭 시 콜백');
      }
    }
  ]
});

매개변수

매개변수 이름	유형	기본값	설명
`title`	`string`		다이얼로그 제목.
`content`	`string`		다이얼로그 내용.
`buttons`	`array`		버튼 배열입니다. 각 버튼은 버튼 파라미터를 가진 객체입니다(아래 표 참조).
`stackedButtons`	`boolean`	`false`	버튼을 세로로 정렬할지 여부입니다.
`cssClass`	`string`		`.mdui-dialog`에 추가할 CSS 클래스입니다.
`history`	`boolean`	`true`	`hashchange` 이벤트를 감지할지 여부입니다. true인 경우 안드로이드 뒤로 가기 키나 브라우저 뒤로 가기 버튼으로 다이얼로그를 닫을 수 있습니다.
`overlay`	`boolean`	`true`	다이얼로그를 연 후 오버레이(마스크)를 표시할지 여부입니다.
`modal`	`boolean`	`false`	다이얼로그 모달 여부입니다. false일 경우 다이얼로그 바깥 영역을 클릭하면 다이얼로그가 닫히며, true일 경우 닫히지 않습니다.
`closeOnEsc`	`boolean`	`true`	Esc 키를 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`destroyOnClosed`	`boolean`	`true`	다이얼로그를 닫은 후 다이얼로그를 자동으로 파기할지 여부입니다.
`onOpen`	`function`		열기 애니메이션 시작 시 콜백 함수입니다. 파라미터는 다이얼로그 인스턴스입니다.
`onOpened`	`function`		열기 애니메이션 종료 시 콜백 함수입니다. 파라미터는 다이얼로그 인스턴스입니다.
`onClose`	`function`		닫기 애니메이션 시작 시 콜백 함수입니다. 파라미터는 다이얼로그 인스턴스입니다.
`onClosed`	`function`		닫기 애니메이션 종료 시 콜백 함수입니다. 파라미터는 다이얼로그 인스턴스입니다.

버튼 파라미터:

매개변수 이름	유형	기본값	설명
`text`	`string`		버튼 텍스트.
`bold`	`boolean`	`false`	버튼 텍스트 굵게 표시 여부.
`close`	`boolean`	`true`	버튼 클릭 후 다이얼로그를 닫을지 여부.
`onClick`	`function`		버튼 클릭 시 콜백 함수입니다.

mdui.alert()

제목, 내용 및 확인 버튼 하나를 포함할 수 있는 알림 창을 엽니다:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

예시

// 텍스트만 포함
mdui.alert('content');

// 제목과 텍스트 포함
mdui.alert('content', 'title');

// 콜백 포함
mdui.alert('content', 'title', function() {
  mdui.alert('확인 버튼을 클릭했습니다');
});

// 텍스트와 콜백 포함
mdui.alert('content', function() {
  mdui.alert('확인 버튼을 클릭했습니다');
});

text: 텍스트
title: (선택 사항) 제목
onConfirm: (선택 사항) 확인 버튼 클릭 시 콜백. 파라미터는 다이얼로그 인스턴스입니다.
options: (선택 사항) 파라미터, 아래 표 참조.

매개변수 이름	유형	기본값	설명
`confirmText`	`string`	`ok`	확인 버튼의 텍스트.
`history`	`boolean`	`true`	`hashchange` 이벤트를 감지할지 여부입니다. true인 경우 안드로이드 뒤로 가기 키나 브라우저 뒤로 가기 버튼으로 다이얼로그를 닫을 수 있습니다.
`modal`	`boolean`	`false`	다이얼로그 모달 여부입니다. false일 경우 다이얼로그 바깥 영역을 클릭하면 다이얼로그가 닫히며, true일 경우 닫히지 않습니다.
`closeOnEsc`	`boolean`	`true`	Esc 키를 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnConfirm`	`boolean`	`true`	확인 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다.

mdui.confirm()

제목, 내용, 확인 버튼 및 취소 버튼 하나를 포함할 수 있는 확인 창을 엽니다:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

예시

// 텍스트와 확인 콜백 포함
mdui.confirm('content', function(){
  mdui.alert('확인 버튼을 클릭했습니다');
});

// 텍스트, 확인 버튼 및 취소 버튼 콜백 포함
mdui.confirm('content',
  function(){
    mdui.alert('확인 버튼을 클릭했습니다');
  },
  function(){
    mdui.alert('취소 버튼을 클릭했습니다');
  }
);

// 텍스트, 제목 및 확인 버튼 콜백 포함
mdui.confirm('content', 'title', function(){
  mdui.alert('확인 버튼을 클릭했습니다');
});

// 텍스트, 제목, 확인 버튼 및 취소 버튼 콜백 포함
mdui.confirm('content', 'title',
  function(){
    mdui.alert('확인 버튼을 클릭했습니다');
  },
  function(){
    mdui.alert('취소 버튼을 클릭했습니다');
  }
);

text: 텍스트
title: (선택 사항) 제목
onConfirm: (선택 사항) 확인 버튼 클릭 시 콜백. 파라미터는 다이얼로그 인스턴스입니다.
onCancel: (선택 사항) 취소 버튼 클릭 시 콜백. 파라미터는 다이얼로그 인스턴스입니다.
options: (선택 사항) 파라미터, 아래 표 참조.

매개변수 이름	유형	기본값	설명
`confirmText`	`string`	`ok`	확인 버튼의 텍스트.
`cancelText`	`string`	`cancel`	취소 버튼의 텍스트.
`history`	`boolean`	`true`	`hashchange` 이벤트를 감지할지 여부입니다. true인 경우 안드로이드 뒤로 가기 키나 브라우저 뒤로 가기 버튼으로 다이얼로그를 닫을 수 있습니다.
`modal`	`boolean`	`false`	다이얼로그 모달 여부입니다. false일 경우 다이얼로그 바깥 영역을 클릭하면 다이얼로그가 닫히며, true일 경우 닫히지 않습니다.
`closeOnEsc`	`boolean`	`true`	Esc 키를 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnCancel`	`boolean`	`true`	취소 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnConfirm`	`boolean`	`true`	확인 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다.

mdui.prompt()

사용자 입력을 요청하는 다이얼로그를 엽니다. 제목, 내용, 텍스트 입력창, 확인 버튼 및 취소 버튼 하나를 포함할 수 있습니다.

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

예시

// 한 줄 텍스트 입력창
mdui.prompt('이것은 한 줄 텍스트 입력창입니다',
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 확인 버튼을 클릭했습니다');
  },
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 취소 버튼을 클릭했습니다');
  }
);

// 여러 줄 텍스트 입력창
mdui.prompt('이것은 여러 줄 텍스트 입력창입니다',
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 확인 버튼을 클릭했습니다');
  },
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 취소 버튼을 클릭했습니다');
  },
  {
    type: 'textarea'
  }
);

// 제목 포함
mdui.prompt('텍스트를 입력하세요', 'title',
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 확인 버튼을 클릭했습니다');
  },
  function (value) {
    mdui.alert('입력한 내용:' + value + ', 취소 버튼을 클릭했습니다');
  }
);

label: 텍스트 입력창 부유 라벨의 텍스트
title: (선택 사항) 제목
onConfirm: (선택 사항) 확인 버튼 클릭 시 콜백. 텍스트 입력창의 값과 다이얼로그 인스턴스 두 개의 파라미터를 받습니다.
onCancel: (선택 사항) 취소 버튼 클릭 시 콜백. 텍스트 입력창의 값과 다이얼로그 인스턴스 두 개의 파라미터를 받습니다.
options: (선택 사항) 파라미터, 아래 표 참조

매개변수 이름	유형	기본값	설명
`confirmText`	`string`	`ok`	확인 버튼의 텍스트
`cancelText`	`string`	`cancel`	취소 버튼의 텍스트
`history`	`boolean`	`true`	`hashchange` 이벤트를 감지할지 여부입니다. true인 경우 안드로이드 뒤로 가기 키나 브라우저 뒤로 가기 버튼으로 다이얼로그를 닫을 수 있습니다.
`modal`	`boolean`	`false`	다이얼로그 모달 여부입니다. false일 경우 다이얼로그 바깥 영역을 클릭하면 다이얼로그가 닫히며, true일 경우 닫히지 않습니다.
`closeOnEsc`	`boolean`	`true`	Esc 키를 눌렀을 때 다이얼로그를 닫을지 여부입니다.
`closeOnCancel`	`boolean`	`true`	취소 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다
`closeOnConfirm`	`boolean`	`true`	확인 버튼을 눌렀을 때 다이얼로그를 닫을지 여부입니다
`confirmOnEnter`	`boolean`	`false`	Enter 키를 눌렀을 때 `onConfirm` 콜백 함수를 실행합니다.
`type`	`string`	`text`	텍스트 입력창의 유형. `text`: 한 줄 텍스트 입력창 `textarea`: 여러 줄 텍스트 입력창
`maxlength`	`int`	`0`	최대 입력 가능 문자 수
`defaultValue`	`string`	`''`	텍스트 입력창의 기본값

CSS 클래스 목록

클래스 이름	설명
`.mdui-dialog`	다이얼로그 컴포넌트를 정의합니다.
`.mdui-dialog-title`	다이얼로그 제목을 정의합니다.
`.mdui-dialog-content`	다이얼로그 내용을 정의합니다.
`.mdui-dialog-actions`	다이얼로그 작업 표시줄을 정의합니다.
`.mdui-dialog-actions-stacked`	다이얼로그 작업 표시줄의 버튼을 세로로 정렬합니다.

테이블

메뉴

다이알로그

호출 방식

관련 읽기

스타일

표준 다이얼로그

제목 표시줄 없음

수직 버튼 배치

고정된 제목과 버튼

사용자 정의 내용

호출 방식

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

JavaScript를 통한 호출

매개변수

메서드

이벤트

미리 정의된 다이얼로그

mdui.dialog()

mdui.alert()

mdui.confirm()

mdui.prompt()

CSS 클래스 목록