Bevezetés

Kezdjük el az mdui használatát a CDN segítségével és egy legegyszerűbb oldalsablonnal.

Az mdui 2 dokumentációját olvassa!

Az mdui 1 dokumentációjának megtekintéséhez látogasson el a www.mdui.org/docs/ oldalra.

Gyors áttekintés

Az mdui legegyszerűbb használati módja, ha a CSS és JS fájlokat közvetlenül CDN-ről importálja.

Ha npm segítségével szeretné telepíteni az mdui-t, tekintse meg a Telepítés fejezetet.

Fájlok importálása

Adja hozzá a következő kódot az oldal <head> címkéjéhez:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

Ha a komponensek ikon attribútumát (például a <mdui-button icon="search"></mdui-button> icon attribútumát) szeretné használni, akkor az ikonok CSS fájlját is importálnia kell (lásd Material Icons ikonok használata).

Az mdui nem függ semmilyen harmadik féltől származó könyvtártól, a fenti fájlok importálása után már működnie kell.

A legegyszerűbb oldalsablon

Az alábbiakban egy legegyszerűbb oldalsablon látható, amelyhez további komponenseket és tartalmakat adhat hozzá egy weboldal felépítéséhez.

<!doctype html>
<html lang="hu">
  <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>
    <!-- Ha a komponensek icon attribútumát használja, akkor az ikonok CSS fájlját is importálnia kell -->

    <title>Helló, világ!</title>
  </head>
  <body>
    <mdui-button>Helló, világ!</mdui-button>
  </body>
</html>

Következő fejezet

Telepítés