# 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
<mdui-button>Gomb</mdui-button>
```

## Példák {#examples}

### Változat {#example-variant}

A `variant` attribútummal állíthatja be a gomb változatát.

```html
<mdui-button variant="elevated">Kiemelt</mdui-button>
<mdui-button variant="filled">Kitöltött</mdui-button>
<mdui-button variant="tonal">Tónusos</mdui-button>
<mdui-button variant="outlined">Körvonalazott</mdui-button>
<mdui-button variant="text">Szöveges</mdui-button>
```

### 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
<mdui-button full-width>Gomb</mdui-button>
```

### 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
<mdui-button icon="search" end-icon="arrow_forward">Ikon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>
```

### 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
<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>
```

### 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
<mdui-button disabled>Letiltva</mdui-button>
<mdui-button loading>Betöltés</mdui-button>
<mdui-button loading disabled>Betöltés és letiltva</mdui-button>
```

## mdui-button API

### Tulajdonságok

<table>
<thead>
  <tr>
    <th>Attribútum</th>
    <th>Tulajdonság</th>
    <th>Reflect</th>
    <th>Típus</th>
    <th>Alapértelmezett</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;elevated&#39; | &#39;filled&#39; | &#39;tonal&#39; | &#39;outlined&#39; | &#39;text&#39;</td>
    <td>'filled'</td>
    <td><p>A gomb variánsa. A lehetséges értékek:</p>
<ul>
<li><code>elevated</code>: Árnyékos gomb, olyan esetekben használatos, amikor a gombot vizuálisan el kell különíteni a háttértől</li>
<li><code>filled</code>: Erős vizuális hatású, fontos folyamatok végső műveleteihez, mint pl. &quot;Mentés&quot;, &quot;Megerősítés&quot; stb.</li>
<li><code>tonal</code>: Vizuális hatása a <code>filled</code> és az <code>outlined</code> között van, közepes vagy magas prioritású műveletekhez, mint pl. &quot;Következő&quot; egy folyamatban</li>
<li><code>outlined</code>: Keretes gomb, közepes prioritású, másodlagos műveletekhez, mint pl. &quot;Vissza&quot;</li>
<li><code>text</code>: Szöveges gomb, a legalacsonyabb prioritású műveletekhez</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Kitölti-e a szülőelem teljes szélességét.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>A bal oldali Material Icons ikon neve. Beállítható a <code>slot=&quot;icon&quot;</code> segítségével is.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>A jobb oldali Material Icons ikon neve. Beállítható a <code>slot=&quot;end-icon&quot;</code> segítségével is.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>A hivatkozás cél URL-je.</p>
<p>Ha ez a tulajdonság meg van adva, a komponens belsőleg <code>&lt;a&gt;</code> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>A letöltési hivatkozás célja.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum meg van adva.</p>
</td>
  </tr>
  <tr>
    <td>target</td>
    <td>target</td>
    <td>true</td>
    <td>&#39;_blank&#39; | &#39;_parent&#39; | &#39;_self&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>A hivatkozás megnyitásának módja. A lehetséges értékek:</p>
<ul>
<li><code>_blank</code>: Új ablakban nyitja meg a hivatkozást</li>
<li><code>_parent</code>: A szülő keretben nyitja meg a hivatkozást</li>
<li><code>_self</code>: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást</li>
<li><code>_top</code>: A teljes ablakban nyitja meg a hivatkozást</li>
</ul>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum meg van adva.</p>
</td>
  </tr>
  <tr>
    <td>rel</td>
    <td>rel</td>
    <td>true</td>
    <td>&#39;alternate&#39; | &#39;author&#39; | &#39;bookmark&#39; | &#39;external&#39; | &#39;help&#39; | &#39;license&#39; | &#39;me&#39; | &#39;next&#39; | &#39;nofollow&#39; | &#39;noreferrer&#39; | &#39;opener&#39; | &#39;prev&#39; | &#39;search&#39; | &#39;tag&#39;</td>
    <td></td>
    <td><p>Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:</p>
<ul>
<li><code>alternate</code>: Az aktuális dokumentum alternatív verziója</li>
<li><code>author</code>: Az aktuális dokumentum vagy cikk szerzője</li>
<li><code>bookmark</code>: Állandó hivatkozás a legközelebbi ős szakaszra</li>
<li><code>external</code>: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum</li>
<li><code>help</code>: Hivatkozás egy kapcsolódó súgó dokumentumra</li>
<li><code>license</code>: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik</li>
<li><code>me</code>: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli</li>
<li><code>next</code>: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma</li>
<li><code>nofollow</code>: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért</li>
<li><code>noreferrer</code>: Nem tartalmaz <code>Referer</code> fejlécet. Hasonló a <code>noopener</code> hatásához</li>
<li><code>opener</code>: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a <code>target</code> attribútum értéke <code>_blank</code>), akkor létrehoz egy segéd böngészési kontextust</li>
<li><code>prev</code>: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma</li>
<li><code>search</code>: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható</li>
<li><code>tag</code>: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)</li>
</ul>
<p><strong>Megjegyzés</strong>: Csak akkor használható, ha a <code>href</code> attribútum meg van adva.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Automatikusan fókuszt kapjon-e betöltődés után.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Az elem sorszáma a Tab billentyűvel történő navigálás során.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Letiltott állapotú-e.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Betöltési állapotban van-e.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva.</p>
</td>
  </tr>
  <tr>
    <td>type</td>
    <td>type</td>
    <td>true</td>
    <td>&#39;submit&#39; | &#39;reset&#39; | &#39;button&#39;</td>
    <td>'button'</td>
    <td><p>A gomb típusa. Alapértelmezés szerint <code>button</code>. Lehetséges típusok:</p>
<ul>
<li><code>submit</code>: Az űrlap elküldése a szervernek</li>
<li><code>reset</code>: Az űrlap összes mezőjének visszaállítása az alapértékre</li>
<li><code>button</code>: Nincs alapértelmezett viselkedés</li>
</ul>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>A kapcsolódó <code>&lt;form&gt;</code> elem. Ennek az attribútumnak az értéke egy <code>&lt;form&gt;</code> elem <code>id</code>-ja kell legyen ugyanazon az oldalon.</p>
<p>Ha ez az attribútum nincs megadva, az elemnek a <code>&lt;form&gt;</code> elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a <code>&lt;form&gt;</code> elem gyermekeként.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Megadja az űrlap elküldéséhez használandó URL-t.</p>
<p>Ha ez az attribútum meg van adva, felülírja a <code>&lt;form&gt;</code> elem <code>action</code> attribútumát.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva és <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formenctype</td>
    <td>formEnctype</td>
    <td>true</td>
    <td>&#39;application/x-www-form-urlencoded&#39; | &#39;multipart/form-data&#39; | &#39;text/plain&#39;</td>
    <td></td>
    <td><p>Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: Az alapértelmezett érték</li>
<li><code>multipart/form-data</code>: Akkor használandó, ha az űrlap <code>&lt;input type=&quot;file&quot;&gt;</code> elemet tartalmaz</li>
<li><code>text/plain</code>: A HTML5-ben bevezetve, hibakereséshez használható</li>
</ul>
<p>Ha ez az attribútum meg van adva, felülírja a <code>&lt;form&gt;</code> elem <code>enctype</code> attribútumát.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva és <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formmethod</td>
    <td>formMethod</td>
    <td>true</td>
    <td>&#39;post&#39; | &#39;get&#39;</td>
    <td></td>
    <td><p>Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek:</p>
<ul>
<li><code>post</code>: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre</li>
<li><code>get</code>: Az űrlapadatok <code>?</code> 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</li>
</ul>
<p>Ha ez az attribútum meg van adva, felülírja a <code>&lt;form&gt;</code> elem <code>method</code> attribútumát.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva és <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formnovalidate</td>
    <td>formNoValidate</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>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.</p>
<p>Ha ez az attribútum meg van adva, felülírja a <code>&lt;form&gt;</code> elem <code>novalidate</code> attribútumát.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva és <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formtarget</td>
    <td>formTarget</td>
    <td>true</td>
    <td>&#39;_self&#39; | &#39;_blank&#39; | &#39;_parent&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek:</p>
<ul>
<li><code>_self</code>: Alapértelmezett opció, az aktuális keretben nyílik meg</li>
<li><code>_blank</code>: Új ablakban nyílik meg</li>
<li><code>_parent</code>: A szülő keretben nyílik meg</li>
<li><code>_top</code>: A teljes ablakban nyílik meg</li>
</ul>
<p>Ha ez az attribútum meg van adva, felülírja a <code>&lt;form&gt;</code> elem <code>target</code> attribútumát.</p>
<p><strong>Megjegyzés</strong>: Csak akkor érvényes, ha a <code>href</code> attribútum nincs megadva és <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a></p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.</p>
</td>
  </tr>
</tbody>
</table>

### Metódusok

<table>
<thead>
  <tr>
    <th>Név</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Egérkattintás szimulálása az elemen.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Fókusz állítása az aktuális elemre.</p>
<p>Egy objektum is átadható paraméterként, a következő tulajdonságokkal:</p>
<ul>
<li><code>preventScroll</code>: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot <code>true</code>-ra állítja, a görgetés elmarad.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Fókusz eltávolítása az aktuális elemről.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, <code>false</code> értéket ad vissza és kiváltja az <code>invalid</code> eseményt; ha igen, <code>true</code> értéket ad vissza.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, <code>false</code> értéket ad vissza, kiváltja az <code>invalid</code> eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, <code>true</code> értéket ad vissza.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.</p>
</td>
  </tr>
</tbody>
</table>

### Események

<table>
<thead>
  <tr>
    <th>Név</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Fókusz elnyerésekor aktiválódik.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Fókusz elvesztésekor aktiválódik.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Név</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(alapértelmezett)</td>
    <td><p>A gomb szövege.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>A gomb bal oldali eleme.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>A gomb jobb oldali eleme.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Név</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>A belső <code>&lt;button&gt;</code> vagy <code>&lt;a&gt;</code> elem.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>A gomb szövege.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>A gomb bal oldali ikonja.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>A gomb jobb oldali ikonja.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>A betöltési állapotot jelző <code>&lt;mdui-circular-progress&gt;</code> elem.</p>
</td>
  </tr>
</tbody>
</table>

### CSS egyéni tulajdonságok

<table>
<thead>
  <tr>
    <th>Név</th>
    <th>Leírás</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a <a href="/hu/docs/2/styles/design-tokens#shape-corner">design tokenek</a> hivatkozása.</p>
</td>
  </tr>
</tbody>
</table>