Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Karta

Karta to kontener prezentujący określony zestaw informacji. Może zawierać różne powiązane treści, takie jak zdjęcia, tekst, linki itp.

Sposób użycia

Komponent karty napisany jest w czystym CSS; wystarczy napisać kod HTML, aby działał.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Karta

Styl

Pełna struktura HTML

Poniżej znajduje się pełna struktura HTML karty, zawierająca wszystkie elementy o predefiniowanych stylach.

Przykład

<div class="mdui-card">

  <!-- Nagłówek karty, zawiera awatar, tytuł i podtytuł. -->
  <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>

  <!-- Treść medialna karty, może zawierać obrazy, wideo i inne media, a także tytuł i podtytuł. -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Karta może zawierać jeden lub więcej przycisków menu. -->
    <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>

  <!-- Tytuł i podtytuł karty. -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

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

  <!-- Przyciski 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>

Nakładka na elementach mediów

Dodaj <div class="mdui-card-media-covered"></div> do <div class="mdui-card-media"></div> i umieść w tym elemencie zawartość, która ma zostać nałożona na element mediów.

Przykład

<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>

Przykład

<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>

Dodanie klasy .mdui-card-media-covered-top do .mdui-card-media-covered powoduje, że nakładka znajduje się na górze elementu mediów.

Przykład

<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>

Dodanie klasy .mdui-card-media-covered-transparent do .mdui-card-media-covered nadaje nakładce przezroczyste tło.

Przykład

<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>

Dodanie klasy .mdui-card-media-covered-gradient do .mdui-card-media-covered nadaje nakładce gradientowe tło.

Przykład

<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>

Przyciski ułożone pionowo

Dodanie klasy .mdui-card-actions-stacked do <div class="mdui-card-actions"></div> pozwala ułożyć przyciski pionowo.

Przykład

<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>

Lista klas CSS

Nazwa klasy	Opis
`.mdui-card`	Definiuje komponent karty.
`.mdui-card-header`	Definiuje nagłówek karty.
`.mdui-card-header-avatar`	Definiuje awatar w nagłówku karty.
`.mdui-card-header-title`	Definiuje tytuł w nagłówku karty.
`.mdui-card-header-subtitle`	Definiuje podtytuł w nagłówku karty.
`.mdui-card-media`	Definiuje element mediów w karcie.
`.mdui-card-media-covered`	Definiuje zawartość nakładaną na element mediów.
`.mdui-card-media-covered-top`	Powoduje, że nakładka znajduje się na górze elementu mediów.
`.mdui-card-media-covered-transparent`	Nadaje nakładce przezroczyste tło.
`.mdui-card-media-covered-gradient`	Nadaje nakładce gradientowe tło.
`.mdui-card-menu`	Definiuje menu w prawym górnym rogu karty.
`.mdui-card-primary`	Definiuje obszar tytułu i podtytułu karty.
`.mdui-card-primary-title`	Definiuje tytuł karty.
`.mdui-card-primary-subtitle`	Definiuje podtytuł karty.
`.mdui-card-content`	Definiuje treść karty.
`.mdui-card-actions`	Definiuje pasek akcji karty.
`.mdui-card-actions-stacked`	Układa pasek akcji pionowo.

Dolna nawigacja

Chip