설치

npm을 통해 mdui를 설치하거나 CDN에서 mdui를 가져올 수 있습니다. npm을 통한 설치를 권장합니다.

npm 설치

npm install mdui --save

전체 가져오기

프로젝트의 엔트리 파일에서 아래 두 파일을 가져오면 모든 mdui 컴포넌트를 사용합니다:

import 'mdui/mdui.css';
import 'mdui';

또는 mdui에서 필요한 함수를 직접 가져올 수 있습니다. 예를 들어 snackbar 함수를 가져오려면 다음과 같이 하면 됩니다:

import { snackbar } from 'mdui';

mdui에서 가져올 수 있는 모든 함수 표시

import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';

필요한 것만 가져오기

프로젝트 크기를 최적화하려면 필요한 컴포넌트와 함수만 가져올 수 있습니다. 예를 들어 <mdui-button> 컴포넌트와 snackbar 함수만 필요하다면 다음과 같이 가져올 수 있습니다:

// CSS 파일은 항상 가져와야 합니다
import 'mdui/mdui.css';
// <mdui-button> 컴포넌트 가져오기
import 'mdui/components/button.js';
// snackbar 함수 가져오기
import { snackbar } from 'mdui/functions/snackbar.js';

각 컴포넌트나 함수의 문서 페이지에 필요한 것만 가져오는 방법이 자세히 설명되어 있습니다.

필요한 것만 가져올 수 있는 모든 컴포넌트 및 함수 표시

import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';

CDN

<link> 및 <script> 태그를 사용해 CDN을 통해 mdui를 직접 사용합니다. 또한 CSS 및 JavaScript 파일을 다운로드하여 자신의 서버에 배포할 수도 있습니다. CSS 및 JavaScript 파일을 가져오면 모든 mdui 컴포넌트를 사용합니다.

전역 빌드 버전 사용

다음 예제는 전역 빌드 버전의 mdui를 사용하는 방법을 보여줍니다. 이 버전에서는 모든 함수가 전역 객체 mdui의 속성으로 노출됩니다:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

<mdui-button class="btn">클릭</mdui-button>

<script>
  document.querySelector('.btn').addEventListener('click', () => {
    mdui.snackbar({ message: '버튼을 클릭했습니다' });
  });
</script>

ES 모듈 빌드 버전 사용

다음 예제는 ES 모듈 빌드 버전의 mdui를 사용하는 방법을 보여줍니다. 이 버전에서는 CDN에서 mdui를 가져오기 위해 ES 모듈 구문을 사용합니다:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">

<mdui-button class="btn">클릭</mdui-button>

<script type="module">
  import { snackbar } from 'https://unpkg.com/mdui@2/mdui.esm.js';

  document.querySelector('.btn').addEventListener('click', () => {
    snackbar({ message: '버튼을 클릭했습니다' });
  });
</script>

이전 장

개요

다음 장

빠른 시작