# Áttekinté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/](https://www.mdui.org/docs/) oldalra. ## Gyors áttekintés {#getting-started} 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](/hu/docs/2/getting-started/installation) fejezetet. **Fájlok importálása** Adja hozzá a következő kódot az oldal `` címkéjéhez: ```html ``` Ha a komponensek ikon attribútumát (például a `` `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](/hu/docs/2/components/icon#usage-material-icons)). 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 {#template} Az alábbiakban egy legegyszerűbb oldalsablon látható, amelyhez további komponenseket és tartalmakat adhat hozzá egy weboldal felépítéséhez. ```html Helló, világ! Helló, világ! ``` # Telepítés Az mdui-t telepítheti npm segítségével, vagy betöltheti CDN-ről. Javasoljuk az npm használatát. ## npm telepítés {#npm} ```bash npm install mdui --save ``` ### Teljes körű importálás {#full-import} Importálja a következő két fájlt a projekt belépési fájljába, és máris használhatja az összes mdui komponenst: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Közvetlenül az mdui-ból is importálhatja a használni kívánt függvényeket. Például a [`snackbar`](/hu/docs/2/functions/snackbar) függvény importálása: ```js import { snackbar } from 'mdui'; ``` Az összes mdui-ból importálható függvény megjelenítése 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Igény szerinti importálás {#cherry-picking} A projekt méretének optimalizálása érdekében csak a szükséges komponenseket és függvényeket importálhatja. Például, ha csak a [``](/hu/docs/2/components/button) komponensre és a [`snackbar`](/hu/docs/2/functions/snackbar) függvényre van szüksége, a következőképpen importálhatja őket: ```js // A CSS fájlt mindig importálni kell import 'mdui/mdui.css'; // A komponens importálása import 'mdui/components/button.js'; // A snackbar függvény importálása import { snackbar } from 'mdui/functions/snackbar.js'; ``` Minden komponens vagy függvény dokumentációs oldala részletesen ismerteti, hogyan kell azt igény szerint importálni. Az összes igény szerint importálható komponens és függvény megjelenítése 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} A `` és ` Kattints rám ``` ### ES modul build verzió használata {#es-module} Az alábbi példa bemutatja, hogyan használható az mdui ES modul build verziója. Ebben a verzióban az ES modul szintaxis segítségével importálhatja az mdui-t CDN-ről: ```html Kattints rám ``` # Gyors áttekintés Az mdui komponensei szabványos Web Components komponensek, így ugyanúgy használhatja őket, mint a `
` címkét. Minden komponens dokumentációs oldala részletesen ismerteti a teljes API-t, beleértve az attribútumokat, tulajdonságokat, metódusokat, eseményeket, slot-okat, CSS Part-okat, CSS egyéni tulajdonságokat stb. Ez a fejezet a Web Components használatát mutatja be. ## Attribútumok {#attribute} Az attribútumok két típusra oszthatók: HTML attribútumok és JavaScript tulajdonságok. Ezek általában egy az egyben megfeleltethetők, és szinkronban maradnak egymással. Ha frissíti a HTML-attribútum értékét, a JavaScript-tulajdonság értéke is frissül, és ez fordítva is igaz. A HTML attribútumokat közvetlenül a komponens HTML karakterláncában állíthatja be, és a `getAttribute` és `setAttribute` metódusokkal olvashatja és módosíthatja: ```html Kattints rám ``` A JavaScript tulajdonságokat közvetlenül a komponens példányának tulajdonságaiként olvashatja vagy állíthatja be: ```html Kattints rám ``` Egyes tulajdonságok boolean típusúak. Ezeknél a HTML attribútum megléte esetén a JavaScript tulajdonság `true`, egyébként `false`. Azonban egyes keretrendszerekkel való kompatibilitás miatt az mdui a `false` karakterláncot is boolean `false` értékként értelmezi. ```html ``` Néha a tulajdonság értéke tömb, objektum vagy függvény. Ilyenkor csak JavaScript tulajdonság létezik, nincs megfelelő HTML attribútum. Például a [``](/hu/docs/2/components/slider) komponens [`labelFormatter`](/hu/docs/2/components/slider#attributes-labelFormatter) tulajdonsága egy függvény, amelyet csak JavaScript-en keresztül állíthat be: ```html ``` Az alábbiakban a [``](/hu/docs/2/components/slider) komponens tulajdonság dokumentációjának egy részlete látható példaként: | HTML attribútum | JavaScript tulajdonság | reflect | | --------------- | ---------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Ennél a komponensnél a `name` attribútumnak van HTML attribútuma és JavaScript tulajdonsága is, és a reflect oszlop azt jelzi, hogy a JavaScript tulajdonság frissítésekor a HTML attribútum is frissül. A `value` tulajdonságnál a JavaScript tulajdonság frissítésekor a HTML attribútum nem frissül. A `labelFormatter` tulajdonságnak pedig csak JavaScript tulajdonsága van. ## Metódusok {#method} Egyes komponensek nyilvános metódusokat biztosítanak, amelyek meghívásával különböző funkciókat valósíthat meg. Például a [``](/hu/docs/2/components/text-field) komponens [`focus()`](/hu/docs/2/components/text-field#methods-focus) metódusával a szövegmező fókuszba kerülhet. ```html ``` Az egyes komponensek dokumentációs oldalain megtekintheti az összes elérhető metódust és azok paramétereit. ## Események {#event} Egyes komponensek bizonyos műveletek végrehajtásakor eseményeket aktiválnak. Például a [``](/hu/docs/2/components/dialog) komponens megnyitásakor aktiválja az [`open`](/hu/docs/2/components/dialog#events-open) eseményt. Figyelheti ezt az eseményt, hogy egyéni műveleteket hajtson végre. ```html Párbeszédablak ``` Az egyes komponensek dokumentációs oldalain megtekintheti az összes elérhető eseményt és azok paramétereit. Ha más keretrendszerben (például Vue, React, Angular) használja az mdui-t, használhatja a keretrendszer által biztosított szintaxist az események kötésére. Azonban egyes keretrendszerek (például a React) eseménykötési szintaxisa csak a szabványos eseményekhez (például `click` esemény) használható, és nem használható egyéni események (például `open` esemény) kötésére. Ezért a Reactben az egyéni események kötéséhez először meg kell szereznie az elem referenciáját, majd az `addEventListener` metódussal kell az eseményt kötnie. Az mdui Reactben való használatával kapcsolatos további információkért lásd a [Keretrendszerek integrációja - React](/hu/docs/2/frameworks/react) oldalt. ## Slot {#slot} Számos komponens biztosít slot-okat, amelyek lehetővé teszik egyéni HTML-tartalom beillesztését a komponens belsejébe. A leggyakoribb az alapértelmezett slot, amely egy sima HTML vagy egyszerű szöveg a komponens belsejében. Például a [``](/hu/docs/2/components/button) komponens alapértelmezett slotja a gomb szövegének beállítására szolgál. A példában a „Kattints rám" az alapértelmezett slot tartalma: ```html Kattints rám ``` Egyes komponensek névvel ellátott slot-okat is biztosítanak. A névvel ellátott slot-ok esetén meg kell adnia a slot nevét a HTML `slot` attribútumában. Az alábbi példában a [``](/hu/docs/2/components/icon) komponens a `slot="start"` értéket adja meg, ami a [`start`](/hu/docs/2/components/button#slots-icon) nevű slot-ot jelöli, vagyis ez az ikon a komponens bal oldalára kerül beillesztésre: ```html Beállítások ``` Ha egy komponens több névvel ellátott slot-ot használ, a slot-ok sorrendje nem számít, amíg a komponensen belül vannak, a böngésző automatikusan a megfelelő helyre helyezi őket. Az egyes komponensek dokumentációs oldalain megtekintheti az összes támogatott slot-ot. ## CSS egyéni tulajdonságok {#css-custom-properties} A CSS egyéni tulajdonságok a CSS változói. Az mdui számos [globális CSS egyéni tulajdonságot](/hu/docs/2/styles/design-tokens) határoz meg, amelyeket az egyes komponensek belsőleg hivatkoznak. Így ezeknek a CSS egyéni tulajdonságoknak a módosításával globálisan módosíthatja az mdui komponensek stílusát. Például az alábbi kód kicsinyíti az összes komponens sarkainak lekerekítését: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` A CSS egyéni tulajdonságokat lokális hatókörben is módosíthatja. Például az alábbi kód csak a `class="sharp"` elemen és annak gyermekein belül kicsinyíti a sarkok lekerekítését: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Egyes komponensek komponensspecifikus CSS egyéni tulajdonságokat is biztosítanak. Ezeknek a tulajdonságoknak a hatóköre az adott komponensre korlátozódik, ezért nem tartalmazzák a `--mdui` előtagot. Például az alábbi kód a [``](/hu/docs/2/components/dialog) komponens `--z-index` tulajdonságának módosításával módosítja a `z-index` stílust: ```css mdui-dialog { --z-index: 3000; } ``` Az egyes komponensek dokumentációs oldalain megtekintheti a komponensek által támogatott CSS egyéni tulajdonságokat. ## CSS Part {#css-part} Az mdui komponensek shadow DOM-ot használnak a stílusok és viselkedések elkülönítésére, de a szokásos CSS szelektorok nem képesek kiválasztani a shadow DOM belsejében lévő elemeket. Ezért egyes komponensek `part` attribútumot adnak a shadow DOM elemekhez, így a `::part` CSS szelektor segítségével kiválaszthatja a megfelelő elemeket, és felülírhatja azok egyes stílusait. Például az alábbi kód a [`button`](/hu/docs/2/components/button#cssParts-button) part segítségével módosítja a gomb belső kitöltését, és a [`label`](/hu/docs/2/components/button#cssParts-label), [`icon`](/hu/docs/2/components/button#cssParts-icon), [`end-icon`](/hu/docs/2/components/button#cssParts-end-icon) part-ok segítségével módosítja a szöveg, a bal és jobb oldali ikonok színét: ```html Gomb ``` A komponensek shadow DOM elemeinek szerkezetét és alapértelmezett stílusait a böngésző fejlesztői eszközeinek megnyitásával tekintheti meg. A CSS Part használata előtt érdemes eldöntenie, hogy a globális CSS egyéni tulajdonságok és a komponensspecifikus CSS egyéni tulajdonságok használata kielégíti-e az igényeit. Ha igen, akkor előnyben kell részesítenie a CSS egyéni tulajdonságok használatát a stílusok testreszabásához. Az egyes komponensek dokumentációs oldalain megtekintheti a komponensek által közzétett összes `part` attribútumot. ## Komponens frissítési mechanizmusa {#update-mechanism} Az mdui komponensek a [Lit](https://lit.dev/)-re épülnek. A Lit egy könnyűsúlyú könyvtár, amely megkönnyíti a Web Components fejlesztését. Az mdui komponensek használatakor fontos megértenie a renderelési és frissítési mechanizmusukat. Amikor módosítja egy mdui komponens tulajdonságát, a komponens újrarenderelődik. Ez az újrarenderelési folyamat azonban nem szinkron módon történik. Amikor egyszerre több tulajdonság értékét módosítja, a Lit gyorsítótárazza ezeket a változásokat a következő frissítési ciklusig, hogy biztosítsa, függetlenül attól, hogy hányszor módosította a tulajdonságokat, minden komponens csak egyszer renderelődik újra. Emellett csak a shadow DOM-ban megváltozott részek renderelődnek újra. Az alábbi példában a gomb `disabled` JavaScript tulajdonságát `true` értékre állítjuk, majd azonnal lekérdezzük a HTML attribútumát. Mivel azonban a komponens még nem renderelődött újra, a lekérdezett HTML attribútum értéke továbbra is `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Ha meg szeretné várni, amíg egy tulajdonság értékváltozása utáni újrarenderelés befejeződik, használhatja a komponens `updateComplete` tulajdonságát. Ez a tulajdonság egy Promise-t ad vissza, amely a Promise feloldódása után jelzi, hogy a komponens újrarenderelése befejeződött: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # TypeScript támogatás Az mdui-t TypeScript-ben fejlesztették, ezért jó támogatást nyújt a TypeScript számára. Az összes hivatalos mdui könyvtár tartalmazza a típusdeklarációs fájlokat, így közvetlenül használhatók. ## Komponensek példány típusa {#instance} Néha előfordulhat, hogy egy JavaScript változót mdui komponens példányként kell megadnia. Ilyenkor közvetlenül az mdui-ból importálhatja a megfelelő komponens típust. Például a Tooltip komponens típusának importálása a komponens fájljából: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Vagy közvetlenül az mdui-ból: ```ts import type { Tooltip } from 'mdui'; ``` Ezután egy JavaScript változót Tooltip típusúként adhat meg: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Ekkor az IDE automatikusan javasolja a `tooltip` változó tulajdonságait és metódusait. Ha eseményfigyelőt ad hozzá a `tooltip` változóhoz, az IDE automatikusan javasolja az eseményneveket, eseménytípusokat és a visszahívási függvényben a `this` irányát: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Esemény típusok {#event} Minden komponens exportál egy interfészt, amely leképezi a komponens eseményneveit és a hozzájuk tartozó eseményobjektum típusokat. Az interfész neve `${komponensNév}EventMap`. Például a Tooltip komponens exportál egy `TooltipEventMap` nevű interfészt: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Ezt az interfészt importálhatja a komponens fájljából: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Vagy közvetlenül az mdui-ból: ```ts import type { TooltipEventMap } from 'mdui'; ``` Vegye figyelembe, hogy ez az interfész csak a komponensspecifikus eseményeket tartalmazza, de az mdui komponensek öröklődnek a `HTMLElement`-ből, így támogatják a `HTMLElement` eseményeit is. A metszettípus segítségével lekérheti a komponens összes eseménytípusát: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # IDE támogatás Az mdui kifejezetten optimalizált a VS Code-hoz és a WebStorm-hoz, így ezekben az IDE-kben kódkiegészítés, lebegő súgó és egyéb funkciók érhetők el. ## VS Code {#vscode} ### npm-mel telepített mdui {#vscode-npm} Ha npm-en keresztül telepítette az mdui-t, az alábbi lépésekkel engedélyezheti a VS Code IDE támogatást az aktuális projektben: 1. Hozzon létre egy `.vscode` könyvtárat a projekt gyökérkönyvtárában. 2. Hozzon létre egy `settings.json` fájlt a `.vscode` könyvtárban. 3. Adja hozzá a következő kódot a `settings.json` fájlhoz: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Ha a `settings.json` fájl már létezik, csak adja hozzá a fenti két sort a JSON dokumentum gyökércsomópontjához. A módosítások után indítsa újra a VS Code-ot. ### CDN-ről használt mdui {#vscode-cdn} Ha CDN-en keresztül használja az mdui-t, az mdui VS Code kiterjesztés telepítésével kaphat IDE támogatást. Keressen rá az `mdui` kifejezésre a VS Code bővítményboltjában, válassza ki az első találatot a telepítéshez, vagy [kattintson ide a telepítéshez](vscode:extension/zdhxiong.mdui). A telepítés után minden projektben engedélyezve lesz az mdui IDE támogatás. Javasoljuk, hogy először npm-en keresztül telepítse és állítsa be a `settings.json` fájlt, ahelyett, hogy a VS Code kiterjesztést telepítené, hogy az IDE támogatás az aktuálisan használt mdui verzióval összhangban legyen. ## WebStorm {#webstorm} ### npm-mel telepített mdui {#webstorm-npm} Ha npm-en keresztül telepítette az mdui-t, az alábbi lépésekkel engedélyezheti a WebStorm IDE támogatást az aktuális projektben: 1. Adja hozzá a következő kódot a projekt gyökérkönyvtárában lévő `package.json` fájl gyökércsomópontjához: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Ha a `package.json` fájl gyökércsomópontjában már létezik a `web-types` tulajdonság, csak adja hozzá a `./node_modules/mdui/web-types.en.json` értéket a `web-types` tömbhöz. A módosítások után indítsa újra a WebStorm-ot. ### CDN-ről használt mdui {#webstorm-cdn} Ha CDN-en keresztül használja az mdui-t, az mdui WebStorm bővítmény telepítésével kaphat IDE támogatást. Keressen rá az `mdui` kifejezésre a WebStorm bővítményboltjában, válassza ki az első találatot a telepítéshez. A telepítés után minden projektben engedélyezve lesz az mdui IDE támogatás. Javasoljuk, hogy először npm-en keresztül telepítse az IDE támogatáshoz, ahelyett, hogy a WebStorm bővítményt telepítené, hogy az IDE támogatás az aktuálisan használt mdui verzióval összhangban legyen. ## A VS Code és WebStorm támogatás közötti különbségek {#difference} Az mdui támogatása között a VS Code és a WebStorm esetében vannak eltérések. Az alábbi táblázat részletesen ismerteti a különbségeket: | A kódkiegészítéssel és lebegő súgóval rendelkező helyek | VS Code | WebStorm | | ------------------------------------------------------------ | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | HTML címkék neve | | | | HTML címkékben lévő attribútumok neve | | | | HTML címkékben lévő attribútumok értékeinek felsorolása | | (nem támogatja az értékekhez tartozó megjegyzések megjelenítését) | | HTML címkékben lévő események neve | | | | HTML-ben a slot `name` attribútumának értéke | | | | CSS-ben a `::part()` szelektor `part` attribútumának neve | | | | CSS-ben a komponenseken belüli CSS egyéni tulajdonságok neve | | | | CSS-ben a globális CSS egyéni tulajdonságok neve | | | | CSS-ben a globális class nevek | | | # Lokalizáció Az mdui alapértelmezés szerint angolul használja a belső szövegeket. Ha más nyelvet szeretne használni, többnyelvű konfigurációt kell végeznie. ## Használat {#usage} Az mdui három függvényt biztosít a többnyelvűség megvalósításához: - [`loadLocale`](/hu/docs/2/functions/loadLocale): Nyelvi csomagok betöltése. A paraméter egy függvény, amely egy nyelvkódot fogad, és egy Promise-t ad vissza. Amikor a nyelvi csomag betöltése befejeződött, a Promise feloldódik a megfelelő nyelvi csomaggal. Kérjük, a projekt belépési fájljában hívja meg ezt a függvényt. - [`setLocale`](/hu/docs/2/functions/setLocale): Átvált a megadott nyelvre. A paraméter az új nyelvkód, visszatérési értéke egy Promise, amely az új nyelvi csomag betöltése után oldódik fel. - [`getLocale`](/hu/docs/2/functions/getLocale): Lekéri az aktuális nyelvkódot. Példa: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // A projekt belépési fájljában hívja meg a loadLocale-t a nyelvi csomagok betöltéséhez loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Ha nyelvet kell váltania, hívja meg ezt a függvényt. A Promise feloldódása után a nyelvváltás sikeres setLocale('zh-cn').then(() => { // A getLocale meghívásával lekérheti az aktuális nyelvkódot console.log(getLocale()); // zh-cn }); ``` ## Állapotesemények {#event} A nyelvváltás kezdetekor, befejezésekor és hibájakor a `mdui-localize-status` esemény aktiválódik a `window`-on. Figyelheti ezt az eseményt egyéni műveletek végrehajtásához, például a nyelvkód cookie-ba írásához a sikeres nyelvváltás után. Az esemény `detail.status` tulajdonsága azt írja le, hogy milyen állapotváltozás történt. Lehetséges értékek: `loading`, `ready`, `error`:
detail.status Leírás
loading

Megkezdődött az új nyelvi csomag betöltése.

A detail objektum a következőket tartalmazza:

  • loadingLocale: az újonnan betöltendő nyelv nyelvkódja.
ready

Az új nyelvi csomag sikeresen betöltődött.

A detail objektum a következőket tartalmazza:

  • readyLocale: az újonnan betöltött nyelv nyelvkódja.
error

Az új nyelvi csomag betöltése sikertelen.

A detail objektum a következőket tartalmazza:

  • errorLocale: a sikertelenül betöltött nyelv nyelvkódja.
  • errorMessage: a sikertelen betöltés hibaüzenete.
Példa: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Megkezdődött az új nyelvi csomag betöltése: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log( `Az új nyelvi csomag ${event.detail.readyLocale} sikeresen betöltődött`, ); } else if (event.detail.status === 'error') { console.error( `Az új nyelvi csomag ${event.detail.errorLocale} betöltése sikertelen: ${event.detail.errorMessage}`, ); } }); ``` ## Nyelvi csomag betöltési módok {#load-locale} ### Lusta betöltés {#lazy-load} A [dinamikus import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) használatával a megfelelő nyelvre váltáskor töltődik le a nyelvi csomag. Ez a leginkább ajánlott módszer. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Előtöltés {#pre-load} Az oldal betöltésekor előre letölti az összes szükséges nyelvi csomagot. Így nyelvváltáskor nem kell újra letölteni, ami gyorsabb nyelvváltást tesz lehetővé. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Statikus import {#static-imports} Ezzel a módszerrel az összes szükséges nyelvi csomagot a projektkódjával egy fájlba csomagolhatja, így nem kell külön letöltenie a nyelvi csomagokat. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Nyelvi csomagok betöltése CDN-ről {#cdn} Ha CDN-en keresztül használja az mdui-t, közvetlenül CDN-ről töltheti be a nyelvi csomagokat. Példa: ```html ``` ## Támogatott nyelvek {#languages} Jelenleg az mdui a következő nyelveket támogatja: | Nyelv | Nyelvkód | | ----------------------------- | -------- | | arab | ar-eg | | azerbajdzsáni | az-az | | bolgár | bg-bg | | bengáli (Banglades) | bn-bd | | belarusz | be-by | | katalán | ca-es | | cseh | cs-cz | | dán | da-dk | | német | de-de | | görög | el-gr | | angol | en-gb | | angol (amerikai) | en-us | | spanyol | es-es | | észt | et-ee | | perzsa | fa-ir | | finn | fi-fi | | francia (belgiumi) | fr-be | | francia (kanadai) | fr-ca | | francia (franciaországi) | fr-fr | | ír | ga-ie | | galíciai (spanyol) | gl-es | | héber | he-il | | hindi | hi-in | | horvát | hr-hr | | magyar | hu-hu | | örmény | hy-am | | indonéz | id-id | | olasz | it-it | | izlandi | is-is | | japán | ja-jp | | grúz | ka-ge | | khmer | km-kh | | északi kurd | kmr-iq | | kannada | kn-in | | kazah | kk-kz | | koreai | ko-kr | | litván | lt-lt | | lett | lv-lv | | macedón | mk-mk | | malajálam | ml-in | | mongol | mn-mn | | maláj (malajziai) | ms-my | | norvég | nb-no | | nepáli | ne-np | | holland (belgiumi) | nl-be | | holland | nl-nl | | lengyel | pl-pl | | portugál (brazíliai) | pt-br | | portugál | pt-pt | | román | ro-ro | | orosz | ru-ru | | szlovák | sk-sk | | szerb | sr-rs | | szlovén | sl-si | | svéd | sv-se | | tamil | ta-in | | thai | th-th | | török | tr-tr | | urdu (pakisztáni) | ur-pk | | ukrán | uk-ua | | vietnami | vi-vn | | kínai (egyszerűsített) | zh-cn | | kínai (hagyományos, Hongkong) | zh-hk | | kínai (hagyományos, Tajvan) | zh-tw | ## Új fordítás beküldése {#contribute} Új fordítás hozzáadásához vagy a meglévő fordítások javításához kérjük, nyisson egy Pull Request-et a Github-on. A nyelvi csomagok a [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff) címen találhatók, közvetlenül a Github-on szerkesztheti őket. # Gyakori kérdések Az alábbiakban összegyűjtöttük az mdui közösségben gyakran felmerülő kérdéseket és a hivatalos válaszokat. Mielőtt kérdést tesz fel, érdemes átnézni, hogy van-e hasonló probléma. ## Miért nem jelenik meg a komponens önzáró címke használatakor? {#no-self-closing} Az mdui a Web Components technológiára épülő komponenskönyvtár. A Web Components specifikáció nem támogatja az önzáró címkéket, ezért kérjük, hogy az mdui komponensekhez mindig adjon hozzá záró címkét. ```html ``` ## Hogyan rejthetem el a komponenseket a betöltésük befejeződéséig? {#waiting-load} Mivel az mdui komponensek JavaScript segítségével regisztrálódnak, a js fájlok betöltése és a komponensek regisztrálása előtt a komponensek átmenetileg stílus nélkül jelenhetnek meg. A következő két módszerrel oldható meg ez a probléma: Az egyik módszer a CSS [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:defined) pszeudoosztálya segítségével elrejteni a nem regisztrált mdui komponenseket. Az alábbi CSS kód elrejti az összes nem regisztrált mdui komponenst, és a regisztráció befejeződése után azonnal megjeleníti őket: ```css :not(:defined) { visibility: hidden; } ``` A másik módszer a JavaScript [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) metódusának használata. Ez a metódus egy promise-t ad vissza, amely akkor oldódik fel, amikor a megadott komponens regisztrálása befejeződött. Annak érdekében, hogy kezelni tudja azokat az eseteket, amikor egyes komponensek speciális okok miatt nem tölthetők be, használhatja a [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) metódust is. Az alábbi példa először a `opacity: 0` stílussal elrejti a `` elemet, majd a komponensek regisztrálása után az oldal fokozatosan megjelenik. A példa a `Promise.allSettled()` használatával várja meg az összes promise befejeződését, biztosítva, hogy még ha valamelyik komponens nem is tölthető be, az oldal normálisan jelenjen meg: ```html ``` # LLMs.txt Az mdui a nagy nyelvi modellek (LLM-ek) számára `llms.txt` és `llms-full.txt` fájlokat biztosít, hogy pontos, idézhető kontextust adjon, és ezzel segítse az AI-t az mdui-val kapcsolatos kérdések megbízható megválaszolásában. ## A llms.txt használata kontextusként AI számára {#context} Két belépési pont: - `llms.txt`: https://www.mdui.org/hu/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/hu/docs/2/llms-full.txt Az `llms.txt` egy tömör index, amely alkalmas olyan modellek számára, amelyek képesek internetre csatlakozni, hogy a hivatkozások alapján lekérjék a szükséges Markdown-oldalakat, vagy először áttekintést adjanak a projektről. Az `llms-full.txt` teljes kontextust tartalmaz, beleértve az `llms.txt` összes oldalának tartalmát, és akkor használható, ha a modell nem képes internetre csatlakozni, vagy ha egyszerre kell biztosítani a teljes kontextust. ## A dokumentáció Markdown-verziója {#md-mirror} Minden dokumentációs oldalhoz tartozik egy megfelelő Markdown-verzió: az `.md` végződés hozzáadásával az oldal URL-jéhez (a kezdőlaphoz `index.md` hozzáadásával). Például: https://www.mdui.org/hu/docs/2/components/button → https://www.mdui.org/hu/docs/2/components/button.md https://www.mdui.org/hu/docs/2/ → https://www.mdui.org/hu/docs/2/index.md Ezt a Markdown hivatkozást vagy annak egyszerű szövegét közvetlenül is használhatja kontextusként, hogy pontosabb és fókuszáltabb válaszokat kapjon. ## Hogyan használjuk ChatGPT-ben, Claude-ban és más LLM-ekben {#how-to-use} Attól függően, hogy a modell támogatja-e az internet-hozzáférést/fájlfeltöltést, válassza az alábbi lehetőségek egyikét vagy kombinációját: 1. Közvetlen beillesztés: Illessze be az `llms-full.txt` tartalmát rendszerüzenetként vagy első üzenetként. Példa: „Az alábbiakban az mdui kontextusa található. Kérjük, szigorúan erre támaszkodva válaszoljon a későbbi kérdésekre; ellentmondás esetén ez a kontextus az irányadó:\n\n[llms-full.txt tartalmának beillesztése]”. 2. Fájlfeltöltés: Töltse fel az `llms-full.txt` (vagy `llms.txt`) fájlt, és az első üzenetben jelezze: „A mellékletet tekintse elsődleges kontextusnak”. Példa: „A mellékelt mdui dokumentáció alapján mutassa be a `` használatát és gyakori buktatóit”. 3. Online olvasás: Adja meg az `llms.txt` vagy `llms-full.txt` hivatkozását a párbeszédben. Példa: „Kérjük, olvassa be és kövesse a https://www.mdui.org/hu/docs/2/llms-full.txt fájlt kontextusként, és válaszoljon az mdui-val kapcsolatos kérdéseimre". 4. Konkrét oldal megadása: Ha csak egy adott komponensről/függvényről van szó, adja meg közvetlenül az oldal Markdown címét. Példa: „Kérjük, olvassa el a https://www.mdui.org/hu/docs/2/components/button.md fájlt, és az alapján adjon meg három bevált gyakorlatot". **Tipp**: Kattintson az oldal jobb felső sarkában található ikonra, amellyel egy kattintással másolhatja a fenti hivatkozásokat, megnyithatja az aktuális oldal Markdown-verzióját, vagy megnyithatja az aktuális oldalt vagy az `llms-full.txt` fájlt kontextusként a ChatGPT-ben. # MCP-szerver Az mdui egy dedikált [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) szervert biztosít `@mdui/mcp` néven, amely helyben teszi lehetővé az AI-ügynökök számára a komponensek, ikonok, CSS egyéni tulajdonságok és dokumentáció lekérdezését. Együttműködik olyan fejlesztőeszközökkel, mint a Claude Code, a Cursor és a GitHub Copilot, hogy segítse a kódgenerálást, valamint az mdui komponensek és stílusok hatékonyabb használatát. ## Eszközök {#tools} Az mdui MCP-szerver a következő eszközöket teszi elérhetővé az AI-ügynökök számára: - `list_components`: Kilistázza az összes mdui komponenst. - `get_component_metadata`: Lekéri egy adott komponens részletes API-metaadatait. - `list_css_classes`: Kilistázza a globális CSS osztályneveket. - `list_css_variables`: Kilistázza a globális CSS egyéni tulajdonságokat. - `list_documents`: Kilistázza az összes dokumentumot. - `get_document`: Lekéri egy adott dokumentum teljes tartalmát. - `list_icon_codes`: Kilistázza az attribútumokban vagy API-kban használható ikonkódokat. - `list_icon_components`: Kilistázza az önálló ikonkomponenseket és azok ESM importálási módját. ## Használat {#usage} Az MCP-szerver csak [stdio átvitelt](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) támogat, így közvetlenül használható olyan kliensekben, mint a VS Code, Cursor, Claude Code, Windsurf, Zed, valamint minden stdio protokollt támogató AI-ügynökben. ### VS Code {#vscode} > Győződjön meg róla, hogy telepítve van a [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) és a [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) kiterjesztés. 1. Hozzon létre egy `.vscode/mcp.json` fájlt a projekt gyökérkönyvtárában az alábbi tartalommal: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Kattintson az „Indítás” gombra az `mcp.json` fájlban. 3. Kezdjen beszélgetést a GitHub Copilot Chatben. ### Cursor {#cursor} 1. Hozzon létre vagy szerkesszen egy `.cursor/mcp.json` fájlt a projekt gyökérkönyvtárában az alábbi tartalommal: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Lépjen a Beállítások > Cursor Beállítások > MCP és Integrációk menüpontba, és engedélyezze az mdui szervert. 3. Kezdjen beszélgetést a Cursor Chatben. ### Claude Code {#claude-code} 1. Futtassa a következő parancsot a terminálban az mdui MCP-szerver hozzáadásához: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Ezután futtassa a `claude` parancsot a munkamenet elindításához. 3. Adja meg a kérését a használat megkezdéséhez. ### Windsurf {#windsurf} 1. Lépjen a Beállítások > Windsurf Beállítások > Cascade menüpontba. 2. Kattintson az „MCP-k kezelése”, majd a „Nyers konfiguráció megtekintése” gombra, és adja hozzá ezt a konfigurációs fájlhoz: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Ha az MCP-szerver nem jelenik meg automatikusan, kattintson a Frissítés gombra a lista frissítéséhez. 3. Adja meg a kérését a beszélgetés megkezdéséhez. ### Zed {#zed} 1. Nyissa meg a Beállítások > Beállítások megnyitása menüpontot, és adja hozzá a következő konfigurációt a `settings.json` fájlhoz: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Adja meg a kérését a használat megkezdéséhez. ### Egyéni MCP kliens {#custom} Ha egyéni MCP-klienst használ helyileg vagy fejlesztői környezetben, adja hozzá a szervert a kliens konfigurációs fájljához. Például: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Sötét mód Az mdui összes komponense támogatja a sötét módot, és a téma az operációs rendszer beállításaihoz igazodva automatikusan is váltható. Bármikor kattinthat a dokumentációs oldal jobb felső sarkában található ikonra a téma váltásához, hogy megnézze az egyes komponensek megjelenését a különböző témákban. A sötét mód használatához csak adja hozzá a `mdui-theme-dark` osztályt a `` címkéhez: ```html ``` Ha azt szeretné, hogy a téma automatikusan kövesse az operációs rendszer beállításait, adja hozzá a `mdui-theme-auto` osztályt a `` címkéhez: ```html ``` Az oldal különböző részein különböző témákat is használhat. Például az alábbi példában a ``-en sötét mód van beállítva, de az oldal egy `
`-jéhez hozzáadta a `mdui-theme-light` osztályt, így az abban a div-ben lévő elemek világos módban jelennek meg, míg az oldal többi része sötét módban: ```html
``` A CSS osztályok közvetlen hozzáadása mellett az mdui két függvényt is biztosít a téma kényelmesebb kezeléséhez: - [`getTheme`](/hu/docs/2/functions/getTheme): lekéri az aktuális oldal vagy a megadott elem témáját. - [`setTheme`](/hu/docs/2/functions/setTheme): beállítja az aktuális oldal vagy a megadott elem témáját. --- Fontos megjegyezni, hogy az mdui a `:root`, valamint a `.mdui-theme-light`, `.mdui-theme-dark` és `.mdui-theme-auto` szelektorokon beállítja a `color` és `background-color` stílusokat. Ha nem tetszenek ezek az alapértelmezett stílusok, saját maga felülírhatja őket. Az alábbi példa a világos módban az oldal hátterét tiszta fehérre, a szöveget tiszta feketére állítja; a sötét módban az oldal hátterét tiszta feketére, a szöveget tiszta fehérre állítja: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Dinamikus szín A mdui dinamikus szín funkciót biztosít. Csak meg kell adnia egy színértéket, és az mdui automatikusan generál egy teljes színsémát. Emellett az mdui támogatja a megadott háttérképből származó alapszín kinyerését és az alapján történő színséma-generálást is. Bármikor kattinthat a dokumentációs oldal jobb felső sarkában található ikonra a színséma váltásához, hogy megnézze az egyes komponensek megjelenését a különböző színsémákban. Egy színséma egy CSS egyéni tulajdonságcsoport. Az mdui komponensek színértékei erre a CSS egyéni tulajdonságcsoportra hivatkoznak, így egyszerre frissítheti az összes komponens színsémáját. A teljes CSS egyéni tulajdonságlista a [Design token - Színek](/hu/docs/2/styles/design-tokens#color) oldalon tekinthető meg. ## Színséma generálása {#color-scheme} A [`setColorScheme`](/hu/docs/2/functions/setColorScheme) függvény segítségével generálhat színsémát. Ez a függvény egy hexadecimális színértéket fogad paraméterként, generál egy színsémát, és beállítja azt az oldal `` elemén. Például: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // A #0061a4 alapján generál egy színsémát, és beállítja a elemet erre a színsémára setColorScheme('#0061a4'); ``` A második paraméterben megadhatja a `target` tulajdonságot, amely megadja, hogy melyik elemen állítsa be a színsémát. Például: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // A #0061a4 alapján generál egy színsémát, és beállítja a .foo elemet erre a színsémára setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Alapértelmezés szerint a generált színséma csak a [Design token - Színek](/hu/docs/2/styles/design-tokens#color) oldalon felsorolt színeket tartalmazza. A második paraméterben megadhatja a `customColors` tulajdonságot, amely alapján az mdui a megadott egyéni színnevek és színértékek alapján generál egyéni színcsoportokat. Például: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // A #0061a4 alapján generál egy színsémát, módosítja a meglévő error színcsoport értékét, és hozzáad egy új music színcsoportot setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Egy egyéni színcsoport négy CSS egyéni tulajdonságot tartalmaz: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` A `{name}` a `customColors`-ban megadott `name` mező értéke, vagyis az egyéni szín neve. Az egyéni színnév lehet a meglévő színsémában már szereplő színnév, például `primary`, `secondary`, `tertiary`, `error` ilyenek. Ha ezeket a színneveket adja meg egyéni színnévként, akkor a generált színsémában a megfelelő négy CSS egyéni tulajdonság az Ön által megadott színérték alapján generálódik. Például a fenti példában a `error` nevű egyéni színnevet adta meg. Mivel az `error` már létezik a meglévő színsémában, és a hozzá tartozó CSS egyéni tulajdonságokat az mdui komponensek a hibaállapot megjelenítésére használják, mivel a színértéket zöldre állította, az mdui komponensek hibaállapota is zöldre változik. Az egyéni színnév lehet újonnan hozzáadott is, például a fenti példában szereplő `music`, amely nem létezik a meglévő színsémában. Ekkor a generált színséma további négy CSS egyéni tulajdonságot tartalmaz. A saját stílusaiban hivatkozhat ezekre a CSS egyéni tulajdonságokra: ```html
Zene
Zene konténer
``` A [`removeColorScheme`](/hu/docs/2/functions/removeColorScheme) függvény segítségével eltávolíthatja a fenti módszerrel generált színsémát. Paraméterben megadhatja, hogy melyik elemről távolítsa el a színsémát. Alapértelmezés szerint a `` elem színsémáját távolítja el. ## Szín kinyerése háttérképből {#from-wallpaper} Az mdui biztosítja a [`getColorFromImage`](/hu/docs/2/functions/getColorFromImage) függvényt, amellyel egy adott `Image` példányból kinyerheti az alapszínt. Ez a függvény egy Promise-t ad vissza, amelynek feloldási értéke a kinyert hexadecimális színérték. Ezt a függvénytől kapott színértéket felhasználva meghívhatja a fent említett [`setColorScheme`](/hu/docs/2/functions/setColorScheme) függvényt a színséma beállításához. Például: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Tipográfia Az mdui a `mdui-prose` és `mdui-table` CSS-osztályokat is biztosítja, amelyek a cikkek és táblázatok megjelenítését optimalizálják. ## Szövegek stílusa {#prose} Adja a cikk szülőeleméhez a `mdui-prose` osztályt, így a teljes tartalom megjelenése optimalizálható, beleértve a cikkben található `` elemek stílusát is. Például : ```html

Cím

Szöveges tartalom

``` ## Táblázatok stílusa {#table} A `` elemre helyezett `mdui-table` osztállyal optimalizálhatja a táblázat megjelenését. Például : ```html
``` Ha azt szeretné, hogy a táblázat a szülőelemen belül vízszintesen görgethető legyen, adja hozzá a `mdui-table` osztályt a `` elem szülőeleméhez. Például : ```html
``` # Design token A design token egy olyan stratégia a design rendszerek kezelésére. A design rendszer összes újrafelhasználható elemét (például színek, betűtípusok, terek stb.) független változókká absztrahálja, hogy egységes kezelést és alkalmazást tegyen lehetővé a teljes design rendszerben. Az mdui globális CSS egyéni tulajdonságokat használ a design token megvalósításához. Ez azt jelenti, hogy a CSS egyéni tulajdonságok módosításával globálisan módosíthatja az összes mdui komponens stílusát. Ugyanakkor a saját fejlesztésű stílusaihoz is javasolt előnyben részesíteni a CSS egyéni tulajdonságok hivatkozását, hogy biztosítsa a stílusok egységességét az mdui komponensekkel. Emellett a dinamikus szín módosításakor a saját stílusai is szinkronban frissülhetnek. ## Színek {#color} Az mdui a világos módhoz és a sötét módhoz külön-külön CSS egyéni tulajdonságcsoportokat biztosít. Világos módban a CSS egyéni tulajdonság neve `--mdui-color-{name}-light`, ahol `{name}` a szín neve; sötét módban `--mdui-color-{name}-dark`. Ezenkívül az mdui biztosít egy `--mdui-color-{name}` nevű CSS egyéni tulajdonságcsoportot is. Ez a tulajdonság világos módban a `--mdui-color-{name}-light` értékére hivatkozik, sötét módban pedig a `--mdui-color-{name}-dark` értékére, így automatikusan vált az aktuális világos és sötét mód szerint. Ha módosítania kell egyes színek CSS egyéni tulajdonságait, egyszerre kell módosítania a `--mdui-color-{name}-light` és a `--mdui-color-{name}-dark` tulajdonságokat. A CSS egyéni tulajdonságok beolvasásához pedig közvetlenül használja a `--mdui-color-{name}` tulajdonságot. A CSS egyéni tulajdonságok értéke a három RGB-szín vesszővel elválasztva. Az alábbi példa bemutatja a színek CSS egyéni tulajdonságainak használatát: ```css /* A primary szín értékének módosítása */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* A .foo elem háttérszínének beállítása primary-re */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* A .bar elem háttérszínének beállítása 0,8 átlátszatlanságú primary-re */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Ha teljesen új színsémát szeretne létrehozni, javasoljuk a [`setColorScheme`](/hu/docs/2/functions/setColorScheme) függvény használatát, amely egy adott színérték alapján generál egy teljes színsémát.
Szín név CSS egyéni tulajdonság Alapértelmezett érték Példa
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Lekerekítések {#shape-corner} Az mdui 7 különböző méretű lekerekítést biztosít. Az alábbi példa bemutatja a lekerekítések CSS egyéni tulajdonságainak használatát: ```css /* Az extra-small lekerekítés méretének módosítása */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* A .foo elem lekerekítésének beállítása extra-small értékre */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS egyéni tulajdonság | Alapértelmezett érték | Példa | | --------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Tipográfia {#typescale} Az mdui 15 különböző szövegtípust biztosít, beleértve a Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small kategóriákat. Az alábbiakban egy használati példa látható: ```css /* A Body large szövegtípus módosítása */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* A .foo elem szövegtípusának beállítása Body large-re */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS egyéni tulajdonság Alapértelmezett érték Példa
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Állapotréteg átlátszatlansága {#state-layer} Egyes mdui komponensek interakció során egy áttetsző réteget adnak hozzájuk. Például a [``](/hu/docs/2/components/button) komponens egér fölé helyezésekor, fókuszáláskor, lenyomáskor vagy húzáskor áttetsző réteg jelenik meg. A CSS egyéni tulajdonságok módosításával állíthatja be ezen rétegek átlátszatlanságát. Az alábbiakban egy használati példa látható: ```css /* Az állapotréteg átlátszatlanságának módosítása */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS egyéni tulajdonság | Alapértelmezett érték | Példa | | ---------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Emelési magasság (árnyék) {#elevation} Egyes mdui komponensek árnyékhatással rendelkeznek, hogy az oldalon való emelkedés érzetét keltsék. A CSS egyéni tulajdonságok módosításával állíthatja be a komponensek árnyékhatását. Az alábbiakban egy használati példa látható: ```css /* A level1 szintű árnyék módosítása */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* A .foo elem árnyékának beállítása level1-re */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS egyéni tulajdonság | Alapértelmezett érték | Példa | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animáció {#motion} Az mdui komponensekben az animációkhoz használt simítási görbék és időtartamok CSS egyéni tulajdonságokkal konfigurálhatók. Az alábbiakban egy használati példa látható: ```css /* A standard simítási görbe és a short1 időtartam módosítása */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* A .foo elem átmenetének beállítása a standard simítási görbével és a short1 időtartammal */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Típus CSS egyéni tulajdonság Alapértelmezett érték
Simítási görbe --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Időtartam --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Reszponzív töréspontok {#breakpoint} Az mdui számos reszponzív töréspontot biztosít, amelyek CSS egyéni tulajdonságokkal konfigurálhatók. Az alábbiakban egy használati példa látható: ```css /* A sm töréspont értékének módosítása */ :root { --mdui-breakpoint-sm: 560px; } ``` Fontos megjegyezni, hogy ezek a CSS egyéni tulajdonságok nem használhatók CSS médialekérdezésekben. Az alábbiakban egy helytelen példa látható: ```css /* Helytelen használat. A médialekérdezésben nem használhatók CSS egyéni tulajdonságok */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Ha JavaScript-ben szeretne töréspont-ellenőrzést végezni, használhatja a [`breakpoint`](/hu/docs/2/functions/breakpoint) függvényt. | CSS egyéni tulajdonság | Alapértelmezett érték | | ----------------------- | --------------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integráció Reacttal Az mdui Reactban való használatához csak kövesse a [telepítés](/hu/docs/2/getting-started/installation#npm) oldal útmutatását a telepítéshez. ## Figyelmeztetések {#notes} Az mdui Reactban való használatakor bizonyos korlátokba ütközhet. Ezek a korlátok a Web Components Reactban való használatának általános korlátai, nem pedig az mdui komponenskönyvtár korlátai. ### Eseménykötés {#event-binding} Mivel a React nem támogatja az egyéni eseményeket, az mdui komponensek által biztosított események használatához először a `ref` attribútummal kell megszereznie a komponens hivatkozását. Az alábbiakban egy példa látható az mdui komponensek eseményeinek Reactban való használatára: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('a kapcsoló állapota megváltozott'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### JSX TypeScript típusdeklaráció {#jsx-typescript} Ha TypeScript fájlban (.tsx) használja az mdui-t, hozzá kell adnia a TypeScript típusdeklarációkat. Kézzel kell importálnia az mdui típusdeklarációs fájlját a projekt .d.ts fájljában: ```ts /// ``` # Integráció Vue-val Az mdui Vue-ban való használatához először kövesse a [telepítés](/hu/docs/2/getting-started/installation#npm) oldal útmutatását a telepítéshez, majd végezzen el néhány szükséges konfigurációt. ## Konfiguráció {#configuration} Konfigurálnia kell a Vue-t, hogy ne az mdui komponenseket Vue komponensekként elemezze. A `vite.config` fájlban állítsa be a `compilerOptions.isCustomElement` opciót: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Minden mdui- előtaggal rendelkező címke mdui komponens isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` A konfiguráció részleteiről a [Vue hivatalos dokumentációjában](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) tájékozódhat. ## Figyelmeztetések {#notes} ### Kétirányú adatkötés {#data-binding} Az mdui komponenseken nem használhatja a `v-model`-t a kétirányú adatkötéshez. Kézzel kell kezelnie az adatok kötését és frissítését. Például: ```html ``` ### ESLint konfiguráció {#eslint} Ha az [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue)-t használja, adja hozzá a következő szabályt a `.eslintrc.js` fájlhoz: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integráció Angularral Az mdui Angularban való használatához először kövesse a [telepítés](/hu/docs/2/getting-started/installation#npm) oldal útmutatását a telepítéshez, majd végezzen el néhány szükséges konfigurációt. ## Konfiguráció {#configuration} Először engedélyeznünk kell a Web Components támogatást az Angularban. Az alábbiakban egy példa látható: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` A konfiguráció után az Angular komponens kódjában importálhatjuk és használhatjuk az mdui komponenseket: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Párbeszédablak tartalma
` }) export class DialogExampleComponent implements OnInit { // A #dialog elem referenciájának lekérése a @ViewChild segítségével @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Az mdui komponens elérése a nativeElement segítségével this.dialog?.nativeElement.open = true; } } ``` # Integráció más keretrendszerekkel Az mdui-t a böngésző által natívan támogatott Web Components segítségével fejlesztettük, így minden webes keretrendszerben használható. Az alábbiakban felsoroljuk az mdui gyakori keretrendszerekben való használatának módját. ## Aurelia {#Aurelia} Miután a [telepítés](/hu/docs/2/getting-started/installation#npm) oldal útmutatása szerint elvégezte a telepítést, telepítenie és konfigurálnia kell egy további csomagot (csak Aurelia 2 esetén): ```bash npm install aurelia-mdui --save ``` Majd regisztrálja azt az alkalmazásban: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Megjegyzés** Kérjük, a hibákat a [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) címre jelentse. ## WebCell {#WebCell} Az [WebCell](https://web-cell.dev/)-ben való használat során csak kövesse a [telepítés](/hu/docs/2/getting-started/installation#npm) oldal útmutatását a telepítéshez; a Web Components, a TypeScript és a JSX támogatás eleve elérhető. Vagy használhatja a [hivatalos GitHub sablon tárhelyet](https://github.com/EasyWebApp/WebCell-mobile) egy [új projekt egy kattintással történő létrehozásához](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Avatar komponens Az avatar felhasználók vagy tárgyak megjelenítésére szolgál, támogatja a különböző formákat, beleértve a képeket, ikonokat vagy karaktereket. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/avatar.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Kép avatar {#example-src} A `src` attribútummal egy képlinket adhat meg avatárként, vagy az alapértelmezett slotban egy `` elemet helyezhet el avatárként. ```html Példa kép avatarra ``` A `fit` attribútummal meghatározhatja, hogy a kép hogyan illeszkedjen a konténerbe, hasonlóan a natív [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) tulajdonsághoz. ### Ikon avatar {#example-icon} A Material Icons ikont avatarként az `icon` attribútummal adhatja meg, az alapértelmezett slotban pedig ikont helyezhet el. ```html ``` ### Karakter avatar {#example-char} Az alapértelmezett slotban tetszőleges szöveget használhat avatarként. ```html A ``` ## mdui-avatar API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
src src true string

Az avatar kép URL címe.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

A kép illesztési módja a konténeren belül, megegyezik az eredeti object-fit tulajdonsággal. A lehetséges értékek:

  • contain: Méretarány megtartása, a tartalom arányosan lesz átméretezve
  • cover: Méretarány megtartása, de a tartalom egy része levágásra kerülhet
  • fill: Alapértelmezett érték, nem tartja meg a méretarányt, a tartalom kitölti a teljes konténert
  • none: Eredeti méret megtartása, a tartalom nem lesz átméretezve vagy nyújtva
  • scale-down: Méretarány megtartása, a tartalom mérete a none vagy contain közül a kisebbik lesz
icon icon true string

Az avatar Material Icons ikonjának neve.
label label true string

Az avatar alternatív szöveges leírása.
### Slots
Név Leírás
(alapértelmezett)

Egyéni avatar tartalom, lehet betű, karakter, <img> elem, ikon stb.
### CSS Parts
Név Leírás
image

Ha képet használunk avatarként, a komponensen belüli <img> elem.
icon

Ha ikont használunk avatarként, a komponensen belüli <mdui-icon> elem.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Badge komponens A badge dinamikus információk, például számlálók vagy állapotjelzések megjelenítésére szolgál. Tartalmazhat szöveget vagy számokat. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/badge.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Példa: ```html 12 ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a badge alakját. Ha a `variant` értéke `large`, akkor egy nagy badge jelenik meg. Az alapértelmezett slotban megadhatja a megjelenítendő szöveget. ```html 99+ ``` ## mdui-badge API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'small' | 'large' 'large'

A jelvény alakja. A lehetséges értékek:

  • small: Kis méretű jelvény, szöveg megjelenítése nélkül
  • large: Nagy méretű jelvény, megjeleníti a szöveget
### Slots
Név Leírás
(alapértelmezett)

A jelvényben megjelenő szöveg.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Alsó alkalmazássáv komponens Az alsó alkalmazássáv elsősorban mobil nézetben szolgál navigációs elemek és egyéb fontos műveletek megjelenítésére az oldal alján. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/bottom-app-bar.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Példa: (Figyelem: a példában szereplő `style="position: relative"` csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.) ```html
``` **Figyelmeztetések:** A komponens alapértelmezés szerint `position: fixed` pozicionálást használ, és automatikusan `padding-bottom` stílust ad a `body` elemhez, hogy a tartalmat ne takarja el ez a komponens. Viszont a következő két esetben alapértelmezés szerint `position: absolute` pozicionálást használ: 1. Ha meg van adva a `scroll-target` attribútum. Ekkor a `padding-bottom` stílust a `scroll-target` elemre kell alkalmazni. 2. Ha a [``](/hu/docs/2/components/layout) komponensen belül található. Ekkor nem ad hozzá `padding-bottom` stílust. ## Példák {#examples} ### Megadott tárolóban való megjelenítés {#example-scroll-target} Alapértelmezés szerint az alsó alkalmazássáv az oldal alján jelenik meg. Ha azt szeretné, hogy az alsó alkalmazássáv egy megadott tárolóban jelenjen meg, adja meg a `scroll-target` attribútumot, amelynek értéke a görgethető tartalom tárolójának CSS-szelektora vagy DOM-eleme. Ekkor az alsó alkalmazássáv a szülőelemhez igazodva jelenik meg (a szülőelemen be kell állítani a `position: relative; overflow: hidden` stílust). ```html
Tartalom
``` ### Görgetéskor történő elrejtés {#example-scroll-behavior} A `scroll-behavior` attribútum `hide` értékre állításával az alsó alkalmazássáv az oldal lefelé görgetésekor elrejtődik, felfelé görgetésekor pedig megjelenik. A `scroll-threshold` attribútummal beállíthatja, hogy hány pixel görgetése után kezdődjön el az alsó alkalmazássáv elrejtése. ```html
Tartalom
``` ### Rögzített lebegő műveletgomb {#example-fab-detach} Ha az alsó alkalmazássáv [lebegő műveletgombot](/hu/docs/2/components/fab) tartalmaz, akkor hozzáadhatja a `fab-detach` attribútumot, amelynek hatására az oldal görgetésekor, amikor az alsó alkalmazássáv elrejtődik, a lebegő műveletgomb továbbra is az oldal jobb alsó sarkában marad. ```html
``` ## mdui-bottom-app-bar API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
hide hide true boolean false

Rejtett állapotban van-e.
fab-detach fabDetach true boolean false

Az alsó alkalmazássávban lévő <mdui-fab> komponens leváljon-e az alkalmazássávról. Ha true, akkor az alkalmazássáv elrejtése után a <mdui-fab> továbbra is látható marad az oldalon.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Görgetési viselkedés. Lehetséges értékek:

  • hide: Elrejtés görgetéskor.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Az elem, amelynek a görgetési eseményeit figyelni kell. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a window görgetési eseményeit figyeli.
scroll-threshold scrollThreshold true number

A görgetési művelet kiváltásához szükséges küszöbérték px-ben.
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Események
Név Leírás
show

A megjelenítés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a megjelenítés.
shown

A megjelenítési animáció befejezésekor aktiválódik az esemény.
hide

Az elrejtés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható az elrejtés.
hidden

Az elrejtési animáció befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

Az alsó alkalmazássávon belüli elemek.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Gomb komponens A gomb elsősorban műveletek végrehajtására szolgál, például e-mailek küldésére, dokumentumok megosztására vagy bejegyzések kedvelésére. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/button.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Button } from 'mdui/components/button.js'; ``` Példa: ```html Gomb ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a gomb változatát. ```html Kiemelt Kitöltött Tónusos Körvonalazott Szöveges ``` ### Teljes szélesség {#example-full-width} A `full-width` attribútummal a gomb a szülőelem teljes szélességét kitölti. ```html Gomb ``` ### Ikon {#example-icon} Az `icon` és `end-icon` attribútumokkal Material Icons ikonokat adhat a gomb elején és végén. Az `icon` és `end-icon` slotokban is megadhat elemeket a gomb elején és végén. ```html Ikon Slot ``` ### Link {#example-link} A `href` attribútummal a gomb linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html Link ``` ### Letiltott és betöltési állapot {#example-disabled} A `disabled` attribútummal letilthatja a gombot; a `loading` attribútum hozzáadásával betöltési állapotot adhat hozzá. ```html Letiltva Betöltés Betöltés és letiltva ``` ## mdui-button API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

A gomb variánsa. A lehetséges értékek:

  • elevated: Árnyékos gomb, olyan esetekben használatos, amikor a gombot vizuálisan el kell különíteni a háttértől
  • filled: Erős vizuális hatású, fontos folyamatok végső műveleteihez, mint pl. "Mentés", "Megerősítés" stb.
  • tonal: Vizuális hatása a filled és az outlined között van, közepes vagy magas prioritású műveletekhez, mint pl. "Következő" egy folyamatban
  • outlined: Keretes gomb, közepes prioritású, másodlagos műveletekhez, mint pl. "Vissza"
  • text: Szöveges gomb, a legalacsonyabb prioritású műveletekhez
full-width fullWidth true boolean false

Kitölti-e a szülőelem teljes szélességét.
icon icon true string

A bal oldali Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
end-icon endIcon true string

A jobb oldali Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
disabled disabled true boolean false

Letiltott állapotú-e.
loading loading true boolean false

Betöltési állapotban van-e.
name name true string ''

A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
value value true string ''

A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
type type true 'submit' | 'reset' | 'button' 'button'

A gomb típusa. Alapértelmezés szerint button. Lehetséges típusok:

  • submit: Az űrlap elküldése a szervernek
  • reset: Az űrlap összes mezőjének visszaállítása az alapértékre
  • button: Nincs alapértelmezett viselkedés

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
formaction formAction true string

Megadja az űrlap elküldéséhez használandó URL-t.

Ha ez az attribútum meg van adva, felülírja a <form> elem action attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:

  • application/x-www-form-urlencoded: Az alapértelmezett érték
  • multipart/form-data: Akkor használandó, ha az űrlap <input type="file"> elemet tartalmaz
  • text/plain: A HTML5-ben bevezetve, hibakereséshez használható

Ha ez az attribútum meg van adva, felülírja a <form> elem enctype attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formmethod formMethod true 'post' | 'get'

Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:

  • post: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre
  • get: Az űrlapadatok ? elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz

Ha ez az attribútum meg van adva, felülírja a <form> elem method attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formnovalidate formNoValidate true boolean false

Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt.

Ha ez az attribútum meg van adva, felülírja a <form> elem novalidate attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:

  • _self: Alapértelmezett opció, az aktuális keretben nyílik meg
  • _blank: Új ablakban nyílik meg
  • _parent: A szülő keretben nyílik meg
  • _top: A teljes ablakban nyílik meg

Ha ez az attribútum meg van adva, felülírja a <form> elem target attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A gomb szövege.
icon

A gomb bal oldali eleme.
end-icon

A gomb jobb oldali eleme.
### CSS Parts
Név Leírás
button

A belső <button> vagy <a> elem.
label

A gomb szövege.
icon

A gomb bal oldali ikonja.
end-icon

A gomb jobb oldali ikonja.
loading

A betöltési állapotot jelző <mdui-circular-progress> elem.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Ikon-gomb komponens Az ikon-gomb elsősorban másodlagos műveletek végrehajtására szolgál. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/button-icon.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Ikon {#example-icon} A Material Icons ikon nevét az `icon` attribútummal adhatja meg. Az alapértelmezett slotban is megadhat ikon elemet. ```html ``` ### Változat {#example-variant} Az ikon-gomb változata a `variant` attribútummal állítható be. ```html ``` ### Kijelölhető {#example-selectable} A `selectable` attribútummal az ikon-gomb kijelölhetővé tehető. ```html ``` A `selected-icon` attribútummal megadhatja a kijelölt állapothoz tartozó Material Icons ikon nevét. A `selected-icon` slotban is megadhatja a kijelölt állapot ikonját. ```html ``` Miután az ikon-gombot kijelölték, a `selected` attribútum értéke `true` lesz. A `selected` attribútummal az ikon-gomb alapértelmezés szerint kijelölt állapotú lehet. ```html ``` ### Link {#example-link} A `href` attribútummal az ikon-gomb linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html ``` ### Letiltott és betöltési állapot {#example-disabled} A `disabled` attribútummal letilthatja az ikon-gombot; a `loading` attribútum hozzáadásával betöltési állapotot adhat hozzá. ```html ``` ## mdui-button-icon API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Az ikon gomb variánsa. A lehetséges értékek:

  • standard: A legalacsonyabb prioritású műveletekhez
  • filled: Erős vizuális hatású, magas prioritású műveletekhez
  • tonal: Vizuális hatása a filled és az outlined között van, közepes vagy magas prioritású műveletekhez
  • outlined: Közepes prioritású műveletekhez
icon icon true string

A Material Icons ikon neve. Beállítható az alapértelmezett slot-on keresztül is.
selected-icon selectedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="selected-icon" segítségével is.
selectable selectable true boolean false

Kiválasztható-e.
selected selected true boolean false

Ki van-e választva.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
disabled disabled true boolean false

Letiltott állapotú-e.
loading loading true boolean false

Betöltési állapotban van-e.
name name true string ''

A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
value value true string ''

A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
type type true 'submit' | 'reset' | 'button' 'button'

A gomb típusa. Alapértelmezés szerint button. Lehetséges típusok:

  • submit: Az űrlap elküldése a szervernek
  • reset: Az űrlap összes mezőjének visszaállítása az alapértékre
  • button: Nincs alapértelmezett viselkedés

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
formaction formAction true string

Megadja az űrlap elküldéséhez használandó URL-t.

Ha ez az attribútum meg van adva, felülírja a <form> elem action attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:

  • application/x-www-form-urlencoded: Az alapértelmezett érték
  • multipart/form-data: Akkor használandó, ha az űrlap <input type="file"> elemet tartalmaz
  • text/plain: A HTML5-ben bevezetve, hibakereséshez használható

Ha ez az attribútum meg van adva, felülírja a <form> elem enctype attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formmethod formMethod true 'post' | 'get'

Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:

  • post: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre
  • get: Az űrlapadatok ? elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz

Ha ez az attribútum meg van adva, felülírja a <form> elem method attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formnovalidate formNoValidate true boolean false

Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt.

Ha ez az attribútum meg van adva, felülírja a <form> elem novalidate attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:

  • _self: Alapértelmezett opció, az aktuális keretben nyílik meg
  • _blank: Új ablakban nyílik meg
  • _parent: A szülő keretben nyílik meg
  • _top: A teljes ablakban nyílik meg

Ha ez az attribútum meg van adva, felülírja a <form> elem target attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A kiválasztott állapot megváltozásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

Ikon komponens.
selected-icon

A kiválasztott állapotban megjelenő ikon elem.
### CSS Parts
Név Leírás
button

A belső <button> vagy <a> elem.
icon

A nem kiválasztott állapot ikonja.
selected-icon

A kiválasztott állapot ikonja.
loading

A betöltési állapotot jelző <mdui-circular-progress> elem.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Kártya komponens A kártya egy sokoldalú komponens, amely egyetlen témához kapcsolódó tartalmak és műveletek megjelenítésére szolgál. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/card.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Card } from 'mdui/components/card.js'; ``` Példa: ```html Kártya ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a kártya változatát. ```html ``` ### Kattintható {#example-clickable} A `clickable` attribútummal a kártya kattinthatóvá válik, ilyenkor rámutatáskor megjelenő kiemelés és kattintási hullámzás jelenik meg. ```html ``` ### Link {#example-link} A `href` attribútummal a kártya linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a kártyát. ```html ``` ## mdui-card API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

A kártya variánsa. A lehetséges értékek:

  • elevated: Árnyékos kártya, nagyobb vizuális elkülönülés a háttértől
  • filled: Háttérszínnel rendelkező kártya, kisebb vizuális elkülönülés a háttértől
  • outlined: Keretes kártya, a legnagyobb vizuális elkülönülés a háttértől
clickable clickable true boolean false

Kattintható-e. true érték esetén a kártya hover és kattintási hullámhatást kap.
disabled disabled true boolean false

Letiltott állapotú-e.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A kártya tartalma.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Jelölőnégyzet komponens A jelölőnégyzet segítségével a felhasználó egy vagy több lehetőséget választhat ki egy opciókészletből, vagy egyetlen lehetőséget kapcsolhat be és ki. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/checkbox.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Példa: ```html Jelölőnégyzet ``` ## Példák {#examples} ### Kijelölt állapot {#example-checked} Kijelöléskor a `checked` attribútum értéke `true`. A `checked` attribútummal a jelölőnégyzet alapértelmezés szerint kijelölt állapotú lehet. ```html Jelölőnégyzet ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a jelölőnégyzetet. ```html Jelölőnégyzet Jelölőnégyzet ``` ### Határozatlan állapot {#example-indeterminate} Az `indeterminate` attribútummal a jelölőnégyzet határozatlan állapotba kerül. ```html Jelölőnégyzet ``` ### Ikon {#example-icon} Az `unchecked-icon`, `checked-icon`, `indeterminate-icon` attribútumokkal megadhatja a nem kijelölt, kijelölt és határozatlan állapotú jelölőnégyzet Material Icons ikonját. Az `unchecked-icon`, `checked-icon`, `indeterminate-icon` slotokon keresztül is beállíthatja őket. ```html Jelölőnégyzet Jelölőnégyzet
Jelölőnégyzet Jelölőnégyzet ``` ## mdui-checkbox API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
disabled disabled true boolean false

Letiltott állapotú-e.
checked checked true boolean false

Be van-e jelölve.
undefined defaultChecked false boolean false

Alapértelmezett bejelölt állapot. Az űrlap visszaállításakor erre az állapotra áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
indeterminate indeterminate true boolean false

Határozatlan állapotban van-e.
required required true boolean false

Az űrlap elküldésekor kötelező-e bejelölni ezt a jelölőnégyzetet.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

A jelölőnégyzet neve, amely az űrlapadatokkal együtt kerül elküldésre.
value value true string 'on'

A jelölőnégyzet értéke, amely az űrlapadatokkal együtt kerül elküldésre.
unchecked-icon uncheckedIcon true string

A nem kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="unchecked-icon" segítségével is.
checked-icon checkedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="checked-icon" segítségével is.
indeterminate-icon indeterminateIcon true string

A határozatlan állapot Material Icons ikonjának neve. Beállítható a slot="indeterminate-icon" segítségével is.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A kiválasztott állapot megváltozásakor aktiválódik.
input

A kiválasztott állapot megváltozásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A jelölőnégyzet szövege.
unchecked-icon

A nem kiválasztott állapot ikonja.
checked-icon

A kiválasztott állapot ikonja.
indeterminate-icon

A határozatlan állapot ikonja.
### CSS Parts
Név Leírás
control

A bal oldali ikon konténere.
unchecked-icon

A nem kiválasztott állapot ikonja.
checked-icon

A kiválasztott állapot ikonja.
indeterminate-icon

A határozatlan állapot ikonja.
label

A jelölőnégyzet szövege.
# Chip komponens A chip megkönnyíti az adatbevitelt, a kiválasztást, a tartalom szűrését és a kapcsolódó műveletek végrehajtását. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/chip.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Példa: ```html Chip ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a chip változatát. A chip 4 változatban érhető el a felhasználási módtól függően: - `assist`: Az aktuális kontextushoz kapcsolódó segédműveletek megjelenítésére. Például egy ételrendelő oldalon a megosztás és a kedvencek gyors elérésére. - `filter`: Tartalom szűrésére. Például egy találati oldalon a keresési eredmények szűrésére. - `input`: A felhasználó által bevitt információrészletek megjelenítésére. Például a Gmail „Címzett” mezőjében lévő kapcsolatok. - `suggestion`: Dinamikusan generált ajánlott információk biztosítására a felhasználói műveletek egyszerűsítése érdekében. Például egy csevegőalkalmazásban olyan üzenetjavaslatok megjelenítése, amelyeket a felhasználó nagy valószínűséggel el szeretne küldeni. ```html Assist Szűrő Bevitel Javaslat ``` ### Árnyék {#example-elevated} Az `elevated` attribútum hozzáadásával a chip árnyékot kap. ```html Chip ``` ### Ikon {#example-icon} Az `icon` és `end-icon` attribútumok hozzáadásával Material Icons ikonokat adhat a chip bal és jobb oldalán. Az `icon` és `end-icon` slotokon keresztül is hozzáadhat elemeket a chip bal és jobb oldalához. ```html Ikon Záró ikon Slot ``` ### Link {#example-link} A `href` attribútummal a chip linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html Link ``` ### Letiltott és betöltési állapot {#example-disabled} A `disabled` attribútummal letilthatja a chipet; a `loading` attribútummal betöltési állapotot adhat hozzá. ```html Letiltva Betöltés Betöltés és letiltva ``` ### Kijelölhető {#example-selectable} Ha hozzáadja a `selectable` attribútumot, a chip kijelölhetővé válik. ```html Chip ``` A `selected-icon` attribútummal megadhatja a kijelölt állapothoz tartozó Material Icons ikon nevét. A `selected-icon` slotban is megadhatja a kijelölt állapot ikonját. ```html Chip Chip ``` Miután a chipet kijelölték, a `selected` attribútum értéke `true` lesz. A `selected` attribútummal a chip alapértelmezés szerint kijelölt állapotú lehet. ```html Chip ``` ### Törölhető {#example-deletable} Ha hozzáadja a `deletable` attribútumot, a chip jobb oldalán törlés ikon jelenik meg. Az ikonra kattintva a `delete` esemény aktiválódik. A `delete-icon` attribútummal megadhatja a törlés ikon Material Icons nevét, vagy a `delete-icon` sloton keresztül adhatja meg a törlés ikon elemét. ```html Chip Chip Chip ``` ## mdui-chip API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

A chip variánsa. A lehetséges értékek:

  • assist: Az aktuális kontextushoz kapcsolódó segédműveletek megjelenítésére, pl. megosztás, kedvencek funkciók egy rendelési oldalon
  • filter: Tartalom szűrésére, pl. keresési eredmények szűrése egy találati oldalon
  • input: A felhasználó által bevitt információ részleteinek megjelenítésére, pl. kapcsolatok a Gmail "Címzett" mezőjében
  • suggestion: Dinamikusan generált ajánlások biztosítására a felhasználói műveletek egyszerűsítése érdekében, pl. üzenetküldő alkalmazásokban a felhasználó által esetleg elküldeni kívánt információ előrejelzése
elevated elevated true boolean false

Megjelenjen-e árnyék.
selectable selectable true boolean false

Kiválasztható-e.
selected selected true boolean false

Ki van-e választva.
deletable deletable true boolean false

Törölhető-e. true érték esetén a chip jobb oldalán egy törlés ikon jelenik meg.
icon icon true string

A bal oldali Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
selected-icon selectedIcon true string

A kiválasztott állapotban lévő bal oldali Material Icons ikon neve. Beállítható a slot="selected-icon" segítségével is.
end-icon endIcon true string

A jobb oldali Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
delete-icon deleteIcon true string

Törölhető állapotban a jobb oldali törlés ikon Material Icons ikonjának neve. Beállítható a slot="delete-icon" segítségével is.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
disabled disabled true boolean false

Letiltott állapotú-e.
loading loading true boolean false

Betöltési állapotban van-e.
name name true string ''

A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
value value true string ''

A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
type type true 'submit' | 'reset' | 'button' 'button'

A gomb típusa. Alapértelmezés szerint button. Lehetséges típusok:

  • submit: Az űrlap elküldése a szervernek
  • reset: Az űrlap összes mezőjének visszaállítása az alapértékre
  • button: Nincs alapértelmezett viselkedés

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
formaction formAction true string

Megadja az űrlap elküldéséhez használandó URL-t.

Ha ez az attribútum meg van adva, felülírja a <form> elem action attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:

  • application/x-www-form-urlencoded: Az alapértelmezett érték
  • multipart/form-data: Akkor használandó, ha az űrlap <input type="file"> elemet tartalmaz
  • text/plain: A HTML5-ben bevezetve, hibakereséshez használható

Ha ez az attribútum meg van adva, felülírja a <form> elem enctype attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formmethod formMethod true 'post' | 'get'

Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:

  • post: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre
  • get: Az űrlapadatok ? elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz

Ha ez az attribútum meg van adva, felülírja a <form> elem method attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formnovalidate formNoValidate true boolean false

Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt.

Ha ez az attribútum meg van adva, felülírja a <form> elem novalidate attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:

  • _self: Alapértelmezett opció, az aktuális keretben nyílik meg
  • _blank: Új ablakban nyílik meg
  • _parent: A szülő keretben nyílik meg
  • _top: A teljes ablakban nyílik meg

Ha ez az attribútum meg van adva, felülírja a <form> elem target attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
change

A kiválasztott állapot megváltozásakor aktiválódik.
delete

A törlés ikonra kattintáskor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A chip szövege.
icon

A bal oldali elem.
end-icon

A jobb oldali elem.
selected-icon

A kiválasztott állapotban lévő bal oldali elem.
delete-icon

Törölhető állapotban a jobb oldali törlés elem.
### CSS Parts
Név Leírás
button

A belső <button> vagy <a> elem.
label

A chip szövege.
icon

A bal oldali ikon.
end-icon

A jobb oldali ikon.
selected-icon

A kiválasztott állapotban lévő bal oldali ikon.
delete-icon

Törölhető állapotban a jobb oldali törlés ikon.
loading

A betöltési állapotot jelző <mdui-circular-progress> elem.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Kör alakú folyamatjelző komponens A kör alakú folyamatjelző egy kör alakú komponens a feladat előrehaladásának megjelenítésére, például adatbetöltés vagy űrlapbeküldés során. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/circular-progress.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Rögzített előrehaladás {#example-value} A kör alakú folyamatjelző alapértelmezés szerint határozatlan előrehaladást mutat. A `value` attribútummal beállíthatja az aktuális előrehaladást, az alapértelmezett maximális érték `1`. ```html ``` A `max` attribútummal beállíthatja az előrehaladás maximális értékét. ```html ``` ## mdui-circular-progress API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
max max true number 1

A folyamatjelző maximális értéke. Alapértelmezés szerint 1.
value value false number

A folyamatjelző aktuális értéke. Ha ez az érték nincs megadva, a jelző határozatlan állapotban jelenik meg.
# Összecsukható panel komponens Az összecsukható panel komponens bonyolult tartalomterületek csoportosítására és elrejtésére szolgál az oldal rendezettségének megőrzése érdekében. Vegye figyelembe, hogy az összecsukható panel komponens önmagában nem tartalmaz stílusokat, saját magának kell stílusokat hozzáadnia, vagy más komponensekkel együtt kell használnia. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Példa: ```html első tartalom második tartalom ``` ## Példák {#examples} ### Panel címe és tartalma {#example-header} A `` komponens `header` attribútumával beállíthatja a panel fejlécének szövegét, vagy a `header` slotban adhatja meg a panel fejlécének elemét. A komponens alapértelmezett slotja a panel tartalmára szolgál. ```html 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
``` ### Harmonika mód {#example-accordion} Az `accordion` attribútummal aktiválhatja a harmonika módot, így egyszerre csak egy panel maradhat nyitva. ```html 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
``` ### Aktív panelek beállítása {#example-value} A `` komponens `value` attribútumával lekérheti az aktuálisan nyitott paneleket, vagy beállíthatja a megnyitandó paneleket. Harmonika módban a `value` attribútum értéke egy karakterlánc, amelyet HTML attribútumként vagy JavaScript tulajdonságként kezelhet; nem harmonika módban a `value` attribútum értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet kezelni. ```html Harmonika mód 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
Nem harmonika mód 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal a `` komponenshez letilthatja az egész összecsukható panel csoportot. Hasonlóképpen, a `disabled` attribútum hozzáadásával a `` komponenshez letilthat egy adott összecsukható panelt. ```html Összes letiltva 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
Első panel letiltva 1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
``` ### Az összecsukást kiváltó elem {#example-trigger} Alapértelmezés szerint a teljes panel fejlécére kattintva történik az összecsukás. A `` komponens `trigger` attribútumával megadhatja az összecsukást kiváltó elemet. A `trigger` attribútum lehet CSS szelektor vagy DOM elem. ```html 1. elem
1. elem - al-elem
``` ## mdui-collapse-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string

Az összecsukható panel elem értéke.
header header true string

Az összecsukható panel elem fejléc szövege.
disabled disabled true boolean false

Az összecsukható panel elem letiltása.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Az az elem, amelyre kattintva az összecsukás aktiválódik. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a teljes fejléc területre kattintva aktiválódik.
### Események
Név Leírás
open

A nyitás kezdetekor aktiválódik az esemény.
opened

A nyitási animáció befejezésekor aktiválódik az esemény.
close

A zárás kezdetekor aktiválódik az esemény.
closed

A zárási animáció befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

Az összecsukható panel elem törzs tartalma.
header

Az összecsukható panel elem fejléc tartalma.
### CSS Parts
Név Leírás
header

Az összecsukható panel fejléc tartalma.
body

Az összecsukható panel törzs tartalma.
## mdui-collapse API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
accordion accordion true boolean false

Harmonika mód engedélyezése.
value value false string | string[]

Az aktuálisan kinyitott <mdui-collapse-item> értéke.

Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha az accordion true. Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha az accordion true, és karakterláncok tömbje, ha az accordion false. Ezért ha az accordion false, akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
disabled disabled true boolean false

Az összecsukható panel letiltása.
### Események
Név Leírás
change

Aktiválódik, amikor a kinyitott összecsukható panel elem megváltozik.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-collapse-item> komponens.
# Párbeszédablak komponens A párbeszédablak fontos értesítések megjelenítésére szolgál, amikor a felhasználó műveleteket végez. A komponens közvetlen használata mellett az mdui négy függvényt is biztosít: [`mdui.dialog`](/hu/docs/2/functions/dialog), [`mdui.alert`](/hu/docs/2/functions/alert), [`mdui.confirm`](/hu/docs/2/functions/confirm), [`mdui.prompt`](/hu/docs/2/functions/prompt). Ezek a függvények leegyszerűsítik a Dialog komponens használatát. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/dialog.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Példa: ```html Párbeszédablak Bezárás Párbeszédablak megnyitása ``` ## Példák {#examples} ### Kattintás a takarórétegre bezáráshoz {#example-close-on-overlay-click} A `close-on-overlay-click` attribútummal a párbeszédablak bezárható a takarórétegre kattintva. ```html Párbeszédablak Párbeszédablak megnyitása ``` ### ESC billentyű lenyomására bezárás {#example-close-on-esc} A `close-on-esc` attribútummal a párbeszédablak az ESC billentyű lenyomására bezáródik. ```html Párbeszédablak Párbeszédablak megnyitása ``` ### Teljes képernyő {#example-fullscreen} A `fullscreen` attribútummal a párbeszédablak teljes képernyős módban jelenik meg. ```html Párbeszédablak Bezárás Párbeszédablak megnyitása ``` ### Ikon {#example-icon} Az `icon` attribútum beállításával Material Icons ikont adhat a párbeszédablak tetejére. ```html Párbeszédablak Párbeszédablak megnyitása ``` Az `icon` sloton keresztül is hozzáadhat ikonelemet a párbeszédablak tetejére. ```html Párbeszédablak Párbeszédablak megnyitása ``` ### Cím és leírás {#example-headline} A `headline` és `description` attribútumokkal állíthatja be a párbeszédablak címét és leírását. ```html Párbeszédablak megnyitása ``` A `headline` és `description` slotokon keresztül is beállíthatja a párbeszédablak címelemét és leírás elemét. ```html A kiválasztott képek törlése? A képek véglegesen eltávolításra kerülnek a fiókjából és az összes szinkronizált eszközről. Párbeszédablak megnyitása ``` ### Alsó műveleti gombok {#example-action} Az `action` slot használatával adhat hozzá alsó műveleti gombokat. ```html Mégse Törlés Párbeszédablak megnyitása ``` A `stacked-actions` attribútummal az alsó műveleti gombok függőlegesen rendeződjenek. ```html Helymeghatározás bekapcsolása Nem, köszönöm Párbeszédablak megnyitása ``` ### Felső tartalom {#example-header} A `header` slot használatával adhat hozzá felső tartalmat a párbeszédablakhoz. ```html Cím Mentés
Párbeszédablak megnyitása ``` ## mdui-dialog API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
icon icon true string

A felső Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
headline headline true string

Címsor. Beállítható a slot="headline" segítségével is.
description description true string

A címsor alatti szöveg. Beállítható a slot="description" segítségével is.
open open true boolean false

A párbeszédablak nyitva van-e.
fullscreen fullscreen true boolean false

A párbeszédablak teljes képernyős megjelenítése.
close-on-esc closeOnEsc true boolean false

Az ESC billentyű lenyomásával bezárható-e a párbeszédablak.
close-on-overlay-click closeOnOverlayClick true boolean false

A fedőrétegre kattintva bezárható-e a párbeszédablak.
stacked-actions stackedActions true boolean false

Az alsó műveleti gombok egymás alatt jelenjenek-e meg.
### Események
Név Leírás
open

A párbeszédablak nyitásának kezdetekor aktiválódik. Az event.preventDefault() meghívásával megakadályozható a párbeszédablak megnyitása.
opened

A párbeszédablak nyitási animációjának befejezésekor aktiválódik.
close

A párbeszédablak zárásának kezdetekor aktiválódik. Az event.preventDefault() meghívásával megakadályozható a párbeszédablak bezárása.
closed

A párbeszédablak zárási animációjának befejezésekor aktiválódik.
overlay-click

A fedőrétegre kattintáskor aktiválódik.
### Slots
Név Leírás
header

A felső elem, alapértelmezés szerint tartalmazza az icon és a headline slot-okat.
icon

A felső ikon.
headline

A felső címsor.
description

A címsor alatti szöveg.
(alapértelmezett)

A párbeszédablak fő tartalma.
action

Az alsó műveletsávban lévő elemek.
### CSS Parts
Név Leírás
overlay

A fedőréteg.
panel

A párbeszédablak konténere.
header

A párbeszédablak fejléc része, amely tartalmazza az ikont és a címsort.
icon

A felső ikon, amely a fejlécben található.
headline

A felső címsor, amely a fejlécben található.
body

A párbeszédablak törzs része.
description

A kiegészítő szöveg része, amely a törzsben található.
action

Az alsó műveleti gombok.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Elválasztó komponens Az elválasztó egy vékony vonal, amely a listák és konténerek tartalmának csoportosítására szolgál. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/divider.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Függőleges elválasztó {#example-vertical} A `vertical` attribútummal az elválasztó függőlegesen jelenjen meg. ```html
``` ### Bal oldali behúzás {#example-inset} A `inset` attribútummal az elválasztó bal oldalon behúzott legyen. Ez gyakran használatos listákban, hogy az elválasztó a bal oldali szöveghez igazodjon. ```html 1. elem 2. elem ``` ### Két oldali behúzás {#example-middle} A `middle` attribútummal az elválasztó mindkét oldalon behúzott legyen. ```html 1. elem 2. elem ``` ## mdui-divider API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
vertical vertical true boolean false

Függőleges elválasztó legyen-e.
inset inset true boolean false

Bal oldali behúzással rendelkezzen-e.
middle middle true boolean false

Mindkét oldali behúzással rendelkezzen-e.
# Lenyíló lista komponens A lenyíló lista egy felugró vezérlőben jeleníti meg a megadott tartalmat, és gyakran a Menü komponenssel együtt használják. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/dropdown.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Példa: ```html lenyíló lista megnyitása 1. elem 2. elem ``` ## Példák {#examples} ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a lenyíló listát. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ### Megnyitás pozíciója {#example-placement} A `placement` attribútummal beállíthatja a lenyíló lista megnyitásának pozícióját. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ### Aktiválási mód {#example-trigger} A `trigger` attribútummal beállíthatja a lenyíló lista aktiválási módját. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ### Megnyitás a kurzor pozíciójában {#example-open-on-pointer} A `open-on-pointer` attribútummal a lenyíló lista a kurzor pozíciójában nyíljon meg. Gyakran használják a `trigger="contextmenu"`-val együtt a jobb egérgombbal történő menü megnyitásához. ```html Ezen a területen jobb egérgombbal nyissa meg a menüt 1. elem 2. elem ``` ### A menü nyitva tartása kattintáskor {#example-stay-open-on-click} Ha a lenyíló listában menüt használ, alapértelmezés szerint a menüpontra kattintva a lenyíló lista automatikusan bezáródik. A `stay-open-on-click` attribútum hozzáadásával a menüpontra kattintva a lenyíló lista nyitva marad. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ### Nyitás/zárás késleltetése {#example-delay} Ha a `trigger="hover"` be van állítva, az `open-delay` és `close-delay` attribútumokkal beállíthatja a nyitás és zárás késleltetését. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ## mdui-dropdown API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
open open true boolean false

A lenyíló lista nyitva van-e.
disabled disabled true boolean false

A lenyíló lista letiltása.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

A lenyíló lista kiváltási módja, több érték is megadható szóközzel elválasztva. Lehetséges értékek:

  • click: Kattintásra aktiválódik
  • hover: Egérrel fölé vive aktiválódik
  • focus: Fókuszáláskor aktiválódik
  • contextmenu: Jobb egérgombos kattintásra vagy hosszú érintésre aktiválódik
  • manual: Csak programozottan lehet megnyitni és bezárni a lenyíló listát, más kiváltási mód nem adható meg
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

A lenyíló lista tartalmának pozíciója. Lehetséges értékek:

  • auto: Automatikus pozíció meghatározás
  • top-start: Fent, balra igazítva
  • top: Fent, középre igazítva
  • top-end: Fent, jobbra igazítva
  • bottom-start: Lent, balra igazítva
  • bottom: Lent, középre igazítva
  • bottom-end: Lent, jobbra igazítva
  • left-start: Balra, felülre igazítva
  • left: Balra, középre igazítva
  • left-end: Balra, alulra igazítva
  • right-start: Jobbra, felülre igazítva
  • right: Jobbra, középre igazítva
  • right-end: Jobbra, alulra igazítva
stay-open-on-click stayOpenOnClick true boolean false

A <mdui-menu-item> elemre kattintás után a lenyíló lista nyitva maradjon-e.
open-delay openDelay true number 150

Az egérrel fölé vive történő lenyíló lista nyitás késleltetése, ezredmásodpercben.
close-delay closeDelay true number 150

Az egérrel fölé vive történő lenyíló lista zárás késleltetése, ezredmásodpercben.
open-on-pointer openOnPointer true boolean false

A lenyíló lista a kurzor pozíciójában nyíljon-e meg, gyakran használatos a jobb egérgombos menü megnyitásához.
### Események
Név Leírás
open

A lenyíló lista nyitásának kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a lenyíló lista megnyitása.
opened

A lenyíló lista nyitási animációjának befejezésekor aktiválódik az esemény.
close

A lenyíló lista zárásának kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a lenyíló lista bezárása.
closed

A lenyíló lista zárási animációjának befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

A lenyíló lista tartalma.
trigger

A lenyíló listát kiváltó elem, például egy <mdui-button> elem.
### CSS Parts
Név Leírás
trigger

A lenyíló listát kiváltó elemek konténere, azaz a trigger slot konténere.
panel

A lenyíló lista tartalmának konténere.
### CSS egyéni tulajdonságok
Név Leírás
--z-index

A komponens CSS z-index értéke.
# Lebegő műveletgomb komponens A lebegő műveletgomb (FAB) az oldal elsődleges műveletét emeli ki, hogy az mindig könnyen elérhető maradjon. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/fab.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Ikon {#example-icon} A Material Icons ikon nevét az `icon` attribútummal adhatja meg. Az `icon` slotban is megadhat ikont. ```html ``` ### Kibontott állapot {#example-extended} Az `extended` attribútummal kibontott állapotban jelenítheti meg a FAB-ot, ilyenkor az alapértelmezett slotban lévő szöveg is látható. ```html Szerkesztés ``` ### Változat {#example-variant} A `variant` attribútummal állíthatja be a FAB változatát. ```html ``` ### Méret {#example-size} A `size` attribútummal állíthatja be a FAB méretét. ```html ``` ### Link {#example-link} A `href` attribútummal a FAB linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html ``` ### Letiltott és betöltési állapot {#example-disabled} A `disabled` attribútummal letilthatja a FAB-ot; a `loading` attribútum hozzáadásával betöltési állapotot adhat hozzá. ```html ``` ## mdui-fab API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

A FAB variánsa, a különböző variánsok között csak a szín különbözik. Lehetséges értékek:

  • primary: Elsődleges konténer háttérszínt használ
  • surface: Felületi konténer magas háttérszínt használ
  • secondary: Másodlagos konténer háttérszínt használ
  • tertiary: Harmadlagos konténer háttérszínt használ
size size true 'normal' | 'small' | 'large' 'normal'

A FAB mérete. Lehetséges értékek:

  • normal: Normál méretű FAB
  • small: Kis méretű FAB
  • large: Nagy méretű FAB
icon icon true string

Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
extended extended true boolean false

Kibontott állapotban van-e.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
disabled disabled true boolean false

Letiltott állapotú-e.
loading loading true boolean false

Betöltési állapotban van-e.
name name true string ''

A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
value value true string ''

A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
type type true 'submit' | 'reset' | 'button' 'button'

A gomb típusa. Alapértelmezés szerint button. Lehetséges típusok:

  • submit: Az űrlap elküldése a szervernek
  • reset: Az űrlap összes mezőjének visszaállítása az alapértékre
  • button: Nincs alapértelmezett viselkedés

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
formaction formAction true string

Megadja az űrlap elküldéséhez használandó URL-t.

Ha ez az attribútum meg van adva, felülírja a <form> elem action attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:

  • application/x-www-form-urlencoded: Az alapértelmezett érték
  • multipart/form-data: Akkor használandó, ha az űrlap <input type="file"> elemet tartalmaz
  • text/plain: A HTML5-ben bevezetve, hibakereséshez használható

Ha ez az attribútum meg van adva, felülírja a <form> elem enctype attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formmethod formMethod true 'post' | 'get'

Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:

  • post: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre
  • get: Az űrlapadatok ? elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz

Ha ez az attribútum meg van adva, felülírja a <form> elem method attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formnovalidate formNoValidate true boolean false

Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt.

Ha ez az attribútum meg van adva, felülírja a <form> elem novalidate attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:

  • _self: Alapértelmezett opció, az aktuális keretben nyílik meg
  • _blank: Új ablakban nyílik meg
  • _parent: A szülő keretben nyílik meg
  • _top: A teljes ablakban nyílik meg

Ha ez az attribútum meg van adva, felülírja a <form> elem target attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

Szöveg.
icon

Ikon.
### CSS Parts
Név Leírás
button

A belső <button> vagy <a> elem.
label

A jobb oldali szöveg.
icon

A bal oldali ikon.
loading

A betöltési állapotot jelző <mdui-circular-progress> elem.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner-small

A komponens sarok lekerekítésének mérete size="small" esetén. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--shape-corner-normal

A komponens sarok lekerekítésének mérete size="normal" esetén. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--shape-corner-large

A komponens sarok lekerekítésének mérete size="large" esetén. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Ikon komponens Az ikon általános műveletek megjelenítésére szolgál. Támogatja a Material Icons ikonokat és az SVG ikonokat is. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/icon.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Példa: ```html ``` ### Material Icons ikonok használata {#usage-material-icons} Ha Material Icons ikonokat szeretne használni ezen a komponensen keresztül, külön importálnia kell a Material Icons CSS fájlját. A Material Icons-nak 5 változata van: Filled, Outlined, Rounded, Sharp, Two Tone. A használni kívánt ikonváltozatnak megfelelően importálja a megfelelő CSS fájlt: ```html ``` A komponens használatakor adja meg az ikon nevét a `name` attribútumban, és adja hozzá az ikonváltozat nevét utótagként (a Filled változat esetén nem kell utótag). Az alábbiakban a `delete` ikon 5 változatának használati módja látható: ```html ``` Közvetlenül az oldal alján található [Material Icons ikonkereső](/hu/docs/2/components/icon#search) eszközben kereshet ikonokat, majd kattintson a használni kívánt ikonra, hogy automatikusan a vágólapra másolja az ikon kódját. Emellett az mdui egy különálló [`@mdui/icons`](/hu/docs/2/libraries/icons) csomagot is biztosít, amelyben minden ikonkomponens egy különálló fájl, így csak a szükséges ikonkomponenseket importálhatja, anélkül, hogy a teljes ikonkészletet be kellene töltenie. ### SVG ikonok használata {#usage-svg} A komponens SVG ikonokat is támogat ikontartalomként. A `src` attribútummal megadhatja az SVG ikon linkjét. Például: ```html ``` Az alapértelmezett slotban is megadhatja az SVG tartalmát. Például: ```html ``` ## Példák {#examples} ### Szín beállítása {#example-color} Állítsa be a `` elem vagy a szülőelem `color` CSS stílusát az ikon színének megváltoztatásához. ```html ``` ### Méret beállítása {#example-size} Állítsa be a `` elem vagy a szülőelem `font-size` CSS stílusát az ikon méretének megváltoztatásához. ```html ``` ## mdui-icon API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
name name true string

Material Icons ikon neve.
src src true string

Az SVG ikon elérési útja.
### Slots
Név Leírás
(alapértelmezett)

Az svg ikon tartalma.
# Elrendezés komponens Az elrendezés komponens egy rugalmas elrendezési rendszert biztosít összetett oldalelrendezések létrehozásához. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Bevezetés:** Az elrendezési rendszer a kívülről befelé haladó elvet követi. Minden elrendezés-komponens (a `` komponens) a négy irány (felső, alsó, bal, jobb) egyikében foglal helyet, a következő elrendezés-komponens a megmaradt helyen folytatja a helyfoglalást. A következő komponensek közvetlenül a `` komponensből származnak, így szintén használhatók elrendezés-komponensként: - [``](/hu/docs/2/components/navigation-bar) - [``](/hu/docs/2/components/navigation-drawer) - [``](/hu/docs/2/components/navigation-rail) - [``](/hu/docs/2/components/bottom-app-bar) - [``](/hu/docs/2/components/top-app-bar) Az elrendezési rendszer utolsó része a `` komponens, amely a fennmaradó helyet foglalja el; ezen a komponensen belül helyezheti el az oldal tartalmát. ## Példák {#examples} ### Elrendezés-komponensek sorrendje {#layout-default-order} Alapértelmezés szerint az elrendezés-komponensek a kódban való megjelenésük sorrendjében foglalják el a helyet. Ezt a koncepciót az alábbi két példán keresztül értheti meg. A két példában a [``](/hu/docs/2/components/top-app-bar) és a [``](/hu/docs/2/components/navigation-drawer) sorrendje eltérő a kódban.

Kérjük, nagy képernyős monitoron tekintse meg ezt a példát.

```html Felső alkalmazássáv Navigációs fiók Főtartalom ``` ```html Navigációs fiók Felső alkalmazássáv Főtartalom ``` Látható, hogy ha a [``](/hu/docs/2/components/top-app-bar) a [``](/hu/docs/2/components/navigation-drawer) előtt van, a [``](/hu/docs/2/components/top-app-bar) először az oldal teljes szélességét foglalja el, míg a [``](/hu/docs/2/components/navigation-drawer) csak a fennmaradó helyen foglalja el a teljes magasságot. A sorrend felcserélése után a [``](/hu/docs/2/components/navigation-drawer) először az oldal teljes magasságát foglalja el, míg a [``](/hu/docs/2/components/top-app-bar) csak a fennmaradó helyen foglalja el a teljes szélességet. ### Elrendezés-komponensek pozíciója {#example-placement} A `` komponensek esetében a `placement` attribútummal megadhatja azok felső, alsó, bal vagy jobb oldali pozícióját az elrendezésben. A [``](/hu/docs/2/components/navigation-drawer) és a [``](/hu/docs/2/components/navigation-rail) komponensek esetében is használhatja a `placement` attribútumot a bal vagy jobb oldali pozíció megadásához. Az alábbi példában két `` komponenst helyeztünk el az alkalmazás két oldalán. ```html Felső alkalmazássáv Elrendezés-elem Elrendezés-elem Főtartalom ``` ### Egyéni elrendezés-komponensek sorrendje {#example-order} A legtöbb esetben az elrendezés-komponensek megfelelő sorrendben történő elhelyezésével elérheti a kívánt elrendezést. Használhatja az `order` attribútumot is az elrendezési sorrend megadásához. A rendszer az `order` értéke szerint növekvő sorrendbe rendezi a komponenseket, azonos `order` esetén pedig a kód szerinti sorrendben. Az összes elrendezés-komponens alapértelmezett `order` értéke `0`. ```html Elrendezés-elem Felső alkalmazássáv
order="-1" Főtartalom ``` ## mdui-layout-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

A komponens pozíciója. Lehetséges értékek:

  • top: Fent
  • bottom: Lent
  • left: Balra
  • right: Jobbra
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Slots
Név Leírás
(alapértelmezett)

Bármilyen tartalmat tartalmazhat.
## mdui-layout-main API ### Slots
Név Leírás
(alapértelmezett)

Bármilyen tartalmat tartalmazhat.
## mdui-layout API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
full-height fullHeight true boolean false

Az aktuális elrendezés magasságának beállítása 100%-ra.
### Slots
Név Leírás
(alapértelmezett)

Tartalmazhat <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main> elemeket.
# Lineáris folyamatjelző komponens A lineáris folyamatjelző egy vízszintes jelző, amely a feladat előrehaladását mutatja a felhasználónak, például adatbetöltés vagy űrlapbeküldés során. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/linear-progress.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Előrehaladás beállítása {#example-value} A lineáris folyamatjelző alapértelmezés szerint határozatlan előrehaladást mutat. A `value` attribútummal beállíthatja az aktuális előrehaladást, az alapértelmezett maximális érték `1`. ```html ``` A `max` attribútummal beállíthatja az előrehaladás maximális értékét. ```html ``` ## mdui-linear-progress API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
max max true number 1

A folyamatjelző maximális értéke. Alapértelmezés szerint 1.
value value false number

A folyamatjelző aktuális értéke. Ha ez az érték nincs megadva, a jelző határozatlan állapotban van.
### CSS Parts
Név Leírás
indicator

A jelző rész.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Lista komponens A lista függőlegesen rendezett elemekből áll, és szöveges vagy képes tartalmak áttekinthető megjelenítésére szolgál, hogy a felhasználók gyorsabban böngészhessenek és könnyebben megtalálják a kapcsolódó információkat. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Példa: ```html Alcím 1. elem 2. elem ``` ## Példák {#examples} ### Szöveges tartalom {#example-text} A `` komponens `headline` attribútumával beállíthatja a listaelem fő szövegét, a `description` attribútumával pedig a leírást. ```html ``` Az alapértelmezett slotban is megadhatja a fő szöveget, a `description` slotban pedig a leírást. ```html Címsor Címsor Leírás ``` Alapértelmezés szerint a fő szöveg és a kiegészítő szöveg teljes egészében megjelenik, függetlenül a hosszuktól. A `headline-line` és `description-line` attribútumok segítségével sorlimitet állíthat be a fő szöveg és a kiegészítő szöveg számára, maximum 3 sorig. ```html Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg ``` ### Két oldali tartalom {#example-side} A `` komponens `icon` és `end-icon` attribútumaival Material Icons ikonokat adhat a listaelem bal és jobb oldalán. ```html Címsor ``` Az `icon` és `end-icon` slotokon keresztül is hozzáadhat elemeket a listaelem bal és jobb oldalához. ```html Címsor ``` ### Link {#example-link} A `href` attribútummal a listaelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html Címsor ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a `` komponenst. Ekkor a listaelemben lévő jelölőnégyzet, rádiógomb, kapcsoló stb. komponensek is letiltásra kerülnek. ```html Címsor Címsor ``` ### Aktív állapot {#example-active} Az `active` attribútummal aktiválhatja a `` komponenst. ```html Címsor Címsor ``` ### Nem kattintható állapot {#example-nonclickable} A `nonclickable` attribútummal eltávolíthatja az egér fölé helyezés és a kattintási hullámzás hatását a listaelemről. ```html Címsor Címsor ``` ### Lekerekített alak {#example-rounded} A `rounded` attribútummal lekerekített sarkokat adhat a listaelemnek. ```html Címsor Címsor ``` ### Függőleges igazítás {#example-alignment} A `` komponens `alignment` attribútumával beállíthatja a listaelem bal és jobb oldalán lévő elemek igazítását a listaelemhez képest. Az érték a következő lehet: - `start`: Felső igazítás - `center`: Középre igazítás - `end`: Alsó igazítás ```html Címsor Címsor Címsor ``` ### Egyéni tartalom {#example-custom} A `` komponensben a `custom` slotban teljesen testreszabhatja a listaelem tartalmát. ```html
teszt
 ``` ## mdui-list-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
headline headline true string

Fő szöveg. Beállítható az alapértelmezett slot-on keresztül is.
headline-line headlineLine true 1 | 2 | 3

A fő szöveg sorainak száma, túllépés esetén csonkolva jelenik meg. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek:

  • 1: Egysoros megjelenítés, túllépés esetén csonkolás
  • 2: Kétsoros megjelenítés, túllépés esetén csonkolás
  • 3: Háromsoros megjelenítés, túllépés esetén csonkolás
description description true string

Kiegészítő szöveg. Beállítható a slot="description" segítségével is.
description-line descriptionLine true 1 | 2 | 3

A kiegészítő szöveg sorainak száma, túllépés esetén csonkolva jelenik meg. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek:

  • 1: Egysoros megjelenítés, túllépés esetén csonkolás
  • 2: Kétsoros megjelenítés, túllépés esetén csonkolás
  • 3: Háromsoros megjelenítés, túllépés esetén csonkolás
icon icon true string

A bal oldali Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
end-icon endIcon true string

A jobb oldali Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
disabled disabled true boolean false

A listaelem letiltása. Letiltott állapotban a listaelem szürkévé válik, és a benne lévő <mdui-checkbox>, <mdui-radio>, <mdui-switch> stb. is letiltásra kerül.
active active true boolean false

A listaelem aktív-e.
nonclickable nonclickable true boolean false

A listaelem ne legyen kattintható. Beállítás után a listaelemben lévő <mdui-checkbox>, <mdui-radio>, <mdui-switch> stb. továbbra is interaktív marad.
rounded rounded true boolean false

Lekerekített sarkú listaelem legyen-e.
alignment alignment true 'start' | 'center' | 'end' 'center'

A listaelem függőleges igazítása. Lehetséges értékek:

  • start: Felülre igazítva
  • center: Középre igazítva
  • end: Alulra igazítva
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

Fő szöveg.
description

Kiegészítő szöveg.
icon

A listaelem bal oldali eleme.
end-icon

A listaelem jobb oldali eleme.
custom

Bármilyen egyéni tartalom.
### CSS Parts
Név Leírás
container

A listaelem konténere.
icon

Bal oldali ikon.
end-icon

Jobb oldali ikon.
body

A középső rész.
headline

Fő cím.
description

Alcím.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A listaelem sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--shape-corner-rounded

A listaelem sarok lekerekítésének mérete, ha a rounded attribútum meg van adva. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
## mdui-list-subheader API ### Slots
Név Leírás
(alapértelmezett)

A lista alcím szövege.
## mdui-list API ### Slots
Név Leírás
(alapértelmezett)

A <mdui-list-item> elemek.
# Menü komponens A menü komponens függőlegesen rendezett lehetőségeket jelenít meg. Amikor a felhasználó egy gombbal vagy más vezérlővel lép kapcsolatba, a menü megjelenik. Ha lenyíló menüt szeretne megvalósítani, használhatja a [``](/hu/docs/2/components/dropdown) komponenst. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Példa: ```html 1. elem 2. elem ``` ## Példák {#examples} ### Lenyíló menü {#example-dropdown} Használja együtt a [``](/hu/docs/2/components/dropdown) komponenssel a lenyíló menü megvalósításához. ```html lenyíló lista megnyitása 1. elem 2. elem ``` ### Kompakt elrendezés {#example-dense} A `dense` attribútummal kompakt elrendezést használhat a `` komponensen. ```html 1. elem 2. elem 3. elem ``` ### Menüpont letiltása {#example-disabled} A `disabled` attribútummal letilthatja a `` komponenst. ```html 1. elem 2. elem 3. elem ``` ### Egyszerű kiválasztás támogatása {#example-selects-single} Adja meg a `selects` attribútumot `single` értékkel a `` komponenshez az egyszerű kiválasztás funkció aktiválásához. Ekkor a `` `value` értéke a kijelölt `` `value` értéke lesz. ```html 1. elem 2. elem ``` ### Többszörös kiválasztás támogatása {#example-selects-multiple} Adja meg a `selects` attribútumot `multiple` értékkel a `` komponenshez a többszörös kiválasztás funkció aktiválásához. Ekkor a `` `value` értéke a kijelölt ``-ek `value` értékeiből álló tömb lesz. Figyelem: Többszörös kiválasztás módban a `` `value` értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani. ```html 1. elem 2. elem 3. elem ``` ### Ikon {#example-icon} A `` komponensben az `icon` és `end-icon` attribútumokkal Material Icons ikonokat adhat a menüpont bal és jobb oldalán. Az `end-text` attribútummkiegészítő szöveget adhat a jobb oldalhoz. Ezen kívül az `icon`, `end-icon` és `end-text` slotokon keresztül is hozzáadhat ikonokat és szövegeket a menüpont bal és jobb oldalához. Ha üres ikonhelyet szeretne hagyni a menüpont bal oldalán, hogy megtartsa az igazodást más menüpontokkal, állítsa az `icon` attribútumot üres karakterláncra. ```html 1. elem 2. elem Ctrl+X 3. elem ``` Egyszerű vagy többszörös kiválasztás módban a `selected-icon` attribútummal vagy a `selected-icon` slot-tal beállíthatja a kijelölt állapot ikonját. ```html 1. elem 2. elem ``` ### Link {#example-link} A `` komponensben a `href` attribútum beállításával a menüpont linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html 1. elem 2. elem ``` ### Almenü {#example-submenu} A `` komponensben a `submenu` slotban adhatja meg az almenüpontok elemeit. ```html Sorköz Egyszeres 1,5 Dupla Egyéni: 1,2 Bekezdés stílus ``` A `` komponensen a `submenu-trigger` attribútummal beállíthatja az almenü aktiválási módját. ```html Sorköz Egyszeres 1,5 Dupla Egyéni: 1,2 Bekezdés stílus ``` Ha a `submenu-trigger` attribútum értéke `hover`, a `` komponensen a `submenu-open-delay` és `submenu-close-delay` attribútumokkal beállíthatja az almenü nyitásának és zárásának késleltetését. ```html Sorköz Egyszeres 1,5 Dupla Egyéni: 1,2 Bekezdés stílus ``` ### Egyéni tartalom {#example-custom} A `` komponensben a `custom` slotban teljesen testreszabhatja a menüpont tartalmát. ```html
ABS
Egy szám abszolút értéke
ACOS
Egy szám arkusz koszinusza, radiánban kifejezve
ACOSH
Egy szám arkusz hiperbolikus koszinusza
 ``` ## mdui-menu-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string

A menüpont értéke.
disabled disabled true boolean false

A menüpont letiltása.
icon icon true string

A bal oldali Material Icons ikon neve. Beállítható a slot="icon" segítségével is.

Ha a bal oldalon nem szükséges ikon megjelenítése, de egy ikon helyét fenn kell tartani, üres karakterlánc adható át helyfoglalásként.
end-icon endIcon true string

A jobb oldali Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
end-text endText true string

A jobb oldali szöveg. Beállítható a slot="end-text" segítségével is.
selected-icon selectedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="selected-icon" segítségével is.
submenu-open submenuOpen true boolean false

Az almenü nyitva van-e.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
submenu-open

Az almenü nyitásának kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható az almenü megnyitása.
submenu-opened

Az almenü nyitási animációjának befejezésekor aktiválódik az esemény.
submenu-close

Az almenü zárásának kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható az almenü bezárása.
submenu-closed

Az almenü zárási animációjának befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

A menüpont szövege.
icon

A menüpont bal oldali ikonja.
end-icon

A menüpont jobb oldali ikonja.
end-text

A menü jobb oldali szövege.
selected-icon

A kiválasztott állapot ikonja.
submenu

Almenü.
custom

Bármilyen egyéni tartalom.
### CSS Parts
Név Leírás
container

A menüpont konténere.
icon

A bal oldali ikon.
label

Szöveges tartalom.
end-icon

A jobb oldali ikon.
end-text

A jobb oldali szöveg.
selected-icon

A kiválasztott állapot ikonja.
submenu

Az almenü elem.
## mdui-menu API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
selects selects true 'single' | 'multiple'

A menüpontok kiválaszthatósági állapota. Alapértelmezés szerint nem választhatók ki. Lehetséges értékek:

  • single: Egy választható
  • multiple: Több választható
value value false string | string[]

Az aktuálisan kiválasztott <mdui-menu-item> értéke.

Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha a selects="single". Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha a selects="single", és karakterláncok tömbje, ha a selects="multiple". Ezért ha a selects="multiple", akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
dense dense true boolean false

A menüpontok kompakt elrendezést használjanak-e.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Az almenü kiváltási módja, több érték is megadható szóközzel elválasztva. Lehetséges értékek:

  • click: A menüpontra kattintva nyílik meg az almenü
  • hover: Az egérmutatót a menüpont fölé vive nyílik meg az almenü
  • focus: A menüpont fókuszálásakor nyílik meg az almenü
  • manual: Csak programozottan lehet megnyitni és bezárni az almenüt, más kiváltási mód nem adható meg
submenu-open-delay submenuOpenDelay true number 200

Az egérrel fölé vive történő almenü nyitás késleltetése, ezredmásodpercben.
submenu-close-delay submenuCloseDelay true number 200

Az egérrel fölé vive történő almenü zárás késleltetése, ezredmásodpercben.
### Metódusok
Név Leírás
focus(options?: FocusOptions): void

Fókusz beállítása az aktuális elemre.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
change

Aktiválódik, amikor a menüpont kiválasztási állapota megváltozik.
### Slots
Név Leírás
(alapértelmezett)

Almenüpontok (<mdui-menu-item>), elválasztók (<mdui-divider>) stb.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Navigációs sáv komponens A navigációs sáv megkönnyíti a mobilnézetű oldalak fő részei közötti váltást. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Példa: (A példában szereplő `style="position: relative"` csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.) ```html 1. elem 2. elem 3. elem ``` **Figyelmeztetések:** A komponens alapértelmezés szerint `position: fixed` pozicionálást használ, és automatikusan `padding-bottom` stílust ad a `body` elemhez, hogy a tartalmat ne takarja el a komponens. Viszont a következő két esetben alapértelmezés szerint `position: absolute` pozicionálást használ: 1. Ha meg van adva a `scroll-target` attribútum. Ekkor a `padding-bottom` stílust a `scroll-target` elemre kell alkalmaznia. 2. Ha a komponens a [``](/hu/docs/2/components/layout) komponensen belül található. Ekkor nem ad hozzá `padding-bottom` stílust. ## Példák {#examples} ### Szövegcímke láthatósága {#example-label-visibility} A navigációs sávban a szövegcímke alapértelmezés szerint mindig megjelenik, ha a navigációs sávelemek száma legfeljebb 3; ha a navigációs sávelemek száma meghaladja a 3-at, akkor csak a kijelölt állapotú szöveg jelenik meg. ```html 1. elem 2. elem 3. elem
1. elem 2. elem 3. elem 4. elem ``` A `` komponensen a `label-visibility` attribútummal módosíthatja a szövegcímke láthatóságát. Az elérhető értékek: - `selected`: Csak a kijelölt állapotú szöveg jelenik meg - `labeled`: A szöveg mindig megjelenik - `unlabeled`: A szöveg soha nem jelenik meg ```html 1. elem 2. elem 3. elem selected labeled unlabeled ``` ### Megadott tárolóban való megjelenítés {#example-scroll-target} Alapértelmezés szerint a navigációs sáv alapértelmezés szerint az oldal alján jelenik meg. Ha azt szeretné, hogy a navigációs sáv egy megadott tárolóban jelenjen meg, adja meg a `scroll-target` attribútumot a `` komponensen. Az attribútum értéke a görgethető tartalom tárolójának CSS szelektora vagy DOM eleme. Ekkor a navigációs sáv a szülőelemhez igazodva jelenik meg (a szülőelemen Önnek kell beállítania a `position: relative; overflow: hidden` stílust). ```html
1. elem 2. elem 3. elem
Oldal tartalma
``` ### Görgetéskor történő elrejtés {#example-scroll-behavior} A `` komponensen a `scroll-behavior` attribútum `hide` értékre állításával elérheti, hogy az oldal lefelé görgetésekor a navigációs sáv elrejtődjön, felfelé görgetésekor pedig megjelenjen. A `scroll-threshold` attribútummal beállíthatja, hogy hány pixel görgetése után kezdődjön el a navigációs sáv elrejtése. ```html
1. elem 2. elem 3. elem
Oldal tartalma
``` ### Ikon {#example-icon} A `` komponensben az `icon` attribútum a nem aktivált állapotú navigációs sávelem ikonjának beállítására szolgál, az `active-icon` attribútum pedig az aktivált állapotú navigációs sávelem ikonjának beállítására. Az `icon` és `active-icon` slotokon keresztül is beállíthatja a nem aktivált és aktivált állapot ikonelemeit. ```html 1. elem 2. elem ``` ### Link {#example-link} A `` komponensben a `href` attribútum beállításával a navigációs sávelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html 1. elem 2. elem ``` ### Badge {#example-badge} A `` komponensben a `badge` slotban adhat hozzá badge-et. ```html 1. elem 99+ 2. elem ``` ## mdui-navigation-bar-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
icon icon true string

A nem aktív állapot Material Icons ikonjának neve. Beállítható a slot="icon" segítségével is.
active-icon activeIcon true string

Az aktív állapot Material Icons ikonjának neve. Beállítható a slot="active-icon" segítségével is.
value value true string

A navigációs elem értéke.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A navigációs elem szövege.
icon

Ikon.
active-icon

Az aktív állapot ikonja.
badge

Jelvény.
### CSS Parts
Név Leírás
container

A navigációs elem konténere.
indicator

Jelző.
badge

Jelvény.
icon

Ikon.
active-icon

Az aktív állapot ikonja.
label

A navigációs elem szövege.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner-indicator

A jelző sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
## mdui-navigation-bar API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
hide hide true boolean false

Rejtett állapotban van-e.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

A szöveg láthatósági állapota. Lehetséges értékek:

  • auto: Ha 3 vagy kevesebb opció van, a szöveg mindig látható; ha több mint 3 opció van, csak a kiválasztott állapot szövege látható
  • selected: Csak kiválasztott állapotban látható a szöveg
  • labeled: A szöveg mindig látható
  • unlabeled: A szöveg soha nem látható
value value true string

Az aktuálisan kiválasztott <mdui-navigation-bar-item> értéke.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Görgetési viselkedés. Lehetséges értékek:

  • hide: Elrejtés görgetéskor.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Az elem, amelynek a görgetési eseményeit figyelni kell. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a window görgetési eseményeit figyeli.
scroll-threshold scrollThreshold true number

A görgetési művelet kiváltásához szükséges küszöbérték px-ben.
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Események
Név Leírás
change

Az érték változásakor aktiválódik.
show

A megjelenítés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a megjelenítés.
shown

A megjelenítési animáció befejezésekor aktiválódik az esemény.
hide

Az elrejtés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható az elrejtés.
hidden

Az elrejtési animáció befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-navigation-bar-item> komponens.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Navigációs fiók komponens A navigációs fiók az oldal szélén jeleníti meg a navigációs elemeket, így a felhasználók gyorsan elérhetik a különböző oldalakat és tartalmakat. Általában a [``](/hu/docs/2/components/list) komponenst használhatja navigációs elemek hozzáadásához a navigációs fiókban. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/navigation-drawer.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Példa: ```html Navigációs fiók bezárása Navigációs fiók megnyitása ``` **Figyelmeztetések:** A komponens alapértelmezés szerint `position: fixed` pozicionálást használ. Ha a `modal` attribútum értéke `false`, és a breakpoint legalább [`--mdui-breakpoint-md`](/hu/docs/2/styles/design-tokens#breakpoint), akkor automatikusan `padding-left` vagy `padding-right` stílust ad a `body` elemhez, hogy a tartalmat ne takarja el ez a komponens. Viszont a következő két esetben alapértelmezés szerint `position: absolute` pozicionálást használ: 1. Ha a `contained` attribútum értéke `true`. 2. Ha a komponens a [``](/hu/docs/2/components/layout) komponensen belül található. Ekkor nem ad hozzá `padding-left` vagy `padding-right` stílust. ## Példák {#examples} ### Megadott tárolóban való megjelenítés {#example-contained} Alapértelmezés szerint a navigációs fiók az aktuális ablak méretéhez igazodva jelenik meg az oldal bal vagy jobb oldalán. Ha azt szeretné, hogy a navigációs fiók egy megadott tárolóban jelenjen meg, adja hozzá a `contained` attribútumot, ekkor a navigációs fiók a szülőelemhez igazodva jelenik meg (a szülőelemen a `position: relative; overflow: hidden;` stílust kell beállítania). ```html
Navigációs fiók bezárása
Navigációs fiók megnyitása
``` ### Modális {#example-modal} A `modal` attribútummal a navigációs fiók megnyitásakor takaróréteg jelenjen meg. Vegye figyelembe, hogy ha az ablak vagy a szülőelem szélessége kisebb, mint [`--mdui-breakpoint-md`](/hu/docs/2/styles/design-tokens#breakpoint), a paramétertől függetlenül mindig megjelenik a takaróréteg. A `close-on-esc` attribútummal az ESC billentyű lenyomására bezáródjon a navigációs fiók. A `close-on-overlay-click` attribútummal a takarórétegre kattintva bezáródjon a navigációs fiók. ```html
Navigációs fiók bezárása
Navigációs fiók megnyitása
``` ### Jobb oldalon való elhelyezés {#example-placement} A `placement` attribútum `right` értékre állításával a navigációs fiók az oldal jobb oldalán jelenik meg. ```html
Navigációs fiók bezárása
Navigációs fiók megnyitása
``` ## mdui-navigation-drawer API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
open open true boolean false

A navigációs fiók nyitva van-e.
modal modal true boolean false

A navigációs fiók nyitásakor megjelenjen-e a fedőréteg.

Kis képernyős eszközökön (képernyőszélesség kisebb, mint --mdui-breakpoint-md) a fedőréteg mindig megjelenik, függetlenül ettől a paramétertől.
close-on-esc closeOnEsc true boolean false

Fedőréteg esetén az ESC billentyű lenyomásával bezárható-e a navigációs fiók.
close-on-overlay-click closeOnOverlayClick true boolean false

A fedőrétegre kattintva bezárható-e a navigációs fiók.
placement placement true 'left' | 'right' 'left'

A navigációs fiók pozíciója. Lehetséges értékek:

  • left: Bal oldal
  • right: Jobb oldal
contained contained true boolean false

Alapértelmezés szerint a navigációs fiók a body elemhez képest jelenik meg. Ha ez az attribútum true-ra van állítva, a navigációs fiók a szülőeleméhez képest jelenik meg.

Megjegyzés: Az attribútum beállításakor manuálisan be kell állítani a szülőelemen a position: relative; overflow: hidden; stílusokat.
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Események
Név Leírás
open

A navigációs fiók nyitása előtt aktiválódik. Az event.preventDefault() meghívásával megakadályozható a navigációs fiók megnyitása.
opened

A navigációs fiók nyitási animációjának befejezése után aktiválódik.
close

A navigációs fiók zárása előtt aktiválódik. Az event.preventDefault() meghívásával megakadályozható a navigációs fiók bezárása.
closed

A navigációs fiók zárási animációjának befejezése után aktiválódik.
overlay-click

A fedőrétegre kattintáskor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A navigációs fiók tartalma.
### CSS Parts
Név Leírás
overlay

Fedőréteg.
panel

A navigációs fiók konténere.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Navigációs sín komponens A navigációs sín táblagépen és asztali nézetben biztosít hozzáférést a fő oldalakhoz. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Példa: (A példában szereplő `style="position: relative"` csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.) ```html Legutóbbi Képek Könyvtár ``` **Figyelmeztetések:** A komponens alapértelmezés szerint `position: fixed` pozicionálást használ, és automatikusan `padding-left` vagy `padding-right` stílust ad a `body` elemhez, hogy a tartalmat ne takarja el ez a komponens. Viszont a következő két esetben alapértelmezés szerint `position: absolute` pozicionálást használ: 1. Ha a `` komponens `contained` attribútumának értéke `true`. Ekkor a szülőelemhez adja hozzá a `padding-left` vagy `padding-right` stílust. 2. Ha a [``](/hu/docs/2/components/layout) komponensen belül található. Ekkor nem ad hozzá `padding-left` vagy `padding-right` stílust. ## Példák {#examples} ### Megadott tárolóban való megjelenítés {#example-contained} Alapértelmezés szerint a navigációs sín az aktuális ablak méretéhez igazodva jelenik meg az oldal bal vagy jobb oldalán. Ha azt szeretné, hogy a navigációs sín egy megadott tárolóban jelenjen meg, adja hozzá a `contained` attribútumot a `` komponenshez, ekkor a navigációs sín a szülőeleméhez igazodva jelenik meg (a szülőelemen `position: relative` stílust kell beállítani). ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Jobb oldalon való elhelyezés {#example-placement} A `` komponensen a `placement` attribútum `right` értékre állításával a navigációs sín a jobb oldalon jelenik meg. ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Elválasztó vonal megjelenítése {#example-divider} A `divider` attribútummal elválasztó vonalat jeleníthet meg a navigációs sín mellett, így jobban elkülönül az oldal tartalmától. ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Elemek hozzáadása a tetejéhez/aljához {#example-top-bottom} A `` komponensen belül a `top` és `bottom` slot-ok segítségével adhat hozzá elemeket a tetejéhez és aljához. ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Navigációs elemek függőleges igazítása {#example-alignment} A `` komponens `alignment` attribútumával módosíthatja a navigációs elemek függőleges igazítását. ```html
Legutóbbi Képek Könyvtár
start center end
``` ### Ikon {#example-icon} A `` komponensben az `icon` attribútum a nem aktivált állapotú navigációs sínelem ikonjának beállítására szolgál, az `active-icon` attribútum pedig az aktivált állapotú navigációs sínelem ikonjának beállítására. Az `icon` és `active-icon` slotokon keresztül is beállíthatja a nem aktivált és aktivált állapot ikonelemeit. ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Csak ikon használata {#example-no-label} A `` komponens használható csak ikonnal, szöveg nélkül is. ```html
Oldal tartalma
``` ### Link {#example-link} A `` komponensben a `href` attribútum beállításával a navigációs sínelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html
Legutóbbi Képek Könyvtár
Oldal tartalma
``` ### Badge {#example-badge} A `` komponensben a `badge` slotban adhat hozzá badge-et. ```html
Legutóbbi 99+ Képek Könyvtár
Oldal tartalma
``` ## mdui-navigation-rail-item API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
icon icon true string

A nem aktív állapot Material Icons ikonjának neve. Beállítható a slot="icon" segítségével is.
active-icon activeIcon true string

Az aktív állapot Material Icons ikonjának neve. Beállítható a slot="active-icon" segítségével is.
value value true string

A navigációs elem értéke.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

Szöveges tartalom.
icon

Ikon.
active-icon

Az aktív állapot ikonja.
badge

Jelvény.
### CSS Parts
Név Leírás
container

A navigációs elem konténere.
indicator

Jelző.
badge

Jelvény.
icon

Ikon.
active-icon

Az aktív állapot ikonja.
label

Szöveges tartalom.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner-indicator

A jelző sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
## mdui-navigation-rail API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string

Az aktuálisan kiválasztott <mdui-navigation-rail-item> értéke.
placement placement true 'left' | 'right' 'left'

A navigációs sín pozíciója. Lehetséges értékek:

  • left: Bal oldal
  • right: Jobb oldal
alignment alignment true 'start' | 'center' | 'end' 'start'

A <mdui-navigation-rail-item> elemek igazítása. Lehetséges értékek:

  • start: Felülre igazítva
  • center: Középre igazítva
  • end: Alulra igazítva
contained contained true boolean false

Alapértelmezés szerint a navigációs sín a body elemhez képest jelenik meg. Ha ez az attribútum true-ra van állítva, a navigációs sín a szülőeleméhez képest jelenik meg.

Megjegyzés: Az attribútum beállításakor manuálisan be kell állítani a szülőelemen a position: relative; stílust.
divider divider true boolean false

Elválasztó legyen-e a navigációs sín és az oldal tartalma között.
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Események
Név Leírás
change

Az érték változásakor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-navigation-rail-item> komponens.
top

A felső elemek.
bottom

Az alsó elemek.
### CSS Parts
Név Leírás
top

A felső elemek konténere.
bottom

Az alsó elemek konténere.
items

A <mdui-navigation-rail-item> komponensek konténere.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Rádiógomb komponens A rádiógomb lehetővé teszi, hogy a felhasználók egy opciókészletből válasszanak ki egyet, biztosítva, hogy egyszerre csak egy opció legyen kijelölve. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Példa: ```html Kínai Angol ``` ## Példák {#examples} ### Kijelölt állapot {#example-checked} A `` komponens `value` attribútumának értéke a kijelölt `` komponens `value` attribútumának értéke. A `` komponens `value` attribútumának frissítésével is válthatja az aktuálisan kijelölt rádiógombot. ```html Kínai Angol ``` A `` komponens önállóan is használható, ekkor a `checked` attribútummal lekérheti és módosíthatja a kijelölt állapotot. ```html Rádiógomb ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja az egész rádiógomb-csoportot a `` komponensen. ```html Kínai Angol ``` Ha egy adott rádiógombot szeretne letiltani, adja hozzá a `disabled` attribútumot a `` komponenshez. ```html Kínai Angol ``` ### Ikon {#example-icon} Az `unchecked-icon` és `checked-icon` attribútumokkal megadhatja a nem kijelölt és kijelölt állapotú rádiógomb Material Icons ikonját. Az `unchecked-icon` és `checked-icon` slotokon keresztül is megadhatja őket. ```html Kínai Angol ``` ## mdui-radio-group API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
disabled disabled true boolean false

A komponens letiltása.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

A rádiógomb-csoport neve, amely az űrlapadatokkal együtt kerül elküldésre.
value value true string ''

A rádiógomb-csoport aktuálisan kiválasztott értéke, amely az űrlapadatokkal együtt kerül elküldésre.
undefined defaultValue false string ''

Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az értékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
required required true boolean false

Az űrlap elküldésekor kötelező-e kiválasztani az egyik rádiógombot.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
change

A kiválasztott érték változásakor aktiválódik.
input

A kiválasztott érték változásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-radio> elemek.
## mdui-radio API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string ''

Az aktuális rádiógomb értéke.
disabled disabled true boolean false

Az aktuális rádiógomb letiltása.
checked checked true boolean false

Az aktuális rádiógomb ki van-e választva.
unchecked-icon uncheckedIcon true string

A nem kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="unchecked-icon" segítségével is.
checked-icon checkedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="checked-icon" segítségével is.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A rádiógomb kiválasztásakor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

Szöveges tartalom.
unchecked-icon

A nem kiválasztott állapot ikonja.
checked-icon

A kiválasztott állapot ikonja.
### CSS Parts
Név Leírás
control

A bal oldali ikon konténere.
unchecked-icon

A nem kiválasztott állapot ikonja.
checked-icon

A kiválasztott állapot ikonja.
label

Szöveges tartalom.
# Tartománycsúszka komponens A tartománycsúszka komponens lehetővé teszi, hogy a felhasználók egy tartományt válasszanak ki egy értéksorozatból. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/range-slider.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Alapértelmezett érték {#example-value} A `value` attribútummal lekérheti vagy beállíthatja a tartománycsúszka aktuális értékét. Ez az attribútum egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani. ```html ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a tartománycsúszkát. ```html ``` ### Tartomány {#example-min-max} A `min` és `max` attribútumokkal állíthatja be a tartománycsúszka minimális és maximális értékét. ```html ``` ### Lépésköz {#example-step} A `step` attribútummal állíthatja be a tartománycsúszka lépésközét. ```html ``` ### Skálajelölések {#example-tickmarks} A `tickmarks` attribútummal megjelenítheti a skálajelöléseket a tartománycsúszkán. ```html ``` ### Szöveges tipp elrejtése {#example-nolabel} A `nolabel` attribútummal elrejtheti a tartománycsúszkán megjelenő szöveges tippet. ```html ``` ### Szöveges tipp módosítása {#example-labelFormatter} A `labelFormatter` JavaScript-tulajdonsággal módosíthatja a szöveges tipp megjelenítési formátumát. Ennek a tulajdonságnak az értéke egy függvény, amelynek paramétere a tartománycsúszka aktuális értéke, és visszatérési értéke a megjeleníteni kívánt szöveg. ```html ``` ## mdui-range-slider API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
undefined defaultValue false number[] []

Alapértelmezett érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
undefined value false number[]

A csúszka értéke, tömb formátumban, amely az űrlapadatokkal együtt kerül elküldésre.

MEGJEGYZÉS: Ez a tulajdonság nem állítható be kezdeti értékként HTML attribútummal, csak a JavaScript tulajdonság módosításával változtatható meg.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
min min true number 0

A csúszka minimális értéke, alapértelmezés szerint 0.
max max true number 100

A csúszka maximális értéke, alapértelmezés szerint 100.
step step true number 1

A lépésköz, alapértelmezés szerint 1.
tickmarks tickmarks true boolean false

Osztásjelek hozzáadása.
nolabel nolabel true boolean false

A szöveges súgó elrejtése.
disabled disabled true boolean false

Letiltott állapotú-e.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

A csúszka neve, amely az űrlapadatokkal együtt kerül elküldésre.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
undefined labelFormatter false (value: number) => string

A címke megjelenítési formátumának testreszabására szolgáló függvény. A függvény paramétere a csúszka aktuális értéke, visszatérési értéke pedig a megjeleníteni kívánt szöveg.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

Az érték megváltozik és elveszti a fókuszt, ekkor aktiválódik ez az esemény.
input

Az érték változásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### CSS Parts
Név Leírás
track-inactive

A nem aktív állapot sávja.
track-active

Az aktív állapot sávja.
handle

Fogantyú.
label

Tipp szöveg.
tickmark

Osztásjel.
# Választómező komponens A választómező komponens egy lenyíló menüben kínál különböző lehetőségeket, megkönnyítve a felhasználó számára a szükséges tartalom gyors kiválasztását. Ez az oldal elsősorban a `` komponens használatát mutatja be. A lenyíló menüpontok használatával kapcsolatban tekintse meg a [``](/hu/docs/2/components/menu#menu-item-api) dokumentációját. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Példa: ```html 1. elem 2. elem ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a választómező változatát. ```html 1. elem 2. elem 1. elem 2. elem ``` ### Többszörös kiválasztás támogatása {#example-multiple} A választómező alapértelmezés szerint egyszerű kiválasztást használ. A `` komponens `value` értéke a kijelölt [``](/hu/docs/2/components/menu#menu-item-api) `value` értéke. A `multiple` attribútummal engedélyezheti a többszörös kiválasztást. Ekkor a `` `value` értéke a kijelölt [``](/hu/docs/2/components/menu#menu-item-api)-ek `value` értékeiből álló tömb lesz. Figyelem: Többszörös kiválasztás esetén a `` `value` értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani. ```html 1. elem 2. elem 3. elem ``` ### Kiegészítő szöveg {#example-helper-text} A `label` attribútummal állíthatja be a választómező feletti címke szövegét. ```html 1. elem 2. elem ``` A `placeholder` attribútummal állíthatja be a helykitöltő szöveget, ha nincs kiválasztott érték. ```html 1. elem 2. elem ``` A `helper` attribútummal állíthatja be a választómező alatti segítő szöveget. A `helper` slotban is beállíthatja a segítő szöveget. ```html 1. elem 2. elem 1. elem 2. elem Kísérő szöveg ``` ### Csak olvasható mód {#example-readonly} A `readonly` attribútummal a választómezőt csak olvasható módba állíthatja. ```html 1. elem 2. elem ``` ### Letiltott mód {#example-disabled} A `disabled` attribútummal letilthatja a választómezőt. ```html 1. elem 2. elem ``` ### Törölhető {#example-clearable} A `clearable` attribútummal a választómező jobb oldalán törlés gomb jelenik meg, ha van kiválasztott érték. ```html 1. elem 2. elem ``` A `clear` slot használatával testreszabhatja a törlés gombot. ```html 1. elem 2. elem ``` ### Lenyíló menü pozíciója {#example-placement} A `placement` attribútummal beállíthatja a lenyíló menü pozícióját. ```html 1. elem 2. elem ``` ### Szöveg jobbra igazítása {#example-end-aligned} Az `end-aligned` attribútummal jobbra igazíthatja a szöveget. ```html 1. elem 2. elem ``` ### Előtag és utótag szövegek és ikonok {#example-prefix-suffix} Az `icon` és `end-icon` attribútumokkal Material Icons ikonokat adhat a választómező elejére és végére. Az `icon` és `end-icon` slotokban is megadhat elemeket a választómező elejére és végére. ```html 1. elem 2. elem

1. elem 2. elem ``` A `prefix` és `suffix` attribútumokkal kiegészítő szövegeket adhat a választómező elejére és végére. A `prefix` és `suffix` slotokban is megadhat szöveges elemeket a választómező elejére és végére. Ezek a szövegek csak akkor jelennek meg, ha a választómező fókuszban van vagy van értéke. ```html 1. elem 2. elem

1. elem 2. elem $ /100 ``` ## mdui-select API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'filled' | 'outlined' 'filled'

A választómező variánsa. Lehetséges értékek:

  • filled: Háttérszínnel rendelkező választómező, erősebb vizuális hatás
  • outlined: Keretes választómező, gyengébb vizuális hatás
multiple multiple true boolean false

Több kiválasztás támogatása.
name name true string ''

A választómező neve, amely az űrlapadatokkal együtt kerül elküldésre.
value value false string | string[] ''

A választómező értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Ha a multiple attribútum nincs megadva, az érték karakterlánc; ha a multiple attribútum meg van adva, az érték karakterláncok tömbje. A HTML attribútum csak karakterlánc értéket állíthat be; ha tömb értéket kell beállítani, azt a JavaScript tulajdonságon keresztül kell megtenni.
undefined defaultValue false string | string[] ''

Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
label label true string

Címke szöveg.
placeholder placeholder true string

Helyőrző szöveg.
helper helper true string

A választómező alján található súgó szöveg. Beállítható a slot="helper" segítségével is.
clearable clearable true boolean false

A választómező tartalma törölhető-e.
clear-icon clearIcon true string

Ha a választómező törölhető, a jobb oldalon megjelenő törlés gomb Material Icons ikonjának neve. Beállítható a slot="clear-icon" segítségével is.
placement placement true 'auto' | 'bottom' | 'top' 'auto'

A választómező pozíciója. Lehetséges értékek:

  • auto: Automatikus pozíció meghatározás
  • bottom: Alul
  • top: Felül
end-aligned endAligned true boolean false

A szöveg jobbra legyen-e igazítva.
prefix prefix true string

A választómező előtag szövege. Csak fókusz állapotban, vagy ha a választómezőnek van értéke, jelenik meg. Beállítható a slot="prefix" segítségével is.
suffix suffix true string

A választómező utótag szövege. Csak fókusz állapotban, vagy ha a választómezőnek van értéke, jelenik meg. Beállítható a slot="suffix" segítségével is.
icon icon true string

A választómező előtag ikonjának Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
end-icon endIcon true string

A választómező utótag ikonjának Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
error-icon errorIcon true string

Az űrlapmező ellenőrzésének sikertelenségekor a választómező jobb oldalán megjelenő Material Icons ikon neve. Beállítható a slot="error-icon" segítségével is.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
readonly readonly true boolean false

Csak olvasható állapotban van-e.
disabled disabled true boolean false

Letiltott állapotú-e.
required required true boolean false

Az űrlap elküldésekor kötelező-e kitölteni ezt a mezőt.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A kiválasztott érték változásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
clear

A clearable attribútum által generált törlés gombra kattintáskor aktiválódik. Az event.preventDefault() meghívásával megakadályozható a választómező tartalmának törlése.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-menu-item> elemek.
icon

Bal oldali ikon.
end-icon

Jobb oldali ikon.
error-icon

Ellenőrzési hiba állapot jobb oldali ikonja.
prefix

Bal oldali szöveg.
suffix

Jobb oldali szöveg.
clear-button

Törlés gomb.
clear-icon

A törlés gombban lévő ikon.
helper

Az alsó súgó szöveg.
### CSS Parts
Név Leírás
chips

Több kiválasztás esetén a kiválasztott értékek chipjeit tartalmazó konténer.
chip

Több kiválasztás esetén az egyes kiválasztott értékek chipjei.
chip__button

A chip belső <button> eleme.
chip__label

A chip belső szövege.
chip__delete-icon

A chip belső törlés ikonja.
text-field

A szövegmező, azaz a <mdui-text-field> elem.
text-field__container

A text-field belső szövegmező konténere.
text-field__icon

A text-field belső bal oldali ikonja.
text-field__end-icon

A text-field belső jobb oldali ikonja.
text-field__error-icon

A text-field belső ellenőrzési hiba állapot jobb oldali ikonja.
text-field__prefix

A text-field belső bal oldali szövege.
text-field__suffix

A text-field belső jobb oldali szövege.
text-field__label

A text-field belső címke szövege.
text-field__input

A text-field belső <input> eleme.
text-field__clear-button

A text-field belső törlés gombja.
text-field__clear-icon

A text-field belső törlés gombjában lévő ikon.
text-field__supporting

A text-field belső alsó súgó információk konténere, beleértve a helper-t és a hibát.
text-field__helper

A text-field belső alsó súgó szövege.
text-field__error

A text-field belső alsó hibaleíró szövege.
menu

A legördülő menü, azaz a <mdui-menu> elem.
# Szegmentált gomb komponens A szegmentált gomb komponens egy gombcsoportot foglal magába, amely lehetőségek biztosítására, nézetek váltására vagy elemek rendezésére szolgál. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Példa: ```html Nap Hét Hónap ``` ## Példák {#examples} ### Teljes szélességű megjelenítés {#example-full-width} A `full-width` attribútummal a `` elem kitölti a rendelkezésre álló teljes szélességet. ```html Nap Hét Hónap ``` ### Egyszerű kiválasztás mód {#example-selects-single} Adja meg a `selects` attribútumot `single` értékkel a `` elemen az egyszerű kiválasztás mód aktiválásához. Ekkor a `` `value` attribútumának értéke a kijelölt `` `value` attribútumának értéke. ```html Nap Hét Hónap Nap Hét Hónap ``` ### Többszörös kiválasztás mód {#example-selects-multiple} Adja meg a `selects` attribútumot `multiple` értékkel a `` elemen a többszörös kiválasztás mód aktiválásához. Ekkor a `` `value` attribútumának értéke a kijelölt ``-ek `value` attribútumainak értékeiből álló tömb. Figyelem: Többszörös kiválasztás módban a `` `value` attribútumának értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani. ```html Nap Hét Hónap Nap Hét Hónap ``` ### Ikon {#example-icon} A `` elemen az `icon` és `end-icon` attribútumokkal Material Icons ikonokat adhat a gomb bal és jobb oldalán. Az `icon` és `end-icon` slotokon keresztül is hozzáadhat elemeket a gomb bal és jobb oldalához. ```html Nap Hét Hónap ``` A `` elemen a `selected-icon` attribútum hozzáadásával beállíthatja a kijelölt állapot Material Icons ikonját. A `selected-icon` sloton keresztül is beállíthatja. ```html Nap Hét ``` ### Link {#example-link} A `` elemen a `href` attribútum beállításával a gomb linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: `download`, `target`, `rel`. ```html Link Hét Hónap ``` ### Letiltott és betöltési állapot {#example-disabled} A `` elemen a `disabled` attribútum hozzáadásával letilthatja az egész szegmentált gombcsoportot. ```html Nap Hét Hónap ``` A `` elemen a `disabled` attribútum hozzáadásával letilthat egy adott gombot; a `loading` attribútum hozzáadásával betöltési állapotot adhat hozzá egy adott gombhoz. ```html Nap Hét Hónap Év ``` ## mdui-segmented-button-group API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
full-width fullWidth true boolean false

Kitölti-e a szülőelem teljes szélességét.
selects selects true 'single' | 'multiple'

A szegmentált gombok kiválaszthatósági állapota, alapértelmezés szerint nem választhatók ki. Lehetséges értékek:

  • single: Egy választható
  • multiple: Több választható
disabled disabled true boolean false

Letiltott állapotú-e.
required required true boolean false

Az űrlap elküldésekor kötelező-e kiválasztani.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

Az űrlap elküldésekor használandó név, amely az űrlapadatokkal együtt kerül elküldésre.
value value false string | string[] ''

Az aktuálisan kiválasztott <mdui-segmented-button> értéke.

Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha a selects="single". Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha a selects="single", és karakterláncok tömbje, ha a selects="multiple". Tehát ha a selects="multiple", akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
undefined defaultValue false string | string[] ''

Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
change

A kiválasztott érték változásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-segmented-button> komponens.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
## mdui-segmented-button API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
icon icon true string

A bal oldali Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
end-icon endIcon true string

A jobb oldali Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
selected-icon selectedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="selected-icon" segítségével is.
href href true string

A hivatkozás cél URL-je.

Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
download download true string

A letöltési hivatkozás célja.

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
target target true '_blank' | '_parent' | '_self' | '_top'

A hivatkozás megnyitásának módja. A lehetséges értékek:

  • _blank: Új ablakban nyitja meg a hivatkozást
  • _parent: A szülő keretben nyitja meg a hivatkozást
  • _self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást
  • _top: A teljes ablakban nyitja meg a hivatkozást

Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:

  • alternate: Az aktuális dokumentum alternatív verziója
  • author: Az aktuális dokumentum vagy cikk szerzője
  • bookmark: Állandó hivatkozás a legközelebbi ős szakaszra
  • external: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum
  • help: Hivatkozás egy kapcsolódó súgó dokumentumra
  • license: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik
  • me: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli
  • next: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma
  • nofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért
  • noreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásához
  • opener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextust
  • prev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma
  • search: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható
  • tag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)

Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
disabled disabled true boolean false

Letiltott állapotú-e.
loading loading true boolean false

Betöltési állapotban van-e.
name name true string ''

A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
value value true string ''

A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
type type true 'submit' | 'reset' | 'button' 'button'

A gomb típusa. Alapértelmezés szerint button. Lehetséges típusok:

  • submit: Az űrlap elküldése a szervernek
  • reset: Az űrlap összes mezőjének visszaállítása az alapértékre
  • button: Nincs alapértelmezett viselkedés

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva.
formaction formAction true string

Megadja az űrlap elküldéséhez használandó URL-t.

Ha ez az attribútum meg van adva, felülírja a <form> elem action attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:

  • application/x-www-form-urlencoded: Az alapértelmezett érték
  • multipart/form-data: Akkor használandó, ha az űrlap <input type="file"> elemet tartalmaz
  • text/plain: A HTML5-ben bevezetve, hibakereséshez használható

Ha ez az attribútum meg van adva, felülírja a <form> elem enctype attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formmethod formMethod true 'post' | 'get'

Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:

  • post: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre
  • get: Az űrlapadatok ? elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz

Ha ez az attribútum meg van adva, felülírja a <form> elem method attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formnovalidate formNoValidate true boolean false

Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt.

Ha ez az attribútum meg van adva, felülírja a <form> elem novalidate attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:

  • _self: Alapértelmezett opció, az aktuális keretben nyílik meg
  • _blank: Új ablakban nyílik meg
  • _parent: A szülő keretben nyílik meg
  • _top: A teljes ablakban nyílik meg

Ha ez az attribútum meg van adva, felülírja a <form> elem target attribútumát.

Megjegyzés: Csak akkor érvényes, ha a href attribútum nincs megadva és type="submit".
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A szegmentált gomb szöveges tartalma.
icon

A szegmentált gomb bal oldali ikonja.
selected-icon

A kiválasztott állapot bal oldali ikonja.
end-icon

A szegmentált gomb jobb oldali ikonja.
### CSS Parts
Név Leírás
button

A belső <button> vagy <a> elem.
icon

A bal oldali ikon.
selected-icon

A kiválasztott állapot bal oldali ikonja.
end-icon

A jobb oldali ikon.
label

Szöveges tartalom.
loading

A betöltési állapotot jelző <mdui-circular-progress> elem.
# Csúszka komponens A csúszka komponens lehetővé teszi, hogy a felhasználók a csúszka mozgatásával válasszanak ki egy értéket egy értéksorozatból. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/slider.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Alapértelmezett érték {#example-value} A `value` attribútummal lekérheti vagy beállíthatja a csúszka aktuális értékét. ```html ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a csúszkát. ```html ``` ### Tartomány {#example-min-max} A `min` és `max` attribútumokkal állíthatja be a csúszka minimális és maximális értékét. ```html ``` ### Lépésköz {#example-step} A `step` attribútummal állíthatja be a csúszka lépésközét. ```html ``` ### Skálajelölések {#example-tickmarks} A `tickmarks` attribútummal megjelenítheti a skálajelöléseket a csúszkán. ```html ``` ### Szöveges tipp elrejtése {#example-nolabel} A `nolabel` attribútummal elrejtheti a csúszkán megjelenő szöveges tippet. ```html ``` ### Szöveges tipp módosítása {#example-labelFormatter} A `labelFormatter` JavaScript-tulajdonsággal módosíthatja a szöveges tipp megjelenítési formátumát. Ennek a tulajdonságnak az értéke egy függvény, amely a csúszka aktuális értékét veszi paraméterül, és visszatérési értéke a megjeleníteni kívánt szöveg. ```html ``` ## mdui-slider API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value false number 0

A csúszka értéke, amely az űrlapadatokkal együtt kerül elküldésre.
undefined defaultValue false number 0

Alapértelmezett érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
min min true number 0

A csúszka minimális értéke, alapértelmezés szerint 0.
max max true number 100

A csúszka maximális értéke, alapértelmezés szerint 100.
step step true number 1

A lépésköz, alapértelmezés szerint 1.
tickmarks tickmarks true boolean false

Osztásjelek hozzáadása.
nolabel nolabel true boolean false

A szöveges súgó elrejtése.
disabled disabled true boolean false

Letiltott állapotú-e.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

A csúszka neve, amely az űrlapadatokkal együtt kerül elküldésre.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
undefined labelFormatter false (value: number) => string

A címke megjelenítési formátumának testreszabására szolgáló függvény. A függvény paramétere a csúszka aktuális értéke, visszatérési értéke pedig a megjeleníteni kívánt szöveg.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

Az érték megváltozik és elveszti a fókuszt, ekkor aktiválódik ez az esemény.
input

Az érték változásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### CSS Parts
Név Leírás
track-inactive

A nem aktív állapot sávja.
track-active

Az aktív állapot sávja.
handle

Fogantyú.
label

Tipp szöveg.
tickmark

Osztásjel.
# Snackbar komponens A Snackbar rövid állapotüzenetek megjelenítésére szolgál az oldalon. A komponens közvetlen használata mellett az mdui egy [`mdui.snackbar`](/hu/docs/2/functions/snackbar) függvényt is biztosít, amely leegyszerűsíti a Snackbar komponens használatát. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/snackbar.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Példa: ```html Fotó archiválva Snackbar megnyitása ``` ## Példák {#examples} ### Pozíció {#example-placement} A `placement` attribútummal beállíthatja a Snackbar megjelenési pozícióját. ```html
Fotó archiválva top-start Fotó archiválva top Fotó archiválva top-end
Fotó archiválva bottom-start Fotó archiválva bottom Fotó archiválva bottom-end
``` ### Műveleti gomb {#example-action} Az `action` attribútummal műveleti gombot adhat a Snackbar jobb oldalához, és az attribútummal adhatja meg a gomb szövegét. A műveleti gombra kattintva az `action-click` esemény aktiválódik. Ha azt szeretné, hogy a műveleti gomb betöltési állapotot mutasson, adja hozzá az `action-loading` attribútumot. ```html Fotó archiválva Snackbar megnyitása ``` Az `action` slot használatával egyéni elemet is hozzáadhat a Snackbar jobb oldalához. ```html Fotó archiválva Visszavonás Snackbar megnyitása ``` ### Bezárható {#example-closeable} A `closeable` attribútummal bezárás gomb jelenik meg a Snackbar jobb oldalán. A gombra kattintva a Snackbar bezáródik, és a `close` esemény aktiválódik. ```html Fotó archiválva Snackbar megnyitása ``` A `close-button` slot használatával testreszabhatja a bezárás gomb elemét. ```html Fotó archiválva Snackbar megnyitása ``` A `close-icon` attribútummal módosíthatja az alapértelmezett bezárás gomb Material Icons ikonját. A `close-icon` slot használatával testreszabhatja a bezárás gomb ikonjának elemét. ```html Fotó archiválva Snackbar megnyitása ``` ### Szövegsorok száma {#example-message-line} Alapértelmezés szerint az üzenetszövegnek nincs sorkorlátozása. A `message-line` attribútummal korlátozhatja a szövegsorok számát, legfeljebb 2 sorig. ```html Az elem már tartalmazza a „travel” címkét. Hozzáadhat egy új címkét. Hozzáadhat egy új címkét. Snackbar megnyitása ``` ### Automatikus bezárás késleltetése {#example-auto-close-delay} Az `auto-close-delay` attribútummal beállíthatja az automatikus bezárás késleltetését ezredmásodpercben. Az alapértelmezett érték 5000 ezredmásodperc. ```html Fotó archiválva Snackbar megnyitása ``` ### Kattintás a külső területre bezáráshoz {#example-close-on-outside-click} A `close-on-outside-click` attribútum hozzáadásával beállíthatja, hogy a Snackbar a Snackbar-on kívüli területre kattintva bezáródjon. ```html Fotó archiválva Snackbar megnyitása ``` ## mdui-snackbar API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
open open true boolean false

A Snackbar látható-e.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

A Snackbar megjelenési helye. Alapértelmezés szerint bottom. Lehetséges értékek:

  • top: Felül, középre igazítva
  • top-start: Felül, balra igazítva
  • top-end: Felül, jobbra igazítva
  • bottom: Alul, középre igazítva
  • bottom-start: Alul, balra igazítva
  • bottom-end: Alul, jobbra igazítva
action action true string

A műveleti gomb szövege. A műveleti gomb beállítható a slot="action" segítségével is.
action-loading actionLoading true boolean false

A műveleti gomb betöltési állapotban van-e.
closeable closeable true boolean false

Megjelenjen-e a jobb oldalon egy bezárás gomb.
close-icon closeIcon true string

A bezárás gomb Material Icons ikonjának neve. Beállítható a slot="close-icon" segítségével is.
message-line messageLine true 1 | 2

Az üzenet szövegének maximális megjelenítési sorainak száma. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek:

  • 1: Legfeljebb egy sor
  • 2: Legfeljebb két sor
auto-close-delay autoCloseDelay true number 5000

Az automatikus bezárás késleltetése (ezredmásodpercben). 0 értékre állítva nem záródik be automatikusan. Alapértelmezés szerint 5000 ezredmásodperc.
close-on-outside-click closeOnOutsideClick true boolean false

A Snackbar területén kívülre kattintva vagy érintve bezáródik-e a Snackbar.
### Események
Név Leírás
open

A Snackbar megjelenítésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a Snackbar megjelenítése.
opened

A Snackbar megjelenítési animációjának befejezésekor aktiválódik az esemény.
close

A Snackbar elrejtésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a Snackbar bezárása.
closed

A Snackbar elrejtési animációjának befejezésekor aktiválódik az esemény.
action-click

A műveleti gombra kattintáskor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A Snackbar üzenet szöveges tartalma.
action

A jobb oldali műveleti gomb.
close-button

A jobb oldali bezárás gomb. Csak akkor jelenik meg, ha a closeable attribútum true-ra van állítva.
close-icon

A bezárás gombban lévő ikon.
### CSS Parts
Név Leírás
message

Üzenet szöveg.
action

Műveleti gomb.
close-button

Bezárás gomb.
close-icon

A bezárás gombban lévő ikon.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Kapcsoló komponens A kapcsoló egyetlen beállítás gyors be- vagy kikapcsolására szolgál, így a felhasználó egyszerűen módosíthatja az adott opció állapotát. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/switch.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Kijelölt állapot {#example-checked} Amikor a kapcsoló ki van jelölve, a `checked` attribútum értéke `true`. A `checked` attribútummal a kapcsoló alapértelmezés szerint kijelölt állapotú lehet. ```html ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a kapcsoló komponenst. ```html ``` ### Ikon {#example-icon} Az `unchecked-icon` attribútummal beállíthatja a nem kijelölt állapot Material Icons ikonját, a `checked-icon` attribútummal pedig a kijelölt állapot Material Icons ikonját. Az `unchecked-icon` és `checked-icon` slotokon keresztül is testreszabhatja a nem kijelölt és kijelölt állapot ikonelemeit. ```html ``` ## mdui-switch API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
disabled disabled true boolean false

Letiltott állapotú-e.
checked checked true boolean false

Be van-e kapcsolva.
undefined defaultChecked false boolean false

Alapértelmezett bekapcsolt állapot. Az űrlap visszaállításakor erre az állapotra áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
unchecked-icon uncheckedIcon true string

A nem kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="unchecked-icon" segítségével is.
checked-icon checkedIcon true string

A kiválasztott állapot Material Icons ikonjának neve. Beállítható a slot="checked-icon" segítségével is.

Alapértelmezés szerint a check ikon, üres karakterlánc átadásával eltávolítható az alapértelmezett ikon.
required required true boolean false

Az űrlap elküldésekor kötelező-e bekapcsolni ezt a kapcsolót.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
name name true string ''

A kapcsoló neve, amely az űrlapadatokkal együtt kerül elküldésre.
value value true string 'on'

A kapcsoló értéke, amely az űrlapadatokkal együtt kerül elküldésre.
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A kiválasztott állapot megváltozásakor aktiválódik.
input

A kiválasztott állapot megváltozásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
### Slots
Név Leírás
unchecked-icon

A nem kiválasztott állapot elemei.
checked-icon

A kiválasztott állapot elemei.
### CSS Parts
Név Leírás
track

Sáv.
thumb

Ikon konténere.
unchecked-icon

A nem kiválasztott állapot ikonja.
checked-icon

A kiválasztott állapot ikonja.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sávjának sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--shape-corner-thumb

A komponens ikon konténerének sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
# Fülek komponens A fülek komponens tartalmak vagy adatkészletek csoportosítására és megjelenítésére szolgál, megkönnyítve a felhasználók számára a különböző kategóriák közötti gyors váltást. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Példa: ```html 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel ``` ## Példák {#examples} ### Változat {#example-variant} A `` komponensen a `variant` attribútummal beállíthatja a fülek változatát. ```html 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel ``` ### Fülek pozíciója {#example-placement} A `` komponensen a `placement` attribútummal beállíthatja a fülek pozícióját. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel ``` ### Teljes szélességű megjelenítés {#example-full-width} A `full-width` attribútummal a fülek kitöltik a teljes szélességet, és egyenlő helyet kapnak. ```html 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel ``` ### Ikon {#example-icon} A `` komponensen az `icon` attribútummal Material Icons ikont adhat a fülhöz. Az `icon` sloton keresztül is hozzáadhat ikonelemet. Az `inline` attribútummal az ikon és a szöveg vízszintesen rendezhető el. ```html 1. fül 2. fül 3. fül 1. panel 2. panel 3. panel ``` ### Badge {#example-badge} A `` komponensben a `badge` slotban adhat hozzá badge-et. ```html 1. fül 99+ 2. fül 3. fül 1. panel 2. panel 3. panel ``` ### Egyéni tartalom {#example-custom} A `` komponensben a `custom` slotban teljesen testreszabhatja a fül tartalmát. ```html 1. fül Ikon 2. fül 3. fül 1. panel 2. panel 3. panel ``` ## mdui-tab-panel API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string

A fülpanel értéke.
### Slots
Név Leírás
(alapértelmezett)

A fülpanel tartalma.
## mdui-tab API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
value value true string

A fül értéke.
icon icon true string

Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
inline inline true boolean false

Az ikon és a szöveg vízszintesen legyen-e elrendezve.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A fül szöveges tartalma.
icon

A fül ikonja.
badge

Jelvény.
custom

A teljes fül tartalmának testreszabása.
### CSS Parts
Név Leírás
container

A fül konténere.
icon

A fül ikonja.
label

A fül szövege.
## mdui-tabs API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'primary' | 'secondary' 'primary'

A fülek variánsa. Lehetséges értékek:

  • primary: A <mdui-top-app-bar> alatt található, az alkalmazás főoldalainak váltására szolgáló forgatókönyvekhez
  • secondary: Az oldalon belül található, kapcsolódó tartalomcsoportok váltására szolgáló forgatókönyvekhez
value value true string

Az aktuálisan aktív <mdui-tab> értéke.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

A fülek pozíciója. Alapértelmezés szerint top-start. Lehetséges értékek:

  • top-start: Fent, balra igazítva
  • top: Fent, középre igazítva
  • top-end: Fent, jobbra igazítva
  • bottom-start: Lent, balra igazítva
  • bottom: Lent, középre igazítva
  • bottom-end: Lent, jobbra igazítva
  • left-start: Balra, felülre igazítva
  • left: Balra, középre igazítva
  • left-end: Balra, alulra igazítva
  • right-start: Jobbra, felülre igazítva
  • right: Jobbra, középre igazítva
  • right-end: Jobbra, alulra igazítva
full-width fullWidth true boolean false

Kitölti-e a szülőelem teljes szélességét.
### Események
Név Leírás
change

A kiválasztott érték változásakor aktiválódik.
### Slots
Név Leírás
(alapértelmezett)

A <mdui-tab> elemek.
panel

A <mdui-tab-panel> elemek.
### CSS Parts
Név Leírás
container

A <mdui-tab> elemek konténere.
indicator

Aktív állapot jelző.
# Szövegmező komponens A szövegmező lehetővé teszi, hogy a felhasználók szöveget írjanak be, jellemzően űrlapokban és párbeszédablakokban. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/text-field.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Példa: ```html ``` ## Példák {#examples} ### Változat {#example-variant} A `variant` attribútummal állíthatja be a szövegmező változatát. ```html

``` ### Kiegészítő szöveg {#example-helper-text} A `label` attribútummal állíthatja be a szövegmező feletti címke szövegét. ```html ``` A `placeholder` attribútummal állíthatja be a helykitöltő szöveget, ha nincs érték. ```html ``` A `helper` attribútummal adhat meg segítőszöveget a szövegmező alatt. A `helper` sloton keresztül is megadhatja ezt a szöveget. A `helper-on-focus` attribútummal a segítőszöveg csak akkor jelenik meg, ha a mező fókuszban van. ```html Segítő szöveg ``` ### Törölhető {#example-clearable} A `clearable` attribútummal a szövegmező jobb oldalán törlés gomb jelenik meg, ha a mezőnek van értéke. ```html ``` ### Szöveg jobbra igazítása {#example-end-aligned} Az `end-aligned` attribútummal jobbra igazíthatja a szöveget. ```html ``` ### Előtag és utótag szövegek és ikonok {#example-prefix-suffix} Az `icon` és `end-icon` attribútumokkal Material Icons ikonokat adhat a szövegmező elejére és végére. Az `icon` és `end-icon` slotokban is megadhat elemeket a szövegmező elejére és végére. ```html

``` A `prefix` és `suffix` attribútumokkal kiegészítő szövegeket adhat a szövegmező elejére és végére. A `prefix` és `suffix` slotokban is megadhat szöveges elemeket a szövegmező elejére és végére. Ezek a szövegek csak akkor jelennek meg, ha a szövegmező fókuszban van vagy van értéke. ```html

$ /100 ``` ### Csak olvasható mód {#example-readonly} A `readonly` attribútummal a szövegmezőt csak olvasható módba állíthatja. ```html ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a szövegmezőt. ```html ``` ### Többsoros szövegmező {#example-rows} A `rows` attribútummal beállíthatja a többsoros szövegmező sorainak számát. ```html ``` Az `autosize` attribútummal a szövegmező automatikusan igazodjon a beírt tartalom hosszához. A `min-rows` és `max-rows` attribútumokkal megadhatja az automatikus méretezés minimális és maximális sorainak számát. ```html

``` ### Karakterszámláló {#example-counter} Ha a `maxlength` attribútummal beállította a maximális karakterszámot, adja hozzá a `counter` attribútumot a karakterszámláló megjelenítéséhez a szövegmező alatt. ```html ``` ### Jelszómező {#example-password} Ha a `type="password"` be van állítva, adja hozzá a `toggle-password` attribútumot a jelszó láthatóságát váltó gomb megjelenítéséhez a szövegmező jobb oldalán. ```html ``` ## mdui-text-field API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'filled' | 'outlined' 'filled'

A szövegmező variánsa. Alapértelmezés szerint filled. Lehetséges értékek:

  • filled: Háttérszínnel rendelkező szövegmező, erősebb vizuális hatás
  • outlined: Keretes szövegmező, gyengébb vizuális hatás
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

A szövegmező beviteli típusa. Alapértelmezés szerint text. Lehetséges értékek:

  • text: Alapértelmezett érték. Szöveges mező
  • number: Csak számok bevitelére alkalmas. A dinamikus billentyűzettel rendelkező eszközökön számbillentyűzet jelenik meg
  • password: Jelszó bevitelére szolgál, az érték el van fedve
  • url: URL bevitelére szolgál, ellenőrzi az URL formátumát. A dinamikus billentyűzetet támogató eszközökön a megfelelő billentyűzet jelenik meg
  • email: E-mail cím bevitelére szolgál, ellenőrzi az e-mail formátumot. A dinamikus billentyűzetet támogató eszközökön a megfelelő billentyűzet jelenik meg
  • search: Keresőmezőhöz. A dinamikus billentyűzettel rendelkező eszközökön az Enter ikon keresés ikonra változik
  • tel: Telefonszám bevitelére szolgál. A dinamikus billentyűzettel rendelkező eszközökön telefonszám billentyűzet jelenik meg
  • hidden: Elrejti a vezérlőt, de az értéke továbbra is elküldésre kerül a szerverre
  • date: Dátum bevitelére szolgáló vezérlő (év, hónap, nap, idő nélkül). Támogatott böngészőkben aktiválva megnyitja a dátumválasztót vagy az év/hónap/nap görgetőt
  • datetime-local: Dátum és idő bevitelére szolgáló vezérlő, időzóna nélkül. Támogatott böngészőkben aktiválva megnyitja a dátumválasztót vagy az év/hónap/nap görgetőt
  • month: Év és hónap bevitelére szolgáló vezérlő, időzóna nélkül
  • time: Idő bevitelére szolgáló vezérlő, időzóna nélkül
  • week: Év és hét számából álló dátum bevitelére szolgáló vezérlő, időzóna nélkül
name name true string ''

A szövegmező neve, amely az űrlapadatokkal együtt kerül elküldésre.
value value false string ''

A szövegmező értéke, amely az űrlapadatokkal együtt kerül elküldésre.
undefined defaultValue false string ''

Alapértelmezett érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
label label true string

Címke szöveg.
placeholder placeholder true string

Helyőrző szöveg.
helper helper true string

A szövegmező alján található súgó szöveg. Beállítható a slot="helper" segítségével is.
helper-on-focus helperOnFocus true boolean false

Csak fókusz megszerzésekor jelenjen-e meg az alsó súgó szöveg.
clearable clearable true boolean false

A szövegmező tartalma törölhető-e.
clear-icon clearIcon true string

Ha a szövegmező törölhető, a jobb oldalon megjelenő törlés gomb Material Icons ikonjának neve. Beállítható a slot="clear-icon" segítségével is.
end-aligned endAligned true boolean false

A szöveg jobbra legyen-e igazítva.
prefix prefix true string

A szövegmező előtag szövege. Csak akkor jelenik meg, ha a szövegmező fókuszban van, vagy van értéke. Beállítható a slot="prefix" segítségével is.
suffix suffix true string

A szövegmező utótag szövege. Csak akkor jelenik meg, ha a szövegmező fókuszban van, vagy van értéke. Beállítható a slot="suffix" segítségével is.
icon icon true string

A szövegmező előtag ikonjának Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
end-icon endIcon true string

A szövegmező utótag ikonjának Material Icons ikon neve. Beállítható a slot="end-icon" segítségével is.
error-icon errorIcon true string

Az űrlapmező ellenőrzésének sikertelenségekor a szövegmező jobb oldalán megjelenő Material Icons ikon neve. Beállítható a slot="error-icon" segítségével is.
form form true string

A kapcsolódó <form> elem. Ennek az attribútumnak az értéke egy <form> elem id-ja kell legyen ugyanazon az oldalon.

Ha ez az attribútum nincs megadva, az elemnek a <form> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <form> elem gyermekeként.
readonly readonly true boolean false

Csak olvasható módban van-e.
disabled disabled true boolean false

A beviteli mező letiltása.
required required true boolean false

Az űrlap elküldésekor kötelező-e kitölteni ezt a mezőt.
rows rows true number

A szövegmező rögzített megjelenítési sorainak száma.
autosize autosize true boolean false

A szövegmező magassága automatikusan igazodik-e a beviteli tartalomhoz.
min-rows minRows true number

A szövegmező minimális sorainak száma, ha az autosize true.
max-rows maxRows true number

A szövegmező maximális sorainak száma, ha az autosize true.
minlength minlength true number

A megengedett minimális karakterszám.
maxlength maxlength true number

A megengedett maximális karakterszám.
counter counter true boolean false

A karakterszámláló megjelenítése, csak akkor érvényes, ha a maxlength meg van adva.
min min true number

Ha a type number, a megengedett minimális számérték.
max max true number

Ha a type number, a megengedett maximális számérték.
step step true number

Ha a type number, a szám növelésének/csökkentésének lépésköze.
pattern pattern true string

Az űrlap-ellenőrzéshez használt reguláris kifejezés.
toggle-password togglePassword true boolean false

Ha a type password, ennek az attribútumnak a beállításával egy váltógomb kerül hozzáadásra, amely a szöveg és a jelszó között vált.
show-password-icon showPasswordIcon true string

A jelszó váltógomb Material Icons ikonja, amely akkor jelenik meg, ha a jelszó szövegként látható. Beállítható a slot="show-password-icon" segítségével is.
hide-password-icon hidePasswordIcon true string

A jelszó váltógomb Material Icons ikonja, amely akkor jelenik meg, ha a jelszó el van fedve. Beállítható a slot="hide-password-icon" segítségével is.
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Az iOS nem szabványos attribútuma, amely a szöveg első betűjének automatikus nagybetűs írását szabályozza. Az iOS5 és későbbi verziókon érvényes. Lehetséges értékek:

  • none: Az első betű nagybetűs írásának letiltása
  • sentences: A mondatok első betűje nagybetűs
  • words: A szavak első betűje nagybetűs
  • characters: Minden betű nagybetűs
autocorrect autocorrect true string

Az input elem autocorrect attribútuma.
autocomplete autocomplete true string

Az input elem autocomplete attribútuma.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Az input elem enterkeyhint attribútuma, amely az Enter billentyű megjelenített szövegének vagy ikonjának testreszabására szolgál a virtuális billentyűzeten. A tényleges megjelenítés a felhasználó eszközétől és nyelvétől függ. Lehetséges értékek:

  • enter: Új sor beszúrása
  • done: Bevitel befejezése, virtuális billentyűzet bezárása
  • go: Navigálás a beírt szöveg céljához
  • next: Ugrás a következő beviteli mezőre
  • previous: Ugrás az előző beviteli mezőre
  • search: Navigálás a keresési eredményekhez
  • send: Szöveges üzenet küldése
spellcheck spellcheck true boolean false

A helyesírás-ellenőrzés engedélyezve van-e.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Az input elem inputmode attribútuma, amely a virtuális billentyűzet típusát testreszabására szolgál. Lehetséges értékek:

  • none: Nincs virtuális billentyűzet. Hasznos, ha saját billentyűzetbeviteli vezérlőt kell megvalósítani
  • text: Normál szövegbeviteli billentyűzet
  • decimal: Tizedes szám beviteli billentyűzet, a számokon kívül lehet tizedespont . vagy ezreselválasztó vessző ,
  • numeric: 0-9 számok megjelenítése
  • tel: Telefonos számbillentyűzet, 0-9 számokat, csillag * vagy kettőskereszt # billentyűket tartalmaz
  • search: Keresőbevitelre optimalizált virtuális billentyűzet, a küldés gomb általában search vagy "Keresés" feliratú
  • email: E-mail cím bevitelére optimalizált virtuális billentyűzet, általában tartalmaz @ . stb. billentyűket
  • url: URL bevitelére optimalizált virtuális billentyűzet, általában tartalmaz . / # stb. billentyűket
undefined validity false ValidityState

Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: ValidityState
undefined validationMessage false string

Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
undefined valueAsNumber false number

Lekéri az aktuális értéket, és number típusra alakítja át; vagy beállít egy number típusú értéket. Ha az érték nem alakítható át number típusra, NaN értéket ad vissza.
autofocus autofocus true boolean false

Automatikusan fókuszt kapjon-e betöltődés után.
tabindex tabIndex false number

Az elem sorszáma a Tab billentyűvel történő navigálás során.
### Metódusok
Név Leírás
select(): void

Kijelöli a szövegmezőben lévő szöveget.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Kijelöli a szövegmezőben lévő szöveg egy adott tartományát.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

A szövegmezőben lévő szöveg adott tartományát lecseréli új szövegre.
checkValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza és kiváltja az invalid eseményt; ha igen, true értéket ad vissza.
reportValidity(): boolean

Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, false értéket ad vissza, kiváltja az invalid eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, true értéket ad vissza.

Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
setCustomValidity(message: string): void

Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
click(): void

Egérkattintás szimulálása az elemen.
focus(options?: FocusOptions): void

Fókusz állítása az aktuális elemre.

Egy objektum is átadható paraméterként, a következő tulajdonságokkal:

  • preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
blur(): void

Fókusz eltávolítása az aktuális elemről.
### Események
Név Leírás
focus

Fókusz elnyerésekor aktiválódik.
blur

Fókusz elvesztésekor aktiválódik.
change

A szövegmező értékének megváltozásakor és a fókusz elvesztésekor aktiválódik.
input

A szövegmező értékének megváltozásakor aktiválódik.
invalid

Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
clear

A clearable attribútum által generált törlés gombra kattintáskor aktiválódik. Az event.preventDefault() meghívásával megakadályozható a szövegmező tartalmának törlése.
### Slots
Név Leírás
icon

Bal oldali ikon.
end-icon

Jobb oldali ikon.
error-icon

Ellenőrzési hiba állapot jobb oldali ikonja.
prefix

Bal oldali szöveg.
suffix

Jobb oldali szöveg.
clear-button

Törlés gomb.
clear-icon

A törlés gombban lévő ikon.
toggle-password-button

Jelszó megjelenítési állapot váltógomb.
show-password-icon

A jelszó megjelenítése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
hide-password-icon

A jelszó elrejtése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
helper

Az alsó súgó szöveg.
### CSS Parts
Név Leírás
container

A szövegmező konténere.
icon

Bal oldali ikon.
end-icon

Jobb oldali ikon.
error-icon

Ellenőrzési hiba állapot jobb oldali ikonja.
prefix

Bal oldali szöveg.
suffix

Jobb oldali szöveg.
label

A felső címke szövege.
input

A belső <input> vagy <textarea> elem.
clear-button

Törlés gomb.
clear-icon

A törlés gombban lévő ikon.
toggle-password-button

Jelszó megjelenítési állapot váltógomb.
show-password-icon

A jelszó megjelenítése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
hide-password-icon

A jelszó elrejtése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
supporting

Az alsó súgó információk konténere, beleértve a helper-t, hibát és a számlálót.
helper

Az alsó súgó szöveg.
error

Az alsó hibaleíró szöveg.
counter

Az alsó jobb oldali karakterszámláló.
# Tooltip komponens A tooltip egy adott elemhez kapcsolódó rövid magyarázatot vagy kontextusinformációt jelenít meg, hogy a felhasználó jobban megértse az elem funkcióját vagy rendeltetését. ## Használat {#usage} A komponens importálása: ```js import 'mdui/components/tooltip.js'; ``` A komponens TypeScript-típusának importálása: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Példa: ```html gomb ``` ## Példák {#examples} ### Egyszerű szöveges tooltip {#example-plain} Alapértelmezés szerint egyszerű szöveges tooltip. A `content` attribútummal állíthatja be a tooltip tartalmát. ```html gomb ``` A `content` slotban is beállíthatja a tooltip tartalmát. ```html gomb
cím
tartalom
 ``` ### Gazdag tooltip {#example-rich} Állítsa a `variant` attribútumot `rich` értékre a gazdag tooltip létrehozásához. A `headline` attribútummal állíthatja be a tooltip címét, a `content` attribútummal a tartalmát. ```html gomb ``` A `headline` és `content` slotokon keresztül is beállíthatja a tooltip címét és tartalmát. Az `action` slot használatával műveleti gombot adhat a tooltiphez. ```html gomb
Gazdag tooltip
A gazdag tooltipek felhívják a figyelmet egy adott elemre vagy funkcióra, amely megérdemli a felhasználó fókuszát. Több sornyi információs szöveget támogatnak.
Művelet ``` ### Pozíció {#example-placement} A `placement` attribútummal beállíthatja a tooltip pozícióját. ```html
``` ### Aktiválási mód {#example-trigger} A `trigger` attribútummal beállíthatja a tooltip aktiválási módját. ```html gomb ``` ### Nyitás/zárás késleltetése {#example-delay} Ha az aktiválási mód `hover`, az `open-delay` és `close-delay` attribútumokkal beállíthatja a tooltip nyitásának és zárásának késleltetését ezredmásodpercben. ```html gomb ``` ### Letiltott állapot {#example-disabled} A `disabled` attribútummal letilthatja a tooltip-et. ```html gomb ``` ## mdui-tooltip API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'plain' | 'rich' 'plain'

A tooltip variánsa. Alapértelmezés szerint plain. Lehetséges értékek:

  • plain: Egyszerű szöveg, egysoros szöveghez
  • rich: Rich text, tartalmazhat címet, törzsszöveget és műveleti gombokat
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

A tooltip pozíciója. Alapértelmezés szerint auto. Lehetséges értékek:

  • auto: Automatikus pozíció meghatározás. variant="plain" esetén előnyben részesíti a top-ot; variant="rich" esetén előnyben részesíti a bottom-right-ot
  • top-left: Bal felső sarokban
  • top-start: Fent, balra igazítva
  • top: Fent, középre igazítva
  • top-end: Fent, jobbra igazítva
  • top-right: Jobb felső sarokban
  • bottom-left: Bal alsó sarokban
  • bottom-start: Lent, balra igazítva
  • bottom: Lent, középre igazítva
  • bottom-end: Lent, jobbra igazítva
  • bottom-right: Jobb alsó sarokban
  • left-start: Balra, felülre igazítva
  • left: Balra, középre igazítva
  • left-end: Balra, alulra igazítva
  • right-start: Jobbra, felülre igazítva
  • right: Jobbra, középre igazítva
  • right-end: Jobbra, alulra igazítva
open-delay openDelay true number 150

Az egérrel fölé vive történő megjelenítés késleltetése, ezredmásodpercben.
close-delay closeDelay true number 150

Az egérrel fölé vive történő elrejtés késleltetése, ezredmásodpercben.
headline headline true string

A tooltip címe. Csak variant="rich" esetén használható. Beállítható a slot="headline" segítségével is.
content content true string

A tooltip tartalma. Beállítható a slot="content" segítségével is.
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Kiváltási mód, több érték is megadható szóközzel elválasztva. Lehetséges értékek:

  • click: Kattintáskor aktiválódik
  • hover: Egérrel fölé vive aktiválódik
  • focus: Fókuszáláskor aktiválódik
  • manual: Csak programozottan lehet megnyitni és bezárni a tooltip-et, más kiváltási mód nem adható meg
disabled disabled true boolean false

A tooltip letiltása.
open open true boolean false

A tooltip látható-e.
### Események
Név Leírás
open

A tooltip megjelenítésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a tooltip megnyitása.
opened

A tooltip megjelenítési animációjának befejezésekor aktiválódik az esemény.
close

A tooltip elrejtésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a tooltip bezárása.
closed

A tooltip elrejtési animációjának befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

A tooltip által kiváltott cél elem, csak a default slot-ban lévő első elem lesz a cél elem.
headline

A tooltip címe, csak akkor érvényes, ha a variant="rich".
content

A tooltip tartalma, tartalmazhat HTML-t. Ha csak egyszerű szöveget tartalmaz, a content attribútum is használható helyette.
action

A tooltip alján található gomb, csak akkor érvényes, ha a variant="rich".
### CSS Parts
Név Leírás
popup

A tooltip konténere.
headline

Cím.
content

Törzsszöveg.
action

Műveleti gomb.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner-plain

A komponens sarok lekerekítésének mérete, ha a variant="plain". Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--shape-corner-rich

A komponens sarok lekerekítésének mérete, ha a variant="rich". Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# Felső alkalmazássáv komponens A felső alkalmazássáv kulcsfontosságú információk és kapcsolódó műveletek megjelenítésére szolgál az oldal tetején, tiszta navigációt és kényelmes funkcióhozzáférést biztosítva a felhasználók számára. ## Használat {#usage} A komponensek importálása: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` A komponensek TypeScript-típusainak importálása: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Példa: (A példában szereplő `style="position: relative"` csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.) ```html Cím
``` **Figyelmeztetések:** A komponens alapértelmezés szerint `position: fixed` pozicionálást használ, és automatikusan `padding-top` stílust ad a `body` elemhez, hogy a tartalmat ne takarja el ez a komponens. Viszont a következő két esetben alapértelmezés szerint `position: absolute` pozicionálást használ: 1. Ha meg van adva a `scroll-target` attribútum. Ekkor a `padding-top` stílust a `scroll-target` elemre kell alkalmaznia. 2. Ha a [``](/hu/docs/2/components/layout) komponensen belül található. Ekkor nem ad hozzá `padding-top` stílust. ## Példák {#examples} ### Megadott tárolóban való megjelenítés {#example-scroll-target} Alapértelmezés szerint a felső alkalmazássáv az oldal tetején jelenik meg. Ha azt szeretné, hogy a felső alkalmazássáv egy megadott tárolóban jelenjen meg, adja meg a `scroll-target` attribútumot a `` komponensen. Az attribútum értéke a görgethető tartalom tárolójának CSS szelektora vagy DOM eleme. Ekkor a felső alkalmazássáv a szülőelemhez igazodva jelenik meg (a szülőelemen Önnek kell beállítania a `position: relative; overflow: hidden` stílust). ```html
Cím
``` ### Változat {#example-variant} A `` komponensen a `variant` attribútummal állíthatja be a felső alkalmazássáv változatát. ```html
Cím
center-aligned small medium large
``` ### Viselkedés görgetéskor {#example-scroll-behavior} A `` komponensen a `scroll-behavior` attribútummal meghatározhatja a felső alkalmazássáv viselkedését az oldal görgetésekor. Több viselkedést is beállíthat egyszerre, szóközzel elválasztva. A görgetési viselkedések a következők: - `hide`: Az oldal lefelé görgetésekor elrejti a felső alkalmazássávot, felfelé görgetésekor megjeleníti. - `shrink`: Csak akkor érvényes, ha a `variant` attribútum értéke `medium` vagy `large`. Az oldal lefelé görgetésekor kibontja a felső alkalmazássávot, felfelé görgetésekor összehúzza. - `elevate`: Az oldal lefelé görgetésekor árnyékot ad a felső alkalmazássávnak; amikor az oldal visszagörget a tetejére, eltávolítja az árnyékot. A `scroll-threshold` attribútummal beállíthatja, hogy hány pixel görgetése után lépjen életbe a felső alkalmazássáv görgetési viselkedése. (Figyelem: a gyors reagálás érdekében, ha az `elevate` görgetési viselkedést használja, ne állítsa be a `scroll-threshold` attribútumot.) **Példa: Elrejtés görgetéskor** ```html
Cím
``` **Példa: Árnyék hozzáadása görgetéskor** ```html
Cím
``` **Példa: Összehúzódás görgetéskor** ```html
Cím
``` **Példa: Összehúzódás és árnyék hozzáadása görgetéskor** ```html
Cím
``` ### Kibontott állapot szövege {#label-large} Azoknál a felső alkalmazássávoknál, amelyeknél a `variant` attribútum értéke `medium` vagy `large`, és a `scroll-behavior` attribútum értéke `shrink`, a `` komponensben a `label-large` slotban beállíthatja a kibontott állapot szövegét. ```html
Ez az összehúzott állapot címe Ez a kibontott állapot címe
``` ## mdui-top-app-bar-title API ### Slots
Név Leírás
(alapértelmezett)

A felső alkalmazássáv címszövege.
label-large

A kibontott állapot címszövege.
### CSS Parts
Név Leírás
label

Címszöveg.
label-large

A kibontott állapot címszövege.
## mdui-top-app-bar API ### Tulajdonságok
Attribútum Tulajdonság Reflect Típus Alapértelmezett Leírás
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

A felső alkalmazássáv variánsa. Alapértelmezés szerint small. Lehetséges értékek:

  • center-aligned: Kis méretű alkalmazássáv, középre igazított címmel
  • small: Kis méretű alkalmazássáv
  • medium: Közepes méretű alkalmazássáv
  • large: Nagy méretű alkalmazássáv
hide hide true boolean false

Rejtett állapotban van-e.
shrink shrink true boolean false

Összezsugorodik-e a variant="small" stílusára, csak akkor érvényes, ha a variant="medium" vagy variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Görgetési viselkedés. Több érték is használható egyszerre, szóközzel elválasztva. Lehetséges értékek:

  • hide: Elrejtés görgetéskor
  • shrink: Közepes vagy nagy alkalmazássávokban használható, görgetéskor kis alkalmazássáv stílusára zsugorodik
  • elevate: Árnyék hozzáadása görgetéskor
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Az elem, amelynek a görgetési eseményeit figyelni kell. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a window görgetési eseményeit figyeli.
scroll-threshold scrollThreshold true number

A görgetési művelet kiváltásához szükséges küszöbérték px-ben.
order order true number

A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
### Események
Név Leírás
show

A megjelenítés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a megjelenítés.
shown

A megjelenítési animáció befejezésekor aktiválódik az esemény.
hide

Az elrejtés kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható az elrejtés.
hidden

Az elrejtési animáció befejezésekor aktiválódik az esemény.
### Slots
Név Leírás
(alapértelmezett)

A felső alkalmazássávon belüli elemek.
### CSS egyéni tulajdonságok
Név Leírás
--shape-corner

A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
--z-index

A komponens CSS z-index értéke.
# jq segédkönyvtár Az mdui egy könnyűsúlyú JavaScript segédkönyvtárat tartalmaz, amely a jQuery-hez hasonló API-t és láncolható hívásokat biztosít, de a mérete csak a jQuery hatoda. A segédfüggvény importálása: ```js import { $ } from 'mdui/jq.js'; ``` ## Alap {#api-core} ### `$()` {#dollar} A függvénynek többféle használata van: Adjon meg egy CSS szelektort paraméterként, és adja vissza a kiválasztott elemeket tartalmazó JQ objektumot. ```js $('.box'); ``` Adjon meg egy DOM elemet, tetszőleges tömböt, NodeList-et vagy JQ objektumot, és adja vissza a megadott elemeket tartalmazó JQ objektumot. ```js $(document); ``` Adjon meg egy HTML karakterláncot, és adja vissza a HTML alapján létrehozott DOM-okat tartalmazó JQ objektumot. ```js $(`
`); ``` Adjon meg egy függvényt, amely a DOM betöltődése után fog meghívódni. ```js $(function () { console.log('DOM betöltve'); }); ``` ## Kiterjesztés {#api-extend} ### `$.extend()` {#d-extend} Ha csak egy objektumot ad meg, az objektum tulajdonságai a `$` objektumba lesznek összefésülve, ami új funkciók hozzáadását jelenti a `$` névtérhez. ```js $.extend({ customFunc: function () {}, }); // Ezután a saját metódus így hívható $.customFunc(); ``` Ha két vagy több objektumot ad meg, az összes objektum tulajdonsága hozzáadódik az első objektumhoz, és visszaadja az összefésült objektumot. Az `undefined` értékű tulajdonságok nem kerülnek összefésülésre. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Ekkor az első objektum és a visszatérési érték is { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Metódusok kiterjesztése a `$` prototípus láncán. ```js $.fn.extend({ customFunc: function () {}, }); // Ezután a kiterjesztett metódus így használható $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Egy tömböt vagy objektumot sorosít URL lekérdezési karakterlánccá. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Ha a paraméter egy tömb, akkor a tömb formátumának meg kell egyeznie a [`.serializeArray()`](#serializeArray) által visszaadott formátummal. ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Tömb- és objektumműveletek {#api-array} ### `$.each()` {#d-each} Bejár egy tömböt vagy objektumot. Visszatérési értéke az első paraméter, vagyis a bejárt tömb vagy objektum. A visszahívási függvény első paramétere a tömb indexe vagy az objektum kulcsa, a második paraméter a tömb vagy objektum adott pozíciójában lévő érték. A visszahívási függvényben a `this` a tömb vagy objektum adott pozíciójában lévő értékre mutat. Ha a visszahívási függvény `false` értéket ad vissza, a bejárás leáll. ```js // Tömb bejárása $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Eredmény: // 0:a // 1:b // 2:c ``` ```js // Objektum bejárása $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Eredmény // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Hozzáfűzi a második tömb elemeit az első tömbhöz, és visszaadja az összefésült tömböt. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Eltávolítja az ismétlődő elemeket a tömbből. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Bejár egy tömböt vagy objektumot, és visszaadja a visszahívási függvény visszatérési értékeiből álló új tömböt. A visszahívási függvény első paramétere a tömb vagy objektum adott pozíciójában lévő érték, a második paramétere a tömb indexe vagy az objektum kulcsa. A visszahívási függvény bármilyen értéket visszaadhat. Ha a visszatérési érték egy tömb, akkor ez a tömb kibontásra kerül. Ha a visszatérési érték `null` vagy `undefined`, akkor ez az érték figyelmen kívül lesz hagyva. A visszahívási függvényen belül a `this` a `window` objektumra mutat. ```js // Tömb bejárása const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Ha a visszahívási függvény tömböt ad vissza, a tömb kibontásra kerül const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Objektum bejárása const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Meghatározza, hogy egy csomópont tartalmaz-e egy másik csomópontot. Ha a szülő csomópont tartalmazza a gyermek csomópontot, `true` értéket ad vissza; egyébként `false` értéket. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Adattípus-ellenőrzés {#api-type} ### `.is()` {#is} Meghatározza, hogy a gyűjteményben van-e legalább egy elem, amely megfelel a paraméternek. Ha egyezik, `true` értéket ad vissza; egyébként `false` értéket. A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje, JQ objektum vagy visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az index, a második paramétere az aktuális elem. A függvényen belül a `this` az aktuális elemre mutat. Ha a függvény `true` értéket ad vissza, az aktuális elem megfelel a paraméternek; ha `false` értéket ad vissza, az aktuális elem nem felel meg a paraméternek. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Meghatározás a visszahívási függvény visszatérési értékével $(document).is(function (index, element) { return element === document; }); // true ``` ## Objektum elérés {#api-object} ### `.length` {#length} Visszaadja az aktuális gyűjteményben lévő elemek számát. ```js $('body').length; // 1 ``` ### `.each()` {#each} Bejárja az aktuális gyűjteményt, és végrehajt egy függvényt a gyűjtemény minden elemére. Ha a függvény `false` értéket ad vissza, a bejárás leáll. A függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a `this` az aktuális elemre mutat. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Bejárja az aktuális gyűjteményt, végrehajt egy függvényt a gyűjtemény minden elemére, és visszaadja a függvény visszatérési értékeiből álló új gyűjteményt. A függvény visszaadhat egyetlen adatot vagy adatok tömbjét. Ha tömböt ad vissza, a tömb elemei sorban hozzáadódnak az új gyűjteményhez. Ha a függvény `null` vagy `undefined` értéket ad vissza, ez az érték nem kerül hozzáadásra az új gyűjteményhez. A függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a `this` az aktuális elemre mutat. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // A result egy JQ objektum, amely a megfelelő elemek értékeit tartalmazza ``` ### `.eq()` {#eq} Visszaad egy új gyűjteményt, amely csak a megadott indexpozícióban lévő elemet tartalmazza. ```js $('div').eq(0); // Visszaadja az első elemet tartalmazó gyűjteményt $('div').eq(-1); // Visszaadja az utolsó elemet tartalmazó gyűjteményt $('div').eq(-2); // Visszaadja az utolsó előtti elemet tartalmazó gyűjteményt ``` ### `.first()` {#first} Visszaad egy új gyűjteményt, amely csak az aktuális gyűjtemény első elemét tartalmazza. ```js $('div').first(); // Visszaadja az első div elemet tartalmazó gyűjteményt ``` ### `.last()` {#last} Visszaad egy új gyűjteményt, amely csak az aktuális gyűjtemény utolsó elemét tartalmazza. ```js $('div').last(); // Visszaadja az utolsó div elemet tartalmazó gyűjteményt ``` ### `.get()` {#get} Visszaadja a megadott indexpozícióban lévő elemet. Ha nem ad meg paramétert, visszaadja a gyűjtemény összes eleméből álló tömböt. ```js $('div').get(); // Visszaadja az összes div elemet tartalmazó tömböt $('div').get(0); // Visszaadja az első div elemet $('div').get(-1); // Visszaadja az utolsó div elemet ``` ### `.index()` {#index} Ha nem ad meg paramétert, visszaadja az aktuális gyűjtemény első elemének indexét a testvérelemekhez viszonyítva. Ha megad egy CSS szelektort, visszaadja az aktuális gyűjtemény első elemének indexét a CSS szelektor által kiválasztott elemekhez viszonyítva. Ha megad egy DOM elemet, visszaadja az elem indexét az aktuális gyűjteményben. Ha megad egy JQ objektumot, visszaadja az objektum első elemének indexét az aktuális gyűjteményben. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Visszaadja az aktuális gyűjtemény egy részhalmazát. Két paraméter megadásával megadhatja a részhalmaz kezdő- és végpozícióját (a végpozícióban lévő elem nem tartozik bele). Ha nem ad meg második paramétert, a kezdőpozíciótól a gyűjtemény végéig tartó összes elemet adja vissza. ```js // Visszaadja a gyűjtemény harmadik (beleértve) utáni összes elemét $('div').slice(3); // Visszaadja a gyűjtemény harmadik és ötödik közötti elemeit (harmadik beleértve, ötödik nem) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Kiszűri az aktuális gyűjteményből a megadott kifejezésnek megfelelő elemeket. A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje vagy visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a `this` az aktuális elemre mutat. Ha a függvény `true` értéket ad vissza, az aktuális elem megmarad; ha `false` értéket ad vissza, az aktuális elem eltávolításra kerül. ```js // Kiszűri az összes .box osztályt tartalmazó div elemet $('div').filter('.box'); // Kiszűri az összes kijelölt opciót $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Kiszűri az aktuális gyűjteményből azokat az elemeket, amelyek nem felelnek meg a megadott kifejezésnek. A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje, JQ objektum vagy `boolean` értéket visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a `this` az aktuális elemre mutat. Ha a függvény `true` értéket ad vissza, az aktuális elem eltávolításra kerül; ha `false` értéket ad vissza, az aktuális elem megmarad. ```js // Kiszűri az összes .box osztályt nem tartalmazó div elemet $('div').not('.box'); // Kiszűri az összes nem kijelölt opciót $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS osztályok {#api-css} ### `.hasClass()` {#hasClass} Meghatározza, hogy a gyűjtemény első eleme tartalmazza-e a megadott CSS osztályt. ```js // Meghatározza, hogy az első div elem tartalmazza-e a .item osztályt $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} CSS osztályokat ad a gyűjtemény minden eleméhez, az osztálynevek szóközzel elválaszthatók. A paraméter lehet egy karakterlánc vagy egy CSS osztálynevet visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen már meglévő CSS osztálynevek. A függvényen belül a `this` az aktuális elemre mutat. ```js // Hozzáadja a .item osztályt az összes div elemhez $('div').addClass('item'); // Hozzáadja a .item1 és .item2 osztályokat az összes div elemhez $('div').addClass('item1 item2'); // Hozzáadja a visszahívási függvény által visszaadott CSS osztályt az összes div elemhez $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Eltávolítja a megadott CSS osztályokat a gyűjtemény minden eleméről, az osztálynevek szóközzel elválaszthatók. A paraméter lehet egy karakterlánc vagy egy CSS osztálynevet visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen már meglévő CSS osztálynevek. A függvényen belül a `this` az aktuális elemre mutat. Ha nem ad meg paramétert, ez a metódus közvetlenül eltávolítja az elem `class` attribútumát. ```js // Eltávolítja a .item osztályt az összes div elemről $('div').removeClass('item'); // Eltávolítja a .item1 és .item2 osztályokat az összes div elemről $('div').removeClass('item1 item2'); // Eltávolítja a visszahívási függvény által visszaadott CSS osztályt az összes div elemről $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Ha az elemen van a megadott CSS osztály, eltávolítja; ha nincs, hozzáadja. Több osztálynév szóközzel elválasztható. A paraméter lehet egy karakterlánc vagy egy CSS osztálynevet visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen már meglévő CSS osztálynevek. A függvényen belül a `this` az aktuális elemre mutat. ```js // Váltja a .item osztályt az összes div elemen $('div').toggleClass('item'); // Váltja a .item1 és .item2 osztályokat az összes div elemen $('div').toggleClass('item1 item2'); // Váltja a visszahívási függvény által visszaadott CSS osztályt az összes div elemen $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Csomópont attribútumok {#api-attr} ### `.prop()` {#prop} Lekéri a gyűjtemény első elemének JavaScript tulajdonságát. ```js // Lekéri az első elem checked tulajdonságát $('input').prop('checked'); ``` Ha két paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének megadott JavaScript tulajdonságát. A tulajdonság értéke bármilyen típusú lehet, vagy egy visszahívási függvény visszatérési értéke. A visszahívási függvény első paramétere az elem indexpozíciója, a második paramétere az elemen lévő eredeti tulajdonság értéke, a függvényen belüli `this` az aktuális elemre mutat. Ha a tulajdonság értéke vagy a visszahívási függvény visszatérési értéke `undefined`, a metódus nem módosítja az elem eredeti tulajdonságát. ```js // Beállítja az összes kiválasztott elem checked tulajdonságát true értékre $('input').prop('checked', true); // A tulajdonság értékének beállítása a visszahívási függvény visszatérési értékével $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Egy objektum megadásával egyszerre több tulajdonságot is beállíthat. ```js // Egyszerre több tulajdonság beállítása az elemeken $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Eltávolítja a megadott JavaScript tulajdonságot a gyűjtemény összes eleméről. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Lekéri a gyűjtemény első elemének HTML attribútumát. ```js // Lekéri az első elem attribútumának értékét $('div').attr('username'); ``` Ha két paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének megadott HTML attribútumát. Az attribútum értéke lehet karakterlánc vagy szám, vagy egy attribútum értéket visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen lévő eredeti attribútum értéke. A függvényen belül a `this` az aktuális elemre mutat. Ha az attribútum értéke vagy a visszahívási függvény visszatérési értéke `null`, a metódus eltávolítja a megadott attribútumot; ha `undefined`, nem módosítja az elem eredeti attribútumát. ```js // Beállítja az összes kiválasztott elem attribútumának értékét $('div').attr('username', 'mdui'); // Az attribútum értékének beállítása a visszahívási függvény visszatérési értékével $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Egy objektum megadásával egyszerre több attribútumot is beállíthat. ```js // Egyszerre több attribútum beállítása az elemeken $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Eltávolítja a megadott HTML attribútumokat a gyűjtemény összes eleméről, több attribútumnév szóközzel elválasztható. ```js // Eltávolít egy attribútumot a gyűjtemény összes eleméről $('div').removeAttr('username'); // Eltávolít több attribútumot a gyűjtemény összes eleméről $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Visszaadja a gyűjtemény első elemének értékét. Ha az elem egy ``, ``, `