Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Kart

Kartlar, belirli bir veri kümesini içeren kapsayıcılardır. Fotoğraflar, metinler, bağlantılar gibi çeşitli ilgili bilgileri içerebilirler.

Kullanım

Kart bileşeni saf CSS ile yazılmıştır, etkinleşmesi için sadece HTML kodu yazmanız yeterlidir.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Kart

Stil

Tam HTML yapısı

Aşağıda, tüm önceden tanımlanmış stillere sahip öğeleri içeren bir kartın tam HTML yapısı bulunmaktadır.

Örnek

<div class="mdui-card">

  <!-- Avatar, başlık ve alt başlık içeren kart başlığı -->
  <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>

  <!-- Resim, video gibi medya içeriklerinin yanı sıra başlık ve alt başlık içerebilen kart medya içeriği -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Kart, bir veya daha fazla menü butonu içerebilir -->
    <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>

  <!-- Kartın başlığı ve alt başlığı -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- Kart içeriği -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Kart butonları -->
  <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>

Medya öğesinin üzerine bindirme

<div class="mdui-card-media"></div> içine <div class="mdui-card-media-covered"></div> ekleyin ve medya öğesinin üzerine gelmesini istediğiniz içeriği bu öğeye yerleştirin.

Örnek

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

Örnek

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

Bindirme katmanını medya öğesinin üst kısmına yerleştirmek için .mdui-card-media-covered üzerine .mdui-card-media-covered-top sınıfını ekleyin.

Örnek

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

Bindirme katmanının şeffaf bir arka plana sahip olması için .mdui-card-media-covered üzerine .mdui-card-media-covered-transparent sınıfını ekleyin.

Örnek

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

Bindirme katmanının gradyan bir arka plana sahip olması için .mdui-card-media-covered üzerine .mdui-card-media-covered-gradient sınıfını ekleyin.

Örnek

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

Butonları dikey olarak hizala

<div class="mdui-card-actions"></div> üzerine .mdui-card-actions-stacked sınıfı eklenerek butonlar dikey olarak hizalanabilir.

Örnek

<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 Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-card`	Kart bileşenini tanımlar.
`.mdui-card-header`	Kartın başlığını tanımlar.
`.mdui-card-header-avatar`	Kart başlığındaki avatarı tanımlar.
`.mdui-card-header-title`	Kart başlığındaki başlığı tanımlar.
`.mdui-card-header-subtitle`	Kart başlığındaki alt başlığı tanımlar.
`.mdui-card-media`	Karttaki medya öğesini tanımlar.
`.mdui-card-media-covered`	Medya öğesinin üzerine bindirilen içeriği tanımlar.
`.mdui-card-media-covered-top`	Bindirme katmanını medya öğesinin üstüne yerleştirir.
`.mdui-card-media-covered-transparent`	Bindirme katmanının şeffaf bir arka plana sahip olmasını sağlar.
`.mdui-card-media-covered-gradient`	Bindirme katmanının gradyan bir arka plana sahip olmasını sağlar.
`.mdui-card-menu`	Kartın sağ üst köşesindeki menüyü tanımlar.
`.mdui-card-primary`	Kartın başlık ve alt başlık alanını tanımlar.
`.mdui-card-primary-title`	Kartın başlığını tanımlar.
`.mdui-card-primary-subtitle`	Kartın alt başlığını tanımlar.
`.mdui-card-content`	Kart içeriğini tanımlar.
`.mdui-card-actions`	Kartın işlem çubuğunu tanımlar.
`.mdui-card-actions-stacked`	İşlem çubuğunu dikey olarak hizalar.

Alt Gezinme

Chip