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.

Seznam

Seznam zobrazuje více řádků položek ve svislém uspořádání. Každý řádek položky může obsahovat ikony, avatary, text a další obsah.

Způsob volání

Komponenta seznamu je napsána v čistém CSS, takže pro její funkčnost stačí jen HTML kód.

Barva

Barva pozadí: průhledné pozadí.

Barva textu: černá v lehkém motivu, bílá v tmavém motivu.

Související čtení

Příručka návrhu Material Design: Komponenty - Seznam

Styl

Prostý text

Toto je nejjednodušší seznam.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Použití odkazu jako položky seznamu.

codeplay_arrow
Příklad
<div class="mdui-list">
  <a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
  <a href="#" class="mdui-list-item mdui-ripple">Starred</a>
  <a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>

Ikona

Seznam může obsahovat ikony.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Ikona může být na pravé straně seznamu.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Inbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Outbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Trash</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Spam</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
  </li>
</ul>

Použití prázdné ikony jako zástupného symbolu.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Avatar

Seznam může obsahovat avatary.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Avatar může být na pravé straně seznamu.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Brendan Lim</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Grace Ng</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Kerem Suer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
  </li>
</ul>

Obsahuje zároveň avatar a ikonu.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
</ul>

Použití ikony místo avataru.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Photos</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Recipes</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
    <div class="mdui-list-item-content">Work</div>
  </li>
</ul>

Text více řádků

Každá položka seznamu může obsahovat maximálně 3 řádky textu. Pokud je text delší než 3 řádky, měli byste místo toho použít kartu.

Ve výchozím nastavení není výška textu omezena. I když výška textu přesahuje 3 řádky, bude se normálně zobrazovat. Výšku textu můžete omezit přidáním třídy do .mdui-list-item-title a .mdui-list-item-text:

  • Přidáním třídy .mdui-list-item-one-line omezíte text na jeden řádek
  • Přidáním třídy .mdui-list-item-two-line omezíte text na dva řádky
  • Přidáním třídy .mdui-list-item-three-line omezíte text na tři řádky
codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
</ul>

Oddělovač

Oddělovač v seznamu má 8 px mezeru nahoře a dole.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">All mail</li>
  <li class="mdui-list-item mdui-ripple">Trash</li>
</ul>

Odebere horní a dolní okraj oddělovače.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

Podnadpis

Při použití podnadpisu v seznamu se automaticky přidá oddělovač nad podnadpis.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-subheader">Mail</li>
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Sent</li>
  <li class="mdui-subheader">Work</li>
  <li class="mdui-list-item mdui-ripple">Family</li>
  <li class="mdui-list-item mdui-ripple">Friends</li>
</ul>

Odsazený podnadpis

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-subheader-inset">Friends</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-subheader-inset">Family</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Kompaktní seznam

Prvky v kompaktním seznamu jsou těsněji uspořádány.

codeplay_arrow
Příklad
<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Další příklad kompaktního seznamu.

codeplay_arrow
Příklad
<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?
      </div>
    </div>
  </li>
</ul>

Aktivovaný stav

Aktivované položky mají přidanou barvu pozadí a tučný text.

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>
codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

Seznam CSS tříd

Název třídyPopis
.mdui-listDefinuje seznam (povinné).
.mdui-list-denseDefinuje kompaktní seznam.
.mdui-list-itemDefinuje položku seznamu (povinné).
.mdui-list-item-activeNastaví položku seznamu jako aktivní.
.mdui-list-item-iconDefinuje ikonu v položce seznamu.
.mdui-list-item-avatarDefinuje avatar v položce seznamu.
.mdui-list-item-contentDefinuje obsah položky seznamu.
.mdui-list-item-titleDefinuje název obsahu položky seznamu.
.mdui-list-item-textDefinuje pomocný text v obsahu položky seznamu.
.mdui-list-item-one-lineNastaví text tak, aby zabíral jeden řádek.
.mdui-list-item-two-lineNastaví text tak, aby zabíral dva řádky.
.mdui-list-item-three-lineNastaví text tak, aby zabíral tři řádky.

Další příklady

Seznam souborů

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-subheader-inset">Folders</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Recipes</div>
      <div class="mdui-list-item-text">Jan 17, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Work</div>
      <div class="mdui-list-item-text">Jan 28, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-subheader-inset">Files</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Kitchen remodel</div>
      <div class="mdui-list-item-text">Jan 10, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
</ul>

Adresář

codeplay_arrow
Příklad
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(650) 555-1234</div>
      <div class="mdui-list-item-text">Mobile</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(323) 555-6789</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">aliconnors@example.com</div>
      <div class="mdui-list-item-text">Personal</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">ali_connors@example.com</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
  </li>
</ul>
arrow_backPrevious
Posuvník
arrow_forwardNext
Ovládací prvky seznamu