Instalación
Puedes optar por instalar mdui mediante npm o usar mdui desde un CDN. Se recomienda la instalación mediante npm.
Instalación con npm
npm install mdui --save
Importación completa
Importa los dos archivos siguientes en el archivo de entrada del proyecto para usar todos los componentes de mdui:
import 'mdui/mdui.css';
import 'mdui';
También puedes importar directamente las funciones que necesitas usar desde mdui. Por ejemplo, para importar la función snackbar, puedes hacerlo así:
import { snackbar } from 'mdui';
import {
$,
dialog,
alert,
confirm,
prompt,
snackbar,
getTheme,
setTheme,
getColorFromImage,
setColorScheme,
removeColorScheme,
loadLocale,
setLocale,
getLocale,
throttle,
observeResize,
breakpoint
} from 'mdui';Importación cuando lo necesites
Para optimizar el tamaño del proyecto, puedes importar solo los componentes y funciones que necesitas. Por ejemplo, si solo necesitas el componente <mdui-button> y la función snackbar, puedes importarlos de la siguiente manera:
// Siempre se necesita importar el archivo CSS
import 'mdui/mdui.css';
// Importar el componente <mdui-button>
import 'mdui/components/button.js';
// Importar la función snackbar
import { snackbar } from 'mdui/functions/snackbar.js';
La página de documentación de cada componente o función detalla cómo realizar la importación cuando lo necesites.
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
Puedes usar mdui directamente mediante CDN con las etiquetas <link> y <script>. También puedes descargar los archivos CSS y JavaScript y alojarlos en tu propio servidor. Después de importar los archivos CSS y JavaScript, podrás usar todos los componentes de mdui.
Usando la compilación global
El siguiente ejemplo muestra cómo usar la compilación global de mdui. En esta versión, todas las funciones están expuestas como propiedades en el objeto 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">Haz clic</mdui-button>
<script>
document.querySelector('.btn').addEventListener('click', () => {
mdui.snackbar({ message: 'Botón pulsado' });
});
</script>Usando la compilación de ES module
El siguiente ejemplo muestra cómo usar la compilación de ES module de mdui. En esta versión puedes usar la sintaxis de ES module para importar mdui desde un CDN:
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<mdui-button class="btn">Haz clic</mdui-button>
<script type="module">
import { snackbar } from 'https://unpkg.com/mdui@2/mdui.esm.js';
document.querySelector('.btn').addEventListener('click', () => {
snackbar({ message: 'Botón pulsado' });
});
</script>