# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Pierwsze kroki

- [Przegląd](https://www.mdui.org/pl/docs/2/index.md): mdui to nowoczesna biblioteka Web Components z 50+ komponentami Material Design. Obsługuje tryb ciemny, lokalizację i TypeScript. Buduj łatwo aplikacje dzięki mdui.
- [Instalacja](https://www.mdui.org/pl/docs/2/getting-started/installation.md): Zainstaluj mdui przez npm, pnpm lub CDN. Wybierz import pełny lub na żądanie, aby zoptymalizować wagę projektu. Nasze przewodniki zapewniają bezproblemową integrację.
- [Szybki start](https://www.mdui.org/pl/docs/2/getting-started/usage.md): Opanuj mdui oparte na Web Components. Poznaj atrybuty, właściwości, metody, zdarzenia i sloty. Dowiedz się o aktualizacji komponentów i stylizacji Shadow DOM w projektach.
- [Wsparcie TypeScript](https://www.mdui.org/pl/docs/2/getting-started/typescript-support.md): Napisany w TypeScript mdui oferuje pełne definicje typów dla wszystkich komponentów. Korzystaj z autouzupełniania i kontroli typów, poprawiając wydajność oraz jakość kodu.
- [Wsparcie IDE](https://www.mdui.org/pl/docs/2/getting-started/ide-support.md): Optymalizacja dla VS Code i WebStorm. Uzyskaj autouzupełnianie oraz podpowiedzi dzięki npm lub wtyczkom. Pełne wsparcie dla danych HTML i CSS znacząco przyspiesza pracę.
- [Lokalizacja](https://www.mdui.org/pl/docs/2/getting-started/localization.md): Wbudowane wsparcie dla wielu języków z ponad 50 pakietami. Obsługuje leniwe ładowanie i import statyczny. Buduj globalne aplikacje wykorzystując zdarzenia lokalizacji.
- [Częste pytania](https://www.mdui.org/pl/docs/2/getting-started/faq.md): Poznaj odpowiedzi na najczęstsze pytania społeczności mdui. Zawiera rozwiązania dla znaczników samozamykających i FOUC. Praktyczne porady i przykłady ułatwiają pracę.

## Tworzenie wspomagane przez AI

- [LLMs.txt](https://www.mdui.org/pl/docs/2/ai/llms.md): mdui oferuje pliki llms.txt dla lepszego kontekstu LLM. Dokumentacja Markdown wspiera wklejanie i wysyłanie plików, co znacznie poprawia trafność odpowiedzi AI.
- [Serwer MCP](https://www.mdui.org/pl/docs/2/ai/mcp.md): @mdui/mcp oferuje integrację serwera MCP dla agentów AI jak Cursor. Odpytuj o atrybuty, ikony i właściwości CSS, aby wynieść programowanie wspomagane AI na wyższy poziom.

## Style

- [Tryb ciemny](https://www.mdui.org/pl/docs/2/styles/dark-mode.md): Wszystkie komponenty mają wbudowany tryb ciemny. Przełączaj go systemowo lub ręcznie przez setTheme. Obsługuje globalne i lokalne nadpisywanie motywów w aplikacjach.
- [Kolor dynamiczny](https://www.mdui.org/pl/docs/2/styles/dynamic-color.md): Automatycznie generuj pełne palety kolorów z koloru bazowego lub obrazu. Funkcje setColorScheme i getColorFromImage pozwalają tworzyć harmonijne i unikalne motywy.
- [Typografia](https://www.mdui.org/pl/docs/2/styles/prose.md): Klasy mdui-prose i mdui-table optymalizują układy artykułów oraz tabel. Uzyskaj elegancką typografię i odstępy bez dodatkowego kodu dla treści Markdown i dynamicznych.
- [Tokeny projektowe](https://www.mdui.org/pl/docs/2/styles/design-tokens.md): System tokenów projektowych oparty na niestandardowych właściwościach CSS. Zawiera ponad 100 tokenów dla kolorów i kształtów, pozwalając na szybką zmianę stylu marki.

## Integracja z frameworkami

- [Integracja z React](https://www.mdui.org/pl/docs/2/frameworks/react.md): Dzięki Web Components mdui doskonale współpracuje z React. Oferuje pełne wsparcie TypeScript dla zdarzeń i właściwości oraz przewodniki po najlepszych praktykach.
- [Integracja z Vue](https://www.mdui.org/pl/docs/2/frameworks/vue.md): Łatwa integracja z Vue wymagająca minimalnej konfiguracji. Obsługuje v-model, zdarzenia, pełne typy TypeScript oraz inteligentne podpowiedzi dla lepszego kodowania.
- [Integracja z Angular](https://www.mdui.org/pl/docs/2/frameworks/angular.md): Zintegruj mdui z aplikacjami Angular przy użyciu CUSTOM_ELEMENTS_SCHEMA. Wspiera wstrzykiwanie zależności i wiązania danych. Oferujemy szczegółowe przewodniki i typy TS.
- [Integracja z innymi frameworkami](https://www.mdui.org/pl/docs/2/frameworks/others.md): Zbudowany na Web Components mdui współdziała z dowolnym frameworkiem, jak Svelte, Next.js czy Nuxt. Poznaj uniwersalne metody integracji oraz najlepsze praktyki.

## Komponenty

- [Komponent Awatar](https://www.mdui.org/pl/docs/2/components/avatar.md): Awatar reprezentuje marki lub osoby za pomocą obrazu, ikony lub tekstu. Wspiera okrągłe i kwadratowe kształty. Idealny do profili, sekcji komentarzy oraz kart.
- [Komponent Badge](https://www.mdui.org/pl/docs/2/components/badge.md): Badge wyświetla liczby lub etykiety stanu. Wspiera małe i duże rozmiary z tekstem. Łatwo dołącza się do innych komponentów, informując o nowych powiadomieniach.
- [Komponent BottomAppBar](https://www.mdui.org/pl/docs/2/components/bottom-app-bar.md): Dolny pasek aplikacji oferuje nawigację i operacje mobilne na dole ekranu. Integruje przyciski FAB i menu. Wspiera ukrywanie przy przewijaniu oraz zmianę kolorów.
- [Komponent Przycisk](https://www.mdui.org/pl/docs/2/components/button.md): Przycisk wspiera pięć stylów: wzniesiony, wypełniony, tonalny, konturowy i tekstowy. Posiada ikony i stany ładowania zgodnie z wytycznymi Material Design 3 i a11y.
- [Komponent ButtonIcon](https://www.mdui.org/pl/docs/2/components/button-icon.md): Przycisk z ikoną dla akcji drugorzędnych wspiera style: standardowy, wypełniony, tonalny i konturowy. Oferuje stany ładowania i linki, idealne do pasków narzędzi.
- [Komponent Karta](https://www.mdui.org/pl/docs/2/components/card.md): Karta to wszechstronny kontener na powiązane treści i akcje. Wspiera style wzniesione, wypełnione i konturowe z obsługą mediów, idealna do budowy nowoczesnych stron.
- [Komponent Checkbox](https://www.mdui.org/pl/docs/2/components/checkbox.md): Checkbox pozwala wybierać wiele opcji. Wspiera stany zaznaczone, odznaczone i nieokreślone. Oferuje niestandardowe ikony, walidację i pełne wsparcie dla formularzy.
- [Komponent Chip](https://www.mdui.org/pl/docs/2/components/chip.md): Chip reprezentuje dane wejściowe lub filtrację. Posiada cztery warianty: asystujący, filtrujący, wejściowy i sugerujący. Pozwala na oznaczanie i szybką kategoryzację.
- [Komponent CircularProgress](https://www.mdui.org/pl/docs/2/components/circular-progress.md): Okrągły wskaźnik postępu wyświetla ukończenie zadania po okręgu. Wspiera tryb określony i animację obrotu. Posiada niestandardowe rozmiary i kolory dla przycisków.
- [Komponent Collapse](https://www.mdui.org/pl/docs/2/components/collapse.md): Panel zwijany organizuje treść w sekcje, szczędząc miejsce na stronie. Posiada tryb akordeonu, niestandardowe wyzwalacze i animacje. Idealny do FAQ oraz ustawień.
- [Komponent Dialog](https://www.mdui.org/pl/docs/2/components/dialog.md): Okno dialogowe przekazuje ważne informacje i decyzje. Wspiera tytuły, ikony, tryb modalny i pełnoekranowy. Oferuje gotowe funkcje alert, confirm oraz prompt.
- [Komponent Divider](https://www.mdui.org/pl/docs/2/components/divider.md): Separator zapewnia wizualne oddzielenie list i układów. Wspiera tryby poziome i pionowe z niestandardowymi wcięciami. Kluczowy element dla przejrzystej hierarchii.
- [Komponent Dropdown](https://www.mdui.org/pl/docs/2/components/dropdown.md): Lista rozwijana wyzwala menu lub treści w miejscu kliknięcia lub kursora. Oferuje wiele trybów wyzwalania, opóźnienia i automatyczne pozycjonowanie dla interakcji.
- [Komponent Fab](https://www.mdui.org/pl/docs/2/components/fab.md): Pływający przycisk akcji (FAB) wyróżnia główne operacje w formie zwykłej lub rozszerzonej. Oferuje ikony, kolory i stany ładowania dla szybkiego dostępu do funkcji.
- [Komponent Ikona](https://www.mdui.org/pl/docs/2/components/icon.md): Ikona reprezentuje akcje przez Material Icons lub niestandardowe SVG. Zmieniaj rozmiar i kolor przez CSS. Zwiększa przejrzystość przycisków, menu i nawigacji.
- [Komponent Layout](https://www.mdui.org/pl/docs/2/components/layout.md): Layout zarządza paskami, panelami i treścią strony. Posiada responsywny system siatki z niestandardowymi punktami kontrolnymi, ułatwiając budowę szkieletu aplikacji.
- [Komponent LinearProgress](https://www.mdui.org/pl/docs/2/components/linear-progress.md): Liniowy wskaźnik postępu pokazuje postęp zadania poziomym paskiem. Wspiera tryby określone i nieokreślone. Możesz dostosować kolory oraz wysokość dla interfejsu.
- [Komponent List](https://www.mdui.org/pl/docs/2/components/list.md): Lista wyświetla pionowe elementy nawigacji lub kontaktów. Wspiera od jednej do trzech linii z awatarami, ikonami i linkami. Oferuje w pełni konfigurowalny układ.
- [Komponent Menu](https://www.mdui.org/pl/docs/2/components/menu.md): Menu wyświetla pionowe opcje operacji. Wspiera tryby wyboru, podmenu, skróty i niestandardową treść. Idealne do menu kontekstowych oraz zaawansowanej nawigacji.
- [Komponent NavigationBar](https://www.mdui.org/pl/docs/2/components/navigation-bar.md): Pasek nawigacji ułatwia przełączania stron na smartfonach. Mieści do 5 elementów z ikonami i badge. Wspiera automatyczne ukrywanie przy przewijaniu oraz kontenery.
- [Komponent NavigationDrawer](https://www.mdui.org/pl/docs/2/components/navigation-drawer.md): Wysuwany panel nawigacyjny wysuwa się z boku ekranu. Wspiera tryby modalne i niemodalne po lewej lub prawej stronie. Zawiera listy oraz informacje o użytkowniku.
- [Komponent NavigationRail](https://www.mdui.org/pl/docs/2/components/navigation-rail.md): Szyna nawigacyjna oferuje kompaktową nawigację boczną dla tabletów i desktopów. Wspiera badge, separatory i różne wyrównania. Wyświetla ikony z opcjonalną etykietą.
- [Komponent Radio](https://www.mdui.org/pl/docs/2/components/radio.md): Przycisk radiowy służy do wzajemnie wykluczających się wyborów. Zapewnia wybór tylko jednej opcji w danej grupie. Wspiera niestandardowe ikony i stany wyłączone.
- [Komponent RangeSlider](https://www.mdui.org/pl/docs/2/components/range-slider.md): Suwak zakresu pozwala wybierać przedziały za pomocą dwóch uchwytów. Oferuje dyskretne kroki, etykiety i walidację. Idealny dla zakresów cen oraz parametrów danych.
- [Komponent Select](https://www.mdui.org/pl/docs/2/components/select.md): Lista wyboru pozwala na pojedynczy lub wielokrotny wybór z menu. Oferuje etykiety, walidację, ikony i czyszczenie danych. Idealna dla formularzy i zaawansowanych filtrów.
- [Komponent SegmentedButton](https://www.mdui.org/pl/docs/2/components/segmented-button.md): Przycisk segmentowy umożliwia wybór pojedynczy lub wielokrotny do filtrowania i przełączania widoków. Posiada ikony, linki i niestandardowe style dla pełnej kontroli.
- [Komponent Slider](https://www.mdui.org/pl/docs/2/components/slider.md): Suwak umożliwia wybór wartości z precyzyjną kontrolą kroków i znaczników. Posiada walidację, autofokus i niestandardowe etykiety. Idealny do regulacji i filtrowania.
- [Komponent Snackbar](https://www.mdui.org/pl/docs/2/components/snackbar.md): Snackbar zapewnia krótkie informacje zwrotne z przyciskami akcji i auto-ukrywaniem. Wspiera kolory, pozycje i wywołania programowe dla lepszego interfejsu użytkownika.
- [Komponent Switch](https://www.mdui.org/pl/docs/2/components/switch.md): Przełącznik steruje ustawieniami binarnymi z natychmiastową reakcją. Wspiera ikony, kolory i walidację. Idealny do stron ustawień i zarządzania preferencjami aplikacji.
- [Komponent Tabs](https://www.mdui.org/pl/docs/2/components/tabs.md): Zakładki przełączają między wieloma widokami w jednym obszarze. Wspierają style podstawowe i drugorzędne z ikonami oraz badge. Idealne do nawigacji po kategoriach.
- [Komponent TextField](https://www.mdui.org/pl/docs/2/components/text-field.md): Pole tekstowe wspiera hasła, e-maile i inne typy danych. Posiada etykiety, ikony, pomocniczy tekst i walidację. W pełni dostępne z automatycznym dopasowaniem wysokości.
- [Komponent Tooltip](https://www.mdui.org/pl/docs/2/components/tooltip.md): Tooltip pokazuje dodatkowe informacje po najechaniu lub fokusie. Wspiera tekst sformatowany, różne pozycje i opóźnienia. Pomaga użytkownikom zrozumieć funkcje.
- [Komponent TopAppBar](https://www.mdui.org/pl/docs/2/components/top-app-bar.md): Górny pasek aplikacji zapewnia tytuły, nawigację i akcje na górze strony. Oferuje wiele stylów oraz efekty przewijania. Stanowi spójny nagłówek dla całej aplikacji.

## Funkcje

- [Narzędzie jq](https://www.mdui.org/pl/docs/2/functions/jq.md): Wbudowana biblioteka jq z API jak w jQuery, lecz o 1/6 mniejszym rozmiarze. Obsługuje łańcuchowe operacje DOM, zdarzenia i animacje bez żadnych zewnętrznych zależności.
- [Funkcja dialog](https://www.mdui.org/pl/docs/2/functions/dialog.md): Programistyczna nakładka na mdui-dialog. Otwieraj okna z JavaScript bez HTML. Wspiera niestandardowe tytuły i przyciski, zwracając Promise dla interakcji użytkownika.
- [Funkcja alert](https://www.mdui.org/pl/docs/2/functions/alert.md): Nowoczesny zamiennik window.alert oparty na mdui-dialog. Wyświetla stylowe okna z komunikatem i przyciskiem, nie blokując procesu renderowania strony internetowej.
- [Funkcja confirm](https://www.mdui.org/pl/docs/2/functions/confirm.md): Zamiennik window.confirm w stylu Material Design. Wyświetla programowe okna potwierdzenia i zwraca Promise z wyborem użytkownika, zapewniając pełną kontrolę i styl.
- [Funkcja prompt](https://www.mdui.org/pl/docs/2/functions/prompt.md): Zamiennik window.prompt w stylu Material Design. Pobiera dane przez okno z walidacją i różnymi typami wejścia. Zwraca Promise z wartością wprowadzoną przez osobę.
- [Funkcja snackbar](https://www.mdui.org/pl/docs/2/functions/snackbar.md): Wywołanie programowe mdui-snackbar. Szybko wyświetlaj komunikaty z przyciskami akcji, czasem trwania i pozycją. Nie wymaga HTML dla natychmiastowych powiadomień.
- [Funkcja getTheme](https://www.mdui.org/pl/docs/2/functions/getTheme.md): Pobierz ustawienia motywu dla strony lub elementów. Wspiera tryby jasny, ciemny i auto. Użyteczna do dostosowywania logiki lub stylów na podstawie aktywnego motywu.
- [Funkcja setTheme](https://www.mdui.org/pl/docs/2/functions/setTheme.md): Dynamicznie ustawiaj motyw jasny, ciemny lub auto dla strony lub elementów. Wspiera globalne i lokalne nadpisywanie motywów, zapewniając nowoczesne doświadczenia.
- [Funkcja getColorFromImage](https://www.mdui.org/pl/docs/2/functions/getColorFromImage.md): Wyodrębnij dominujące kolory z obrazów jako wartości hex. Współpracuje z setColorScheme, automatycznie generując harmonijne palety dopasowane do Twojej treści.
- [Funkcja setColorScheme](https://www.mdui.org/pl/docs/2/functions/setColorScheme.md): Generuj pełne palety Material Design z jednego koloru hex. Wspiera ustawienia globalne i lokalne dla szybkiego brandingu oraz spójnej personalizacji kolorystyki.
- [Funkcja removeColorScheme](https://www.mdui.org/pl/docs/2/functions/removeColorScheme.md): Usuń niestandardowe palety barw, aby przywrócić domyślne kolory. Może być stosowana globalnie lub lokalnie, co czyni ją idealną do resetowania motywów i trybów.
- [Funkcja loadLocale](https://www.mdui.org/pl/docs/2/functions/loadLocale.md): Wczytuj pakiety lokalizacyjne dla aplikacji. Wspiera metody leniwe, wstępne i statyczne dla ponad 50 języków. Zoptymalizowana pod kątem wydajności i ładowania na żądanie.
- [Funkcja setLocale](https://www.mdui.org/pl/docs/2/functions/setLocale.md): Dynamicznie ustawiaj kod języka aplikacji z obsługą asynchroniczną. Automatycznie aktualizuje komponenty dla płynnej lokalizacji bez potrzeby odświeżania strony.
- [Funkcja getLocale](https://www.mdui.org/pl/docs/2/functions/getLocale.md): Pobierz aktualny kod języka aplikacji. Używaj go do wykrywania środowiska, ładowania zasobów lub dostosowywania układu. Zwraca proste ciągi znaków z kodem języka.
- [Funkcja throttle](https://www.mdui.org/pl/docs/2/functions/throttle.md): Twórz funkcje ograniczające częstotliwość wykonywania zadań. Idealne dla zdarzeń o wysokiej częstotliwości jak scroll, co znacząco zwiększa ogólną wydajność aplikacji.
- [Funkcja observeResize](https://www.mdui.org/pl/docs/2/functions/observeResize.md): Monitoruj zmiany rozmiaru elementów przy użyciu API ResizeObserver. Wywołuje akcje dla responsywnych układów lub adaptacyjnych kontenerów. Zawiera proste czyszczenie.
- [Funkcja breakpoint](https://www.mdui.org/pl/docs/2/functions/breakpoint.md): Sprawdzaj responsywne punkty kontrolne jak xs, sm, md, lg, xl czy xxl. Oceniaj, czy szerokość jest większa, mniejsza lub mieści się w zakresie dla logiki interfejsu.

## Biblioteki

- [Biblioteka komponentów ikon @mdui/icons](https://www.mdui.org/pl/docs/2/libraries/icons.md): @mdui/icons to samodzielna biblioteka Material Icons zawierająca wszystkie ikony Google. Zoptymalizowana pod kątem tree-shakingu i importu na żądanie dla małych paczek.