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

## Első lépések

- [Áttekintés](https://www.mdui.org/hu/docs/2/index.md): Az mdui egy prémium webkomponens-könyvtár 50+ Material Design komponenssel. Támogatja a sötét módot, a lokalizációt és a TypeScriptet a modern és reszponzív alkalmazásokhoz.
- [Telepítés](https://www.mdui.org/hu/docs/2/getting-started/installation.md): Telepítse az mdui-t npm, pnpm vagy CDN útján. Támogatja a teljes és az igény szerinti importálást a csomagméret csökkentéséhez. Részletes útmutatót adunk a gyors integrációhoz.
- [Gyors áttekintés](https://www.mdui.org/hu/docs/2/getting-started/usage.md): Az mdui a webkomponensek szabványaira épül. Ismerje meg az attribútumok, tulajdonságok, metódusok, események és slotok használatát, valamint a Shadow DOM stílusainak kezelését.
- [TypeScript támogatás](https://www.mdui.org/hu/docs/2/getting-started/typescript-support.md): A teljesen TypeScript alapú mdui teljes típusdefiníciókat kínál minden komponenshez. Élvezze az automatikus kiegészítést és a típusellenőrzést a hatékonyabb fejlesztésért.
- [IDE támogatás](https://www.mdui.org/hu/docs/2/getting-started/ide-support.md): Az mdui optimális támogatást nyújt VS Code és WebStorm alatt. A kódkiegészítés és a súgók jelentősen felgyorsítják a fejlesztést az npm és a hivatalos bővítmények révén.
- [Lokalizáció](https://www.mdui.org/hu/docs/2/getting-started/localization.md): Beépített lokalizáció 50+ nyelvi csomaggal. Támogatja a lusta betöltést, a statikus importálást és a CDN használatát is, segítve a globális kiterjedésű modern alkalmazásokat.
- [Gyakori kérdések](https://www.mdui.org/hu/docs/2/getting-started/faq.md): Válaszok a közösség leggyakoribb kérdéseire és hivatalos megoldások. Tippek az önzáró tagek használatához, a villódzás elkerüléséhez és kódpéldák a gyors hibaelhárításhoz.

## Fejlesztés MI-vel

- [LLMs.txt](https://www.mdui.org/hu/docs/2/ai/llms.md): Az mdui llms.txt és llms-full.txt fájlokat biztosít, amelyek pontos kontextust adnak az LLM modelleknek, jelentősen javítva az AI válaszok pontosságát és a fejlesztési sebességet.
- [MCP-szerver](https://www.mdui.org/hu/docs/2/ai/mcp.md): Az @mdui/mcp integrálja az MCP-szervereket az AI-ügynökök számára. Kérdezzen le attribútumokat, ikonokat és CSS-változókat közvetlenül a mélyebb AI-alapú kódolási élményért.

## Stílusok

- [Sötét mód](https://www.mdui.org/hu/docs/2/styles/dark-mode.md): Minden mdui komponens rendelkezik beépített sötét mód támogatással. Váltson automatikusan a rendszer szerint vagy manuálisan a setTheme függvénnyel bárhol az alkalmazásában.
- [Dinamikus szín](https://www.mdui.org/hu/docs/2/styles/dynamic-color.md): Generáljon automatikusan világos és sötét palettákat egy alapszínből vagy képből. Használja a setColorScheme függvényt az egyedi, harmonikus és dinamikus színsémák alkotásához.
- [Tipográfia](https://www.mdui.org/hu/docs/2/styles/prose.md): Az mdui-prose és mdui-table osztályok optimalizálják a cikkek és táblázatok elrendezését. Elegáns tipográfia és térközök érhetők el bármilyen Markdown vagy dinamikus tartalomhoz.
- [Design token](https://www.mdui.org/hu/docs/2/styles/design-tokens.md): A design token rendszer CSS egyéni tulajdonságokon alapul. 100+ token érhető el a színekhez, sarkokhoz és egyebekhez, lehetővé téve az egyedi, de mégis egységes megjelenést.

## Keretrendszerekbe való integráció

- [Integráció Reacttal](https://www.mdui.org/hu/docs/2/frameworks/react.md): Az mdui zökkenőmentesen integrálható React környezetben. Teljes TypeScript támogatást és típusdefiníciókat kínál az eseménykezeléshez és tulajdonság-szinkronizáláshoz is.
- [Integráció Vue-val](https://www.mdui.org/hu/docs/2/frameworks/vue.md): Egyszerű mdui integráció Vue projektekben. Támogatja a v-model kötést, az egyedi eseménykezelést, a TypeScript típusokat és az intelligens IDE tippeket a hatékony fejlesztéshez.
- [Integráció Angularral](https://www.mdui.org/hu/docs/2/frameworks/angular.md): Az Angular integrációhoz a CUSTOM_ELEMENTS_SCHEMA szükséges. Részletes útmutatót kínálunk a kétirányú adatkötéshez és a teljes körű TypeScript típusok támogatásához egyaránt.
- [Integráció más keretrendszerekkel](https://www.mdui.org/hu/docs/2/frameworks/others.md): A szabványos webkomponenseknek köszönhetően az mdui bármilyen modern keretrendszerrel kompatibilis. Univerzális integrációs útmutatót és legjobb gyakorlatokat biztosítunk hozzá.

## Komponensek

- [Avatar komponens](https://www.mdui.org/hu/docs/2/components/avatar.md): Az avatar felhasználókat vagy márkákat jelenít meg képekkel vagy szöveggel. Kerek vagy szögletes formában, több méretben érhető el profilokhoz, kártyákhoz és megjegyzésekhez is.
- [Badge komponens](https://www.mdui.org/hu/docs/2/components/badge.md): A badge számlálók vagy állapotok jelzésére szolgáló kis elem. Kicsi és nagy méretben, számokkal vagy szöveggel is használható értesítések, feladatok és új üzenetek jelölésére.
- [Alsó alkalmazássáv komponens](https://www.mdui.org/hu/docs/2/components/bottom-app-bar.md): Az alsó alkalmazássáv navigációt és műveleti gombokat biztosít mobilra. Integrált FAB gombbal és görgetés alatti elrejtéssel segíti a fő funkciók és elrendezések gyors elérését.
- [Gomb komponens](https://www.mdui.org/hu/docs/2/components/button.md): Az mdui gombok ötféle stílust támogatnak ikonokkal és betöltési állapotokkal. Teljes hozzáférhetőséget biztosítanak a legújabb Material Design 3 specifikációk alapján az appokban.
- [Ikon-gomb komponens](https://www.mdui.org/hu/docs/2/components/button-icon.md): A kompakt ikon-gomb ideális eszköztárakhoz és kártyákhoz. Támogatja a teli, a körvonalas és egyéb stílusokat, betöltési állapotokkal és linkekkel a rendkívül rugalmas használatért.
- [Kártya komponens](https://www.mdui.org/hu/docs/2/components/card.md): A kártya egy sokoldalú tároló tartalom és műveletek megjelenítéséhez. Támogatja a teli és körvonalas stílusokat, valamint a médiatartalmakat bármilyen egyedi elrendezésben.
- [Jelölőnégyzet komponens](https://www.mdui.org/hu/docs/2/components/checkbox.md): A jelölőnégyzet több opció kiválasztását teszi lehetővé. Támogatja a bejelölt és határozatlan állapotokat, az egyedi ikonokat és a teljes űrlap-validációt a modern felületeken.
- [Chip komponens](https://www.mdui.org/hu/docs/2/components/chip.md): A chip egy interaktív elem bemenetek és szűrések kezeléséhez. Segítő, szűrő és javaslati változatokban érhető el, jelölhető és eltávolítható állapotok kezelésével is az oldalon.
- [Kör alakú folyamatjelző komponens](https://www.mdui.org/hu/docs/2/components/circular-progress.md): A kör alakú folyamatjelző forgó animációval mutatja a feladat állapotát. Támogatja a pontos módokat egyedi méretekkel betöltésekhez, frissítésekhez vagy gombok állapotához az appban.
- [Összecsukható panel komponens](https://www.mdui.org/hu/docs/2/components/collapse.md): Az összecsukható panel szakaszokba csoportosítja a tartalmat. Támogatja a harmonika módot és az egyedi eseménykezelést, ideális gyakori kérdésekhez és komplex beállítások számára.
- [Párbeszédablak komponens](https://www.mdui.org/hu/docs/2/components/dialog.md): A párbeszédablak fontos döntésekhez vagy adatkéréshez használható. Támogatja az ikonokat, a modális vagy teljes képernyős módot, és programozott alert és confirm funkciókat is kínál.
- [Elválasztó komponens](https://www.mdui.org/hu/docs/2/components/divider.md): Az elválasztó vizuális elkülönítést biztosít a listákban és elrendezésekben. Támogatja a vízszintes és függőleges módot egyedi behúzásokkal a tiszta kezelőfelületek eléréséért.
- [Lenyíló lista komponens](https://www.mdui.org/hu/docs/2/components/dropdown.md): A lenyíló lista paneleket nyit meg kattintásra vagy fókuszra. Támogatja az automatikus pozicionálást, késleltetést és többféle aktiválási módot a gazdag felhasználói élményért.
- [Lebegő műveletgomb komponens](https://www.mdui.org/hu/docs/2/components/fab.md): A lebegő műveletgomb (FAB) a legfontosabb akciókat emeli ki két formában és három méretben. Támogatja az ikonokat, színeket és betöltési állapotokat a gyors elérés érdekében.
- [Ikon komponens](https://www.mdui.org/hu/docs/2/components/icon.md): Az ikon Material Icons és egyedi SVG formátumot támogat. CSS segítségével könnyen méretezhető és színezhető, növelve a felismerhetőséget a gombokban és a menükben egyaránt nálunk.
- [Elrendezés komponens](https://www.mdui.org/hu/docs/2/components/layout.md): Az elrendezés komponensek az alkalmazássávok és tartalmi részek rendszerezésére szolgálnak. Reszponzív rácsrendszert és egyedi töréspontokat kínálnak a vázak gyors kialakításához.
- [Lineáris folyamatjelző komponens](https://www.mdui.org/hu/docs/2/components/linear-progress.md): A lineáris folyamatjelző vízszintes sávval mutatja a folyamat haladását. Támogatja a pontos és bizonytalan módokat egyedi színekkel bármilyen feltöltési vagy betöltési felületen.
- [Lista komponens](https://www.mdui.org/hu/docs/2/components/list.md): A lista függőlegesen jeleníti meg az elemeket navigációhoz vagy adatokhoz. Támogatja az avatárokat, ikonokat, gombokat és a linkeket többsoros elrendezésben és stílusokban is.
- [Menü komponens](https://www.mdui.org/hu/docs/2/components/menu.md): A menü függőleges műveleti opciókat jelenít meg. Támogatja a választási módokat, almenüket és gyorsbillentyűket is. Ideális navigációhoz és helyi menükhöz a webes felületeken.
- [Navigációs sáv komponens](https://www.mdui.org/hu/docs/2/components/navigation-bar.md): A navigációs sáv a főoldalak közötti váltásra szolgál mobilon. 3-5 elemet támogat automatikus címkékkel, ikonokkal és jelvényekkel, görgetés alatti elrejtési lehetőséggel is az appban.
- [Navigációs fiók komponens](https://www.mdui.org/hu/docs/2/components/navigation-drawer.md): A navigációs fiók oldalról nyíló panel a főmenü eléréséhez. Modális módban, bal vagy jobb oldalon is használható felhasználói adatokhoz, listákhoz és egyéb navigációs elemekhez.
- [Navigációs sín komponens](https://www.mdui.org/hu/docs/2/components/navigation-rail.md): A navigációs sín kompakt oldalsó navigációt biztosít nagyobb képernyőre. Támogatja a jelvényeket, elválasztókat és az egyedi igazítást ikonokkal és opcionális szöveges címkékkel.
- [Rádiógomb komponens](https://www.mdui.org/hu/docs/2/components/radio.md): A rádiógomb egymást kizáró választásokhoz ideális. Biztosítja, hogy egy csoportból csak egy opció legyen kijelölve. Támogatja az egyedi ikonokat és a különféle állapotokat is.
- [Tartománycsúszka komponens](https://www.mdui.org/hu/docs/2/components/range-slider.md): A tartománycsúszka két csúszóval teszi lehetővé tartományok kiválasztását. Ideális árak vagy időszakok szűréséhez, támogatja a diszkrét lépéseket és az egyedi formázásokat is.
- [Választómező komponens](https://www.mdui.org/hu/docs/2/components/select.md): A választómező egy- vagy többszörös kiválasztást tesz lehetővé listából. Támogatja a címkéket, a validációt és az egyedi ikonokat űrlapoknál és a szűrések során egyaránt.
- [Szegmentált gomb komponens](https://www.mdui.org/hu/docs/2/components/segmented-button.md): A szegmentált gomb csoportosított opciókat kínál egy- vagy többszörös kiválasztással. Ideális nézetváltáshoz és szűrésekhez, ikonokkal, linkekkel és egyedi vezérlőstílusokkal.
- [Csúszka komponens](https://www.mdui.org/hu/docs/2/components/slider.md): A csúszka értékek kiválasztását teszi lehetővé lépésközzel és jelölőkkel. Támogatja a validációt és az egyedi címkéket hangerő, fényerő vagy egyéb tartományok beállításakor is.
- [Snackbar komponens](https://www.mdui.org/hu/docs/2/components/snackbar.md): A snackbar rövid visszajelzést ad műveleti gombokkal és automatikus eltűnéssel. Támogatja az egyedi színeket és a programozott hívásokat is a kényelmesebb felhasználói élményért.
- [Kapcsoló komponens](https://www.mdui.org/hu/docs/2/components/switch.md): A kapcsoló bináris beállítások azonnali módosítására szolgál. Támogatja az egyedi ikonokat, méreteket és színeket, ideális beállítási panelekhez és preferenciák kezeléséhez.
- [Fülek komponens](https://www.mdui.org/hu/docs/2/components/tabs.md): A fül komponens több nézet közötti váltást tesz lehetővé egy területen. Támogatja az elsődleges stílusokat ikonokkal, jelvényekkel és egyedi állapotjelzőkkel is a navigációhoz.
- [Szövegmező komponens](https://www.mdui.org/hu/docs/2/components/text-field.md): A szövegmező támogatja az egy- és többsoros bevitelt jelszavakhoz, e-mailekhez és egyebekhez. Teljes körű validációt, segítő szöveget és akadálymentes használatot biztosít az appban.
- [Tooltip komponens](https://www.mdui.org/hu/docs/2/components/tooltip.md): A tooltip kiegészítő információkat jelenít meg az elem felett. Támogatja a gazdag tartalmat és egyedi elhelyezkedést a funkciók jobb megértése érdekében bármilyen webes felületen.
- [Felső alkalmazássáv komponens](https://www.mdui.org/hu/docs/2/components/top-app-bar.md): A felső alkalmazássáv címeket és navigációt kínál az oldal tetején. Többféle stílussal és görgetőeffektusokkal, valamint egyedi gombokkal teszi egységessé az alkalmazás fejlécrészét.

## Függvények

- [jq segédkönyvtár](https://www.mdui.org/hu/docs/2/functions/jq.md): A beépített mini jq könyvtár jQuery-szerű API-t kínál hatodakkora méretben. Támogatja a láncolt DOM műveleteket, eseménykezelést és animációkat külső függőségek vagy sallangok nélkül.
- [dialog függvény](https://www.mdui.org/hu/docs/2/functions/dialog.md): Hívja meg a párbeszédablakokat programozottan, HTML kód írása nélkül JavaScriptből. Támogatja az egyedi címeket és gombokat, Promise segítségével kezeli a felhasználói interakciókat.
- [alert függvény](https://www.mdui.org/hu/docs/2/functions/alert.md): Az alert függvény a window.alert modern, mdui-dialog alapú változata. Jelenítsen meg stílusos figyelmeztetéseket anélkül, hogy blokkolná az oldal aktuális renderelési folyamatát.
- [confirm függvény](https://www.mdui.org/hu/docs/2/functions/confirm.md): Modern Material Design megoldás a window.confirm helyett. Jelenítsen meg programozott megerősítő ablakokat, és kezelje a felhasználói döntéseit Promise alapokon egyszerűen.
- [prompt függvény](https://www.mdui.org/hu/docs/2/functions/prompt.md): A window.prompt Material Design stílusú helyettesítése. Bekéri a felhasználói adatokat beépített validációval, majd Promise-on keresztül adja vissza az értéket a kódunk számára.
- [snackbar függvény](https://www.mdui.org/hu/docs/2/functions/snackbar.md): Programozott snackbar hívás visszajelzésekhez. Gyorsan megjelenítheti az üzeneteket HTML nélkül, beállíthatja az időtartamot és a pozíciót is a kényelmesebb felhasználói élményért.
- [getTheme függvény](https://www.mdui.org/hu/docs/2/functions/getTheme.md): Lekérdezi az oldal vagy elemek témabeállításait világos, sötét vagy auto módban. Hasznos az üzleti logika vagy stílusok menet közbeni módosításához az aktuális aktív téma alapján.
- [setTheme függvény](https://www.mdui.org/hu/docs/2/functions/setTheme.md): Dinamikusan beállíthatod a világos, sötét vagy auto témát az oldalhoz vagy konkrét elemekhez. Támogatja a globális és helyi felülírásokat a modern és rugalmas felhasználói élményért.
- [getColorFromImage függvény](https://www.mdui.org/hu/docs/2/functions/getColorFromImage.md): Kinyeri a domináns színt képekből hexadecimális értékként. A setColorScheme függvénnyel párban harmonikus palettákat hozhatunk létre, amelyek követik az oldal képi tartalmát az appban.
- [setColorScheme függvény](https://www.mdui.org/hu/docs/2/functions/setColorScheme.md): Teljes Material Design palettát generál egyetlen hexadecimális színből. Támogatja a globális és helyi beállításokat is a gyors márkázáshoz és az egységes színsémák kialakításához.
- [removeColorScheme függvény](https://www.mdui.org/hu/docs/2/functions/removeColorScheme.md): Eltávolítja az egyedi színsémákat az alapértelmezett paletta visszaállításához. Alkalmazható globális vagy elemenként, ideális témaváltáshoz és a stílusbeállítások törléséhez az appban.
- [loadLocale függvény](https://www.mdui.org/hu/docs/2/functions/loadLocale.md): Töltsön be új nyelvi csomagokat aszinkron és dinamikus módon az mdui lokalizációjához. Támogatja az egyedi nyelvi fájlok betöltését a teljes többnyelvű felhasználói felület számára.
- [setLocale függvény](https://www.mdui.org/hu/docs/2/functions/setLocale.md): Beállítja az aktív nyelvet az mdui számára globálisan. Alkalmazás után a komponensek azonnal frissülnek az új fordításokkal és nyelvi adatokkal, bármilyen frissítés kényszerítése nélkül.
- [getLocale függvény](https://www.mdui.org/hu/docs/2/functions/getLocale.md): Lekérdezi az aktuálisan beállított nyelvet a rendszerből string formátumban. Segít a felületek és egyéb külső erőforrások honosításának szinkronizálásában, mint a zh-cn vagy az en.
- [throttle függvény](https://www.mdui.org/hu/docs/2/functions/throttle.md): A fojtás funkció korlátozza egy eseménykezelő futási gyakoriságát az idő alatt. Kiváló görgetéshez vagy ablakméretezéshez, jelentősen növeli az alkalmazás teljesítményét az appban.
- [observeResize függvény](https://www.mdui.org/hu/docs/2/functions/observeResize.md): Figyelje egy elem méretének változásait hatékony ResizeObserver megoldással. A függvény visszahívást indít változáskor és egyszerű lehetőséget ad a figyelő leállítására is az appban.
- [breakpoint függvény](https://www.mdui.org/hu/docs/2/functions/breakpoint.md): Meghatározza az aktuális reszponzív töréspontot a nézetablak szélessége alapján. Segít a feltételes megjelenítésben és az adaptív elrendezések precíz kialakításában a weboldalakon.

## Könyvtárak

- [Ikonkomponenskönyvtár @mdui/icons](https://www.mdui.org/hu/docs/2/libraries/icons.md): Az @mdui/icons több ezer Material ikont kínál optimalizált SVG formátumban. Támogatja a modern tree-shaking technológiát a minimális csomagméret elérése érdekében bármilyen projektben.