Introdução
Vamos começar a usar o mdui com o CDN do mdui e um modelo de página simples.
Você está lendo a documentação do mdui 2!
Para ler a documentação do mdui 1, acesse www.mdui.org/docs/.
Início rápido
A maneira mais simples de usar o mdui é importar os arquivos CSS e JS diretamente de um CDN.
Se você quiser instalar o mdui via npm, consulte a seção Instalação.
Importar arquivos
Adicione o seguinte código à tag <head> da página:
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
Se você precisar usar o atributo de ícone dos componentes (por exemplo, o atributo icon em <mdui-button icon="search"></mdui-button>), também precisará importar o arquivo CSS dos ícones. Consulte Usando ícones Material Icons.
mdui não depende de nenhuma biblioteca de terceiros. Após importar os arquivos acima, ele funcionará normalmente.
Modelo de página mais simples
Abaixo está o modelo de página mais simples. Você pode adicionar mais componentes e conteúdo para construir um site.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<meta name="renderer" content="webkit"/>
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<!-- Se você usar o atributo icon dos componentes, também precisará importar o arquivo CSS dos ícones -->
<title>Olá, mundo!</title>
</head>
<body>
<mdui-button>Olá, mundo!</mdui-button>
</body>
</html>