menuMDUIDocs
color_lens
Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Chip

Chip může obsahovat obrázek, krátký řetězec nebo jiné stručné informace.

Způsob volání

Komponenta chipu je napsána v čistém CSS, stačí napsat HTML kód.

Styl

Čistý text

Příklad
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

Obsahující avatar

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

Obsahující textovou ikonu

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

Obsahující ikonu

Příklad
<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>

Obsahující tlačítko pro zavření

Příklad
<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>

Barva ikony

Příklad
<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>

Seznam CSS tříd

Název třídyPopis
.mdui-chipDefinuje komponentu chipu.
.mdui-chip-titleDefinuje text chipu.
.mdui-chip-iconDefinuje avatar nebo ikonu chipu.
.mdui-chip-deleteDefinuje tlačítko pro smazání chipu.