# 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.

## Začínáme

- [Přehled](https://www.mdui.org/cs/docs/2/index.md): mdui je prémiová knihovna Web Components s 50+ komponentami Material Design. Podporuje tmavý režim, lokalizaci a TypeScript. Snadno vytvářejte moderní webové aplikace s mdui.
- [Instalace](https://www.mdui.org/cs/docs/2/getting-started/installation.md): Nainstalujte mdui přes npm, pnpm nebo CDN. Podporuje plný i částečný import pro menší velikost balíčku. Detailní průvodce globálním i ES modulem zajistí snadnou integraci.
- [Rychlý start](https://www.mdui.org/cs/docs/2/getting-started/usage.md): mdui vychází z Web Components. Dokumentace detailně popisuje použití atributů, vlastností, metod, událostí a slotů. Ovládněte Shadow DOM styling a aktualizace komponent.
- [Podpora TypeScriptu](https://www.mdui.org/cs/docs/2/getting-started/typescript-support.md): mdui je napsáno v TypeScriptu s plnými definicemi typu. Využijte automatické doplňování a kontrolu typů pro efektivnější vývoj a vyšší kvalitu kódu vašich projektů.
- [Podpora pro IDE](https://www.mdui.org/cs/docs/2/getting-started/ide-support.md): Optimalizováno pro VS Code a WebStorm. Získejte doplňování kódu a nápovědu přes npm nebo rozšíření. Plná podpora HTML a CSS dat znatelně zrychluje vývoj aplikací.
- [Lokalizace](https://www.mdui.org/cs/docs/2/getting-started/localization.md): Vestavěná podpora pro 50+ jazyků. Podporuje líné načítání i statické importy přes CDN nebo npm. Budujte globální aplikace s využitím lokalizačních událostí knihovny mdui.
- [Často kladené otázky](https://www.mdui.org/cs/docs/2/getting-started/faq.md): Časté dotazy komunity mdui s oficiálními odpověďmi. Řešení pro samouzavírací tagy, zamezení FOUC a další. Najdete zde tipy pro ladění a užitečné příklady kódu.

## Vývoj s pomocí AI

- [LLMs.txt](https://www.mdui.org/cs/docs/2/ai/llms.md): mdui poskytuje llms.txt a llms-full.txt pro přesný kontext LLM. Markdown dokumentace podporuje vkládání či nahrávání, čímž zvyšuje přesnost a rychlost odpovědí AI.
- [MCP server](https://www.mdui.org/cs/docs/2/ai/mcp.md): @mdui/mcp integruje MCP servery pro AI agenty. Dotazujte se na atributy, ikony a CSS Custom Property přímo v AI a využijte efektivitu moderního automatizovaného vývoje.

## Styly

- [Tmavý režim](https://www.mdui.org/cs/docs/2/styles/dark-mode.md): Všechny komponenty mají vestavěnou podporu pro tmavý režim. Přepínejte jej systémově nebo pomocí setTheme. Podporuje globální i lokální přebití motivu pro vaše aplikace.
- [Dynamická barva](https://www.mdui.org/cs/docs/2/styles/dynamic-color.md): Automaticky generujte světlé a tmavé palety ze základní barvy či obrázku. Použijte setColorScheme a getColorFromImage pro tvorbu harmonických, osobních motivů.
- [Typografie](https://www.mdui.org/cs/docs/2/styles/prose.md): Třídy mdui-prose a mdui-table optimalizují rozvržení článků i tabulek. Získejte elegantní typografii a mezery pro libovolný dynamický obsah či Markdown bez námahy.
- [Designové tokeny](https://www.mdui.org/cs/docs/2/styles/design-tokens.md): Systém designových tokenů přes CSS Custom Property. Obsahuje 100+ tokenů barev a tvarů. Přizpůsobte si je pro vlastní unikátní vzhled při zachování jednoty designu.

## Integrace s frameworky

- [Integrace s Reactem](https://www.mdui.org/cs/docs/2/frameworks/react.md): mdui vychází z Web Components a skvěle se integruje s Reactem. Nabízí plnou podporu TypeScriptu pro vazbu událostí i synchronizaci vlastností dle osvědčených metod.
- [Integrace s Vue](https://www.mdui.org/cs/docs/2/frameworks/vue.md): Snadná integrace do Vue s konfigurací kompilátoru šablon. Podporuje v-model, naslouchání událostem, plné typy TypeScriptu a inteligentní nápovědu pro vývojáře.
- [Integrace s Angularem](https://www.mdui.org/cs/docs/2/frameworks/angular.md): Vyžaduje CUSTOM_ELEMENTS_SCHEMA pro Angular. Nabízí detailní návody a příklady integrace. Podporuje DI, obousměrnou vazbu i plné definice typů v TypeScriptu.
- [Integrace s dalšími frameworky](https://www.mdui.org/cs/docs/2/frameworks/others.md): mdui jako standard Web Components funguje v moderních frameworcích jako Svelte, Next.js či Nuxt. Přinášíme osvědčené postupy a univerzální průvodce pro integraci.

## Komponenty

- [Komponenta Avatar](https://www.mdui.org/cs/docs/2/components/avatar.md): Avatar reprezentuje uživatele pomocí obrázku, ikony nebo textu. Nabízí kruhové i čtvercové tvary různých velikostí. Ideální pro profily, kontakty a komentáře ve vašem UI.
- [Komponenta Odznak](https://www.mdui.org/cs/docs/2/components/badge.md): Odznak zobrazuje čísla či stavové značky u jiných prvků. Podporuje mezní hodnoty, různé barvy a styly. Skvělý pro notifikace, počty zpráv a nepřečtená upozornění.
- [Komponenta Spodní aplikační lišta](https://www.mdui.org/cs/docs/2/components/bottom-app-bar.md): Lišta u spodního okraje pro klíčové akce a navigaci v mobilním UI. Nabízí integraci FAB tlačítka a skrytí při posunu, čímž maximalizuje využitelnou plochu aplikace.
- [Komponenta Tlačítko](https://www.mdui.org/cs/docs/2/components/button.md): Tlačítko nabízí styly elevated, filled, tonal, outlined a text. Obsahuje ikony, stavy načítání a plnou přístupnost dle zásad Material Design 3 pro moderní web.
- [Komponenta Ikonové tlačítko](https://www.mdui.org/cs/docs/2/components/button-icon.md): Ikonové tlačítko pro vedlejší akce nabízí standardní, plné, tonal a obrysové styly. Obsahuje stavy načítání a odkazy. Skvělé pro nástrojové lišty nebo záhlaví karet aplikací.
- [Komponenta Karta](https://www.mdui.org/cs/docs/2/components/card.md): Karta je všestranný kontejner pro související obsah a akce. Podporuje vyvýšené, plné a obrysové styly s podporou odkazů i médií pro jakékoli uživatelské rozhraní.
- [Komponenta Zaškrtávací políčko](https://www.mdui.org/cs/docs/2/components/checkbox.md): Zaškrtávací políčko dovoluje výběr více možností. Podporuje vybraný, nevybraný i neurčitý stav. Nabízí vlastní ikony, validaci a plnou podporu webových formulářů.
- [Komponenta Chip](https://www.mdui.org/cs/docs/2/components/chip.md): Chip reprezentuje vstupy, výběry nebo filtry. Nabízí varianty asist, filtr, vstup a návrh se stavy pro výběr i smazání. Ideální pro kategorizaci, tagy a filtrování obsahu.
- [Komponenta Kruhový indikátor průběhu](https://www.mdui.org/cs/docs/2/components/circular-progress.md): Kruhový indikátor průběhu pro vizualizaci stavu operace či načítání. Zobrazuje fixní hodnotu nebo rotující animaci s nastavitelnou barvou, velikostí i tloušťkou.
- [Komponenta Sbalovací panel](https://www.mdui.org/cs/docs/2/components/collapse.md): Seskupuje vrstvený obsah a šetří místo na stránce. Nabízí režim akordeonu, vlastní triggery a stavy. Ideální pro FAQ, seskupování nastavení či přehlednou správu obsahu webu.
- [Komponenta Dialog](https://www.mdui.org/cs/docs/2/components/dialog.md): Dialogové okno pro důležité informace, potvrzení či vstupy. Podporuje modální i nemodální režim s vlastním obsahem a akcemi. Blokuje interakci s pozadím dle potřeby.
- [Komponenta Oddělovač](https://www.mdui.org/cs/docs/2/components/divider.md): Oddělovač je tenká čára pro zvýšení přehlednosti rozvržení. Podporuje svislou i vodorovnou orientaci, vlastní barvu a odsazení pro jasnou hierarchii prvků v aplikaci.
- [Komponenta Rozbalovací nabídka](https://www.mdui.org/cs/docs/2/components/dropdown.md): Zobrazuje nabídky či obsah na pozici kurzoru či po kliknutí. Nabízí různé triggery, automatické polohování a prodlevy. Klíčový prvek pro bohaté interakce a kontextové akce.
- [Komponenta Plovoucí akční tlačítko](https://www.mdui.org/cs/docs/2/components/fab.md): Plovoucí akční tlačítko (FAB) zvýrazňuje hlavní akce v běžné či rozšířené formě. Nabízí ikony, barvy a stavy načítání pro okamžitý přístup k důležitým funkcím.
- [Komponenta Ikona](https://www.mdui.org/cs/docs/2/components/icon.md): Ikona pro jasné a efektivní vizuální vyjádření významu akce. Podporuje Material Icons i vlastní SVG se stylováním barvy a velikosti pomocí CSS pro moderní návrh.
- [Komponenta Rozvržení](https://www.mdui.org/cs/docs/2/components/layout.md): Responzivní systém rozvržení pro snadnou definici záhlaví, panelů a patičky. Podporuje různé zlomové body a mřížky sloupců pro rychlý vývoj aplikací dle Material Design.
- [Komponenta Lineární indikátor průběhu](https://www.mdui.org/cs/docs/2/components/linear-progress.md): Lineární indikátor průběhu zobrazuje stav operace vodorovně. Podporuje režimy s určeným i neurčitým průběhem s vlastní barvou, výškou i rychlostí animace pro UI.
- [Komponenta Seznam](https://www.mdui.org/cs/docs/2/components/list.md): Vertikální kolekce položek v jedno-, dvou- či třířádkovém režimu. Podporuje avatary, ikony, odkazy i stavy. Vhodné pro navigaci, kontakty a přehledné organizování obsahu.
- [Komponenta Nabídka](https://www.mdui.org/cs/docs/2/components/menu.md): Vertikální seznam operací s podporou výběru, ikon, seskupování a vnořených úrovní. Lze přidat zkratky i zakázané položky. Ideální pro kontextové nabídky a ovládací panely.
- [Komponenta Navigační lišta](https://www.mdui.org/cs/docs/2/components/navigation-bar.md): Navigační lišta pro mobilní zařízení pojme 3 až 5 položek s ikonami a odznaky. Podporuje animace a skrytí při posunu pro intuitivní přepínání hlavních sekcí vašich aplikací.
- [Komponenta Boční navigační panel](https://www.mdui.org/cs/docs/2/components/navigation-drawer.md): Boční navigační panel nabízí přístup k mnoha sekcím i na menších displejích. Podporuje modální i standardní režimy s uživateli či seznamy. Ideální pro hlubokou strukturu UI.
- [Komponenta Postranní navigační lišta](https://www.mdui.org/cs/docs/2/components/navigation-rail.md): Kompaktní postranní navigační lišta pro rychlý přístup k akcím na tabletech a PC. Podporuje indikátory aktivity, oddělovače i odznaky pro efektivní využití místa na ploše.
- [Komponenta Přepínač](https://www.mdui.org/cs/docs/2/components/radio.md): Přepínače pro výběr jediné možnosti ze vzájemně se vylučujících voleb. Podporují vlastní ikony a zakázané stavy pro použití ve formulářích, anketách i dotaznících.
- [Komponenta Posuvník rozsahu](https://www.mdui.org/cs/docs/2/components/range-slider.md): Posuvník rozsahu pro výběr číselného rozmezí pomocí dvou jezdců. Nabízí diskrétní kroky, popisky hodnot a validaci. Široké využití pro ceny, časové úseky či parametry v UI.
- [Komponenta Výběr](https://www.mdui.org/cs/docs/2/components/select.md): Dovoluje výběr jedné či více možností z nabídky. Podporuje štítky, validaci, ikony i mazání. Skvělý pro formuláře, datové vstupy a pokročilé filtrování dle zadaných potřeb.
- [Komponenta Segmentované tlačítko](https://www.mdui.org/cs/docs/2/components/segmented-button.md): Segmentované tlačítko podporuje výběr pro filtrování či přepínání zobrazení. Nabízí ikony, odkazy a vlastní styly. Představuje klíčovou komponentu pro ovládací prvky v UI.
- [Komponenta Posuvník](https://www.mdui.org/cs/docs/2/components/slider.md): Posuvník umožňuje výběr hodnoty s krokem a značkami. Nabízí validaci, automatické zaměření a vlastní popisky. Ideální pro ovládání hlasitosti, jasu nebo filtraci rozsahu.
- [Komponenta Snackbar](https://www.mdui.org/cs/docs/2/components/snackbar.md): Snackbar poskytuje stručnou zpětnou vazbu s akčními tlačítky a automatickým zavřením. Podporuje vlastní barvy, pozice i volání přes JS pro plynulé informování v aplikacích.
- [Komponenta Spínač](https://www.mdui.org/cs/docs/2/components/switch.md): Spínač přepíná binární nastavení s okamžitou odezvou. Podporuje vlastní ikony, barvy a velikosti. Skvělý pro stránky nastavení, oprávnění a správu předvoleb v UI.
- [Komponenta Záložky](https://www.mdui.org/cs/docs/2/components/tabs.md): Přepíná mezi více pohledy v jedné oblasti. Nabízí různé styly, pozice, ikony a odznaky s indikací aktivní volby. Skvělé pro kategorickou navigaci a přehledné stránkování.
- [Komponenta Textové pole](https://www.mdui.org/cs/docs/2/components/text-field.md): Podporuje jedno- i víceřádkový textový vstup včetně hesel či e-mailů. Nabízí štítky, nápovědu, ikony a validaci. Plně přístupná komponenta s automatickou úpravou výšky pole.
- [Komponenta Tooltip](https://www.mdui.org/cs/docs/2/components/tooltip.md): Tooltip zobrazuje doplňující text při najetí či zaměření prvku. Podporuje bohatý text, libovolné umístění a nastavitelné prodlevy. Pomáhá uživatelům pochopit funkce i prvky.
- [Komponenta Horní aplikační lišta](https://www.mdui.org/cs/docs/2/components/top-app-bar.md): Horní lišta s nadpisem a akcemi pro aktuální obrazovku. Nabízí styly pro scrollování, fixní pozice a barvy. Tvoří jednotné záhlaví pro navigaci i kontextové nástroje.

## Funkce

- [Knihovna jq](https://www.mdui.org/cs/docs/2/functions/jq.md): jq je lehká JS knihovna pro manipulaci s DOM s API podobným jQuery. Nabízí řetězení metod pro události a animace při zachování minimální velikosti pro rychlé aplikace.
- [Funkce dialog](https://www.mdui.org/cs/docs/2/functions/dialog.md): Funkce dialog otevírá mdui-dialog přímo z JavaScriptu bez nutnosti psát HTML šablony. Podporuje vlastní obsah, tlačítka a vrací Promise pro snadné zpracování akcí.
- [Funkce alert](https://www.mdui.org/cs/docs/2/functions/alert.md): Nahraďte window.alert moderním dialogem se sjednoceným stylem. Funkce alert zobrazí důležité upozornění s vlastním textem a tlačítkem bez blokování vykreslování webu.
- [Funkce confirm](https://www.mdui.org/cs/docs/2/functions/confirm.md): Potvrzovací dialog confirm vrací volbu uživatele skrze Promise. Nabízí moderní vzhled, vlastní zprávy i tlačítka jako elegantní alternativu k nativnímu window.confirm.
- [Funkce prompt](https://www.mdui.org/cs/docs/2/functions/prompt.md): Funkce prompt slouží k získání vstupu od uživatele v moderním dialogu. Vrací zadanou hodnotu pomocí Promise a podporuje validaci i různé typy polí pro čistší interakci.
- [Funkce snackbar](https://www.mdui.org/cs/docs/2/functions/snackbar.md): Programové volání snackbaru pro rychlé zobrazení zpráv z JavaScriptu. Nastavte text, akci i dobu trvání. Skvělé pro okamžitou dynamickou odezvu na akce uživatelů v UI.
- [Funkce getTheme](https://www.mdui.org/cs/docs/2/functions/getTheme.md): Zjistěte aktuální motiv stránky či konkrétního prvku pomocí getTheme. Vrací světlý, tmavý nebo systémový režim a usnadňuje logiku větvení stylu v kódu vaší aplikace.
- [Funkce setTheme](https://www.mdui.org/cs/docs/2/functions/setTheme.md): Dynamicky změňte motiv na světlý, tmavý či systémový pomocí setTheme. Podporuje globální nastavení i lokální přepsání pro konkrétní komponenty či sekce rozvržení webu.
- [Funkce getColorFromImage](https://www.mdui.org/cs/docs/2/functions/getColorFromImage.md): Extrahujte dominantní barvu z obrázku pro tvorbu dynamických témat. Funkce vrací hex hodnotu barvy, kterou lze přímo využít v setColorScheme pro harmonický vzhled webu.
- [Funkce setColorScheme](https://www.mdui.org/cs/docs/2/functions/setColorScheme.md): setColorScheme vygeneruje kompletní paletu barev z jediné hex barvy. Podporuje globální i lokální aplikaci pro tvorbu osobních a značkových motivů v reálném čase.
- [Funkce removeColorScheme](https://www.mdui.org/cs/docs/2/functions/removeColorScheme.md): Odstraňte dynamické barevné schéma a vraťte se k výchozímu motivu skrze removeColorScheme. Lze aplikovat na celou stránku i prvky pro snadnou správu vzhledu aplikace.
- [Funkce loadLocale](https://www.mdui.org/cs/docs/2/functions/loadLocale.md): Dynamicky načítejte jazykové balíčky na vyžádání pomocí loadLocale. Podporuje asynchronní zdroje a různé formáty pro snížení počáteční velikosti balíčku vaší aplikace.
- [Funkce setLocale](https://www.mdui.org/cs/docs/2/functions/setLocale.md): Nastavte jazyk aplikace a okamžitě aktualizujte všechny texty komponent pomocí setLocale. Vyžaduje předchozí načtení balíčku a zajišťuje plynulou lokalizaci rozhraní.
- [Funkce getLocale](https://www.mdui.org/cs/docs/2/functions/getLocale.md): Získejte kód aktuálně používaného jazyka skrze getLocale. Užitečné pro dynamické načítání specifických zdrojů nebo logiku rozvržení závislou na aktuální lokalizaci webu.
- [Funkce throttle](https://www.mdui.org/cs/docs/2/functions/throttle.md): Omezte frekvenci volání funkcí pomocí throttle pro zvýšení výkonu. Ideální pro události jako scroll či resize, kde zaručí vykonání akce nejvýše jednou za daný interval.
- [Funkce observeResize](https://www.mdui.org/cs/docs/2/functions/observeResize.md): Sledujte změny velikosti prvků pomocí observeResize založeném na ResizeObserveru. Volá callback při každé změně a vrací funkci pro snadné ukončení sledování objektů.
- [Funkce breakpoint](https://www.mdui.org/cs/docs/2/functions/breakpoint.md): Zjistěte aktuální zlomový bod prohlížeče (xs až xxl) pomocí funkce breakpoint. Podporuje vlastní prahové hodnoty a vrací logické výsledky pro responzivní logiku v JS.

## Knihovny

- [Knihovna ikon @mdui/icons](https://www.mdui.org/cs/docs/2/libraries/icons.md): Balíček @mdui/icons obsahuje kompletní sadu Material Icons jako Web Components. Nabízí importy na vyžádání, vlastní stylování a vysoký výkon pro moderní webové projekty.