MDUIDocs
Kopiuj link llms.txtKopiuj link llms-full.txtWyświetl tę stronę w formacie MarkdownOmów tę stronę z ChatGPTOmów pełną dokumentację projektu z ChatGPT
Predefiniowany kolor
Własny kolor
Wyodrębnij kolor z tapety
Wybierz tapetę
Pierwsze kroki
Wprowadzenie Instalacja Szybki start Wsparcie TypeScript Wsparcie IDE Lokalizacja Często zadawane pytania
Tworzenie wspomagane przez AI
Style
Integracja z frameworkami
Komponenty
Funkcje
Biblioteki

Wprowadzenie

Poznajmy mdui za pomocą CDN i najprostszy szablon strony.

Czytasz dokumentację mdui 2!

Aby przeczytać dokumentację mdui 1, odwiedź www.mdui.org/docs/.

Szybki start

Najłatwiej użyć mdui, dołączając pliki CSS i JS bezpośrednio z CDN.

Jeśli chcesz zainstalować mdui przez npm, zapoznaj się z sekcją Instalacja.

Dołączenie plików

Dodaj poniższy kod do znacznika <head> strony:

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

Jeśli potrzebujesz użyć atrybutów ikon komponentów (np. icon="search" w <mdui-button icon="search"></mdui-button>), musisz również dołączyć plik CSS dla ikon – zobacz Używanie ikon Material Icons.

mdui nie wymaga żadnych zależności – po dołączeniu powyższych plików wszystko działa.

Najprostszy szablon strony

Poniżej znajduje się najprostszy szablon strony. Możesz dodawać więcej komponentów i treści, aby zbudować witrynę.

<!doctype html>
<html lang="pl">
  <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>
    <!-- Jeśli używasz atrybutu icon w komponentach, dołącz także plik CSS ikon -->

    <title>Witaj, świecie!</title>
  </head>
  <body>
    <mdui-button>Witaj, świecie!</mdui-button>
  </body>
</html>
Na tej stronie