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

Karta

Karta je kontejner určený k seskupení souvisejících informací. Může obsahovat např. fotografie, text, odkazy a další obsah.

Způsob volání

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

Související čtení

Designové zásady Material Design: Komponenty - Karta

Styl

Úplná HTML struktura

Níže je uvedena úplná HTML struktura karty, včetně všech prvků s předdefinovanými styly v kartě.

Příklad

<div class="mdui-card">

  <!-- Záhlaví karty, obsahující avatar, titul, podtitul -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- Mediální obsah karty, může obsahovat mediální obsah, jako jsou obrázky, videa atd., a také titul a podtitul -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Karta může obsahovat jedno nebo více tlačítek nabídky -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- Titul a podtitul karty -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- Obsah karty -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Tlačítka karty -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

Překryté na mediálním prvku

Přidáním <div class="mdui-card-media-covered"></div> do <div class="mdui-card-media"></div> a umístěním obsahu, který chcete překrýt, do tohoto prvku.

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

Přidáním třídy .mdui-card-media-covered-top na .mdui-card-media-covered umístíte překrývací vrstvu na horní část mediálního prvku.

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Přidáním třídy .mdui-card-media-covered-transparent na .mdui-card-media-covered získáte překrývací vrstvu s průhledným pozadím.

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Přidáním třídy .mdui-card-media-covered-gradient na .mdui-card-media-covered získáte překrývací vrstvu s přechodovým pozadím.

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Tlačítka uspořádaná svisle

Přidáním třídy .mdui-card-actions-stacked na <div class="mdui-card-actions"></div> můžete nastavit tlačítka tak, aby byla uspořádána svisle.

Příklad

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Seznam CSS tříd

Název třídy	Popis
`.mdui-card`	Definuje komponentu karty.
`.mdui-card-header`	Definuje záhlaví karty.
`.mdui-card-header-avatar`	Definuje avatar v záhlaví karty.
`.mdui-card-header-title`	Definuje titul v záhlaví karty.
`.mdui-card-header-subtitle`	Definuje podtitul v záhlaví karty.
`.mdui-card-media`	Definuje mediální prvek v kartě.
`.mdui-card-media-covered`	Definuje obsah překrytý na mediálním prvku.
`.mdui-card-media-covered-top`	Umístí překrývací vrstvu na horní část mediálního prvku.
`.mdui-card-media-covered-transparent`	Nastaví průhledné pozadí pro překrývací vrstvu.
`.mdui-card-media-covered-gradient`	Nastaví přechodové pozadí pro překrývací vrstvu.
`.mdui-card-menu`	Definuje nabídku v pravém horním rohu karty.
`.mdui-card-primary`	Definuje oblast titulu a podtitulu karty.
`.mdui-card-primary-title`	Definuje titul karty.
`.mdui-card-primary-subtitle`	Definuje podtitul karty.
`.mdui-card-content`	Definuje obsah karty.
`.mdui-card-actions`	Definuje panel akcí karty.
`.mdui-card-actions-stacked`	Nastaví panel akcí na svislé uspořádání.

Spodní navigační lišta

Chip