O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Introdução

Vamos começar a usar o mdui através do CDN do mdui e um modelo de página simples.

Início rápido

A maneira mais fácil de usar o mdui é importando os arquivos CSS e JS diretamente do CDN.

Se você quiser usar um gerenciador de pacotes ou baixar os arquivos de origem, visite a página de download.

Arquivo CSS

Adicione a seguinte tag <link> dentro da tag <head>, antes de todos os outros arquivos de estilo.

<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">

Arquivo JS

Adicione a seguinte tag <script> ao final da página, antes da tag </body>.

<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

O mdui não depende de nenhuma biblioteca de terceiros. Após importar os dois arquivos acima, ele pode ser usado normalmente.

Modelo de página simples

Certifique-se de que sua página segue os padrões de design e desenvolvimento mais recentes, ou seja, usa o doctype HTML5 e inclui a tag meta viewport para suporte a responsividade. Portanto, sua página deve ser assim:

<!doctype html>
<html lang="zh-cn">
  <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">

    <!-- mdui CSS -->
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- mdui JavaScript -->
    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
  </body>
</html>

O conteúdo acima é tudo o que você precisa para uma página completa. Você pode adicionar mais componentes e conteúdo com base nisso para construir seu site.

Download