설치
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';
import {
$,
dialog,
alert,
confirm,
prompt,
snackbar,
getTheme,
setTheme,
getColorFromImage,
setColorScheme,
removeColorScheme,
loadLocale,
setLocale,
getLocale,
throttle,
observeResize,
breakpoint
} from 'mdui';İhtiyaca göre import
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.
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>