Kurulum

mdui'yi npm aracılığıyla kurabilir veya CDN'den dahil edebilirsiniz. npm kullanarak kurulum yapmanız önerilir.

npm kurulumu

npm install mdui --save

Tam import

Projenizin giriş dosyasına aşağıdaki iki dosyayı import ederek tüm mdui bileşenlerini kullanabilirsiniz:

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

İhtiyacınız olan fonksiyonu doğrudan mdui'den de import edebilirsiniz. Örneğin, snackbar fonksiyonunu import etmek için şu şekilde yapabilirsiniz:

import { snackbar } from 'mdui';

mdui'den import edilebilen tüm fonksiyonları göster

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

Proje boyutunu optimize etmek için sadece ihtiyacınız olan bileşenleri ve fonksiyonları import edebilirsiniz. Örneğin, sadece <mdui-button> bileşenini ve snackbar fonksiyonunu kullanmanız gerekiyorsa, aşağıdaki şekilde import edebilirsiniz:

// CSS dosyasını her zaman import etmek gerekir
import 'mdui/mdui.css';
// <mdui-button> bileşenini import et
import 'mdui/components/button.js';
// snackbar fonksiyonunu import et
import { snackbar } from 'mdui/functions/snackbar.js';

Her bileşenin veya fonksiyonun dokümantasyon sayfasında, ihtiyaca göre nasıl import edileceği detaylı olarak açıklanmıştır.

İhtiyaca göre import edilebilen tüm bileşenleri ve fonksiyonları göster

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

mdui'yi doğrudan CDN üzerinden kullanmak için <link> ve <script> etiketlerini kullanabilirsiniz. Ayrıca CSS ve JavaScript dosyalarını indirip kendi sunucunuza da dağıtabilirsiniz. CSS ve JavaScript dosyalarını dahil ettikten sonra tüm mdui bileşenlerini kullanabilirsiniz.

Global yapı sürümünü kullanma

Aşağıdaki örnek, mdui'nin global yapı sürümünün nasıl kullanılacağını göstermektedir. Bu sürümde, tüm fonksiyonlar global mdui nesnesi üzerinde özellikler olarak bulunur:

<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">Bana Tıkla</mdui-button>

<script>
  document.querySelector('.btn').addEventListener('click', () => {
    mdui.snackbar({ message: 'Butona tıklandı' });
  });
</script>

ES modül yapı sürümünü kullanma

Aşağıdaki örnek, mdui'nin ES modül yapı sürümünün nasıl kullanılacağını göstermektedir. Bu sürümde, mdui'yi CDN'den import etmek için ES modül sözdizimini kullanabilirsiniz:

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

<mdui-button class="btn">Bana Tıkla</mdui-button>

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

  document.querySelector('.btn').addEventListener('click', () => {
    snackbar({ message: 'Butona tıklandı' });
  });
</script>

Önceki Bölüm

Genel Bakış

Sonraki Bölüm

Hızlı Başlangıç