Installation
Vous pouvez installer mdui via npm ou l'inclure via CDN. L'installation via npm est recommandée.
Installation via npm
npm install mdui --save
Importation complète
Dans le point d'entrée de votre projet, importez les deux fichiers suivants pour utiliser tous les composants mdui :
import 'mdui/mdui.css';
import 'mdui';
Vous pouvez également importer directement les fonctions nécessaires depuis mdui. Par exemple, pour importer la fonction snackbar :
import { snackbar } from 'mdui';
import {
$,
dialog,
alert,
confirm,
prompt,
snackbar,
getTheme,
setTheme,
getColorFromImage,
setColorScheme,
removeColorScheme,
loadLocale,
setLocale,
getLocale,
throttle,
observeResize,
breakpoint
} from 'mdui';Importation sélective
Pour optimiser la taille du projet, vous pouvez importer uniquement les composants et fonctions nécessaires. Par exemple, pour utiliser le composant <mdui-button> et la fonction snackbar :
// Le fichier CSS doit toujours être importé
import 'mdui/mdui.css';
// Importe le composant <mdui-button>
import 'mdui/components/button.js';
// Importe la fonction snackbar
import { snackbar } from 'mdui/functions/snackbar.js';
La page de documentation de chaque composant ou fonction détaille comment l'importer selon vos besoins.
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
Vous pouvez utiliser mdui directement via CDN à l'aide des balises <link> et <script>. Vous pouvez également télécharger les fichiers CSS et JS et les déployer sur votre propre serveur. L'importation des fichiers CSS et JS permet d'utiliser tous les composants mdui.
Utiliser la version globale (global build)
L'exemple suivant montre comment utiliser la version globale de mdui. Dans cette version, toutes les fonctions sont exposées en tant que propriétés de l'objet global 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">Cliquez-moi</mdui-button>
<script>
document.querySelector('.btn').addEventListener('click', () => {
mdui.snackbar({ message: 'Bouton cliqué' });
});
</script>Utiliser la version module ES
L'exemple suivant montre comment utiliser la version module ES de mdui. Vous pouvez importer mdui depuis le CDN en utilisant la syntaxe des modules ES :
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<mdui-button class="btn">Cliquez-moi</mdui-button>
<script type="module">
import { snackbar } from 'https://unpkg.com/mdui@2/mdui.esm.js';
document.querySelector('.btn').addEventListener('click', () => {
snackbar({ message: 'Bouton cliqué' });
});
</script>