머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

개요

mdui의 CDN과 가장 간단한 페이지 템플릿을 통해 mdui 사용을 시작해 보세요.

빠른 시작

mdui를 사용하는 가장 간단한 방법은 CDN에서 CSS 및 JS 파일을 직접 가져오는 것입니다.

패키지 관리자를 사용하거나 소스 파일을 다운로드하려면 다운로드 페이지로 이동하세요.

CSS 파일

다음 <link> 태그를 <head> 태그 안에 추가하고, 다른 모든 스타일 파일보다 앞에 배치하세요.

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

JS 파일

다음 <script> 태그를 페이지 하단, </body> 태그 앞에 추가하세요.

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

mdui는 서드파티 라이브러리에 의존하지 않습니다. 위의 두 파일을 가져오면 바로 사용할 수 있습니다.

가장 간단한 페이지 템플릿

페이지가 최신 디자인 및 개발 표준을 준수하는지 확인하세요. 즉, HTML5 doctype을 사용하고 반응형 지원을 위해 뷰포트 메타 태그를 포함해야 합니다. 따라서 페이지는 다음과 같아야 합니다:

<!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>

위 내용은 전체 페이지에 필요한 모든 내용입니다. 이를 바탕으로 더 많은 컴포넌트와 내용을 추가하여 웹사이트를 구축할 수 있습니다.

다운로드