A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Chip

A chip rövid, tömör információkat hordozhat, például egy képet vagy egy rövid szöveget.

Használat

A chip komponens tiszta CSS-szel készült; a hatás eléréséhez csak HTML kódot kell írni.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek - Chip

Stílus

Sima szöveg

Példa

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

Avatart tartalmaz

Példa

<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Szöveges ikont tartalmaz

Példa

<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Ikont tartalmaz

Példa

<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Bezárás gombot tartalmaz

Példa

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

Ikon színe

Példa

<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

CSS osztályok listája

Osztálynév	Leírás
`.mdui-chip`	Chip komponens definiálása.
`.mdui-chip-title`	A chip szövegének definiálása.
`.mdui-chip-icon`	A chip avatarjának vagy ikonjának definiálása.
`.mdui-chip-delete`	A chip törlés gombjának definiálása.

Kártya

Tooltip