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

Kártya

A kártya egy olyan konténer, amely egy adott adatkészletet tartalmaz. Különféle kapcsolódó információkat tartalmazhat, például fényképeket, szövegeket és linkeket.

Használat

A kártya 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 - Kártya

Stílus

Teljes HTML szerkezet

Az alábbiakban egy kártya teljes HTML-szerkezete látható, amely tartalmazza az összes előre definiált stílusú elemet.

Példa

<div class="mdui-card">

  <!-- Kártya fejléce, amely tartalmazza az avatart, a címet és az alcímet -->
  <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>

  <!-- A kártya médiatartalma, amely tartalmazhat képeket, videókat és egyéb médiatartalmakat, valamint címet és alcímet -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- A kártya egy vagy több menügombot tartalmazhat -->
    <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>

  <!-- A kártya címe és alcíme -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- A kártya tartalma -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- A kártya gombjai -->
  <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>

Médiaelemek lefedése

Adja hozzá a <div class="mdui-card-media-covered"></div> elemet a <div class="mdui-card-media"></div> elemhez, és helyezze bele azt a tartalmat, amelyet a médiatartalom fölé szeretne helyezni.

Példa

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

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

A .mdui-card-media-covered-top osztály hozzáadása a .mdui-card-media-covered elemhez a lefedő réteget a médiaelem tetejére helyezi.

Példa

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

A .mdui-card-media-covered-transparent osztály hozzáadása a .mdui-card-media-covered elemhez átlátszó hátteret ad a lefedő rétegnek.

Példa

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

A .mdui-card-media-covered-gradient osztály hozzáadása a .mdui-card-media-covered elemhez színátmenetes hátteret ad a lefedő rétegnek.

Példa

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

Gombok függőleges elrendezése

A .mdui-card-actions-stacked osztály hozzáadása a <div class="mdui-card-actions"></div> elemhez a gombokat függőleges elrendezésbe állítja.

Példa

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

CSS osztályok listája

Osztálynév	Leírás
`.mdui-card`	Kártya komponens definiálása.
`.mdui-card-header`	Kártya fejlécének definiálása.
`.mdui-card-header-avatar`	Kártya fejlécében lévő avatar definiálása.
`.mdui-card-header-title`	Kártya fejlécében lévő cím definiálása.
`.mdui-card-header-subtitle`	Kártya fejlécében lévő alcím definiálása.
`.mdui-card-media`	Médiaelem definiálása a kártyában.
`.mdui-card-media-covered`	Médiaelemet lefedő tartalom definiálása.
`.mdui-card-media-covered-top`	A lefedő réteg a médiaelem tetején helyezkedik el.
`.mdui-card-media-covered-transparent`	A lefedő réteg átlátszó háttérrel rendelkezik.
`.mdui-card-media-covered-gradient`	A lefedő réteg színátmenetes háttérrel rendelkezik.
`.mdui-card-menu`	A kártya jobb felső sarkában lévő menü definiálása.
`.mdui-card-primary`	A kártya cím- és alcímterületének definiálása.
`.mdui-card-primary-title`	A kártya címének definiálása.
`.mdui-card-primary-subtitle`	A kártya alcímének definiálása.
`.mdui-card-content`	Kártya tartalmának definiálása.
`.mdui-card-actions`	Kártya műveletsávjának definiálása.
`.mdui-card-actions-stacked`	A műveletsáv függőleges elrendezése.

Alsó navigáció

Chip