Telepítés
Az mdui-t telepítheti npm segítségével, vagy betöltheti CDN-ről. Javasoljuk az npm használatát.
npm telepítés
npm install mdui --save
Teljes körű importálás
Importálja a következő két fájlt a projekt belépési fájljába, és máris használhatja az összes mdui komponenst:
import 'mdui/mdui.css';
import 'mdui';
Közvetlenül az mdui-ból is importálhatja a használni kívánt függvényeket. Például a snackbar függvény importálása:
import { snackbar } from 'mdui';
import {
$,
dialog,
alert,
confirm,
prompt,
snackbar,
getTheme,
setTheme,
getColorFromImage,
setColorScheme,
removeColorScheme,
loadLocale,
setLocale,
getLocale,
throttle,
observeResize,
breakpoint
} from 'mdui';Igény szerinti importálás
A projekt méretének optimalizálása érdekében csak a szükséges komponenseket és függvényeket importálhatja. Például, ha csak a <mdui-button> komponensre és a snackbar függvényre van szüksége, a következőképpen importálhatja őket:
// A CSS fájlt mindig importálni kell
import 'mdui/mdui.css';
// A <mdui-button> komponens importálása
import 'mdui/components/button.js';
// A snackbar függvény importálása
import { snackbar } from 'mdui/functions/snackbar.js';
Minden komponens vagy függvény dokumentációs oldala részletesen ismerteti, hogyan kell azt igény szerint importálni.
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
A <link> és <script> címkék segítségével közvetlenül CDN-ről is használhatja az mdui-t. Letöltheti a CSS és JavaScript fájlokat, és saját szerverére is telepítheti őket. A CSS és JavaScript fájlok importálása után az összes mdui komponens használható.
Globális build verzió használata
Az alábbi példa bemutatja, hogyan használható az mdui globális build verziója. Ebben a verzióban az összes függvény a globális mdui objektum tulajdonságaként érhető el:
<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">Kattints rám</mdui-button>
<script>
document.querySelector('.btn').addEventListener('click', () => {
mdui.snackbar({ message: 'A gombra kattintottak' });
});
</script>ES modul build verzió használata
Az alábbi példa bemutatja, hogyan használható az mdui ES modul build verziója. Ebben a verzióban az ES modul szintaxis segítségével importálhatja az mdui-t CDN-ről:
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<mdui-button class="btn">Kattints rám</mdui-button>
<script type="module">
import { snackbar } from 'https://unpkg.com/mdui@2/mdui.esm.js';
document.querySelector('.btn').addEventListener('click', () => {
snackbar({ message: 'A gombra kattintottak' });
});
</script>