Ngorei Doc
Ngorei Doc
Dokumentasi komponen Media Object yang dapat digunakan dalam NexaUI framework.
Media object dasar terdiri dari gambar/media di sebelah kiri dan konten di sebelah kanan.
Ini adalah contoh media object dasar dengan gambar di sebelah kiri dan konten di sebelah kanan.
<div class="nx-media">
<img src="https://picsum.photos/id/64/100/100" class="nx-media-img" alt="Media">
<div class="nx-media-body">
<h5>Media Object</h5>
<p>Ini adalah contoh media object dasar dengan gambar di sebelah kiri dan konten di sebelah kanan.</p>
</div>
</div>
<<div>
</div>
Media object dapat diatur posisi vertiknya menggunakan class alignment.
Media object dengan alignment tengah.
<div class="nx-media nx-media-center">
<img src="https://picsum.photos/id/65/100/100" class="nx-media-img" alt="Media">
<div class="nx-media-body">
<h5>Media Object Center</h5>
<p>Media object dengan alignment tengah.</p>
</div>
</div>
<<div>
</div>
Media object tersedia dalam beberapa ukuran: kecil (sm) dan besar (lg).
Media object dengan ukuran gambar kecil (48x48px)
Media object dengan ukuran gambar besar (96x96px)
<div class="nx-media nx-media-sm">
<img src="https://picsum.photos/id/66/100/100" class="nx-media-img" alt="Small Media">
<div class="nx-media-body">...</div>
</div>
<div class="nx-media nx-media-lg">
<img src="https://picsum.photos/id/67/100/100" class="nx-media-img" alt="Large Media">
<div class="nx-media-body">...</div>
</div>
<<div>
</div>
Media object dapat dikustomisasi dengan border dan efek hover.
Menggunakan class nx-media-bordered untuk menambahkan border
Menggunakan class nx-media-hover untuk menambahkan efek hover
<div class="nx-media nx-media-bordered">
<img src="https://picsum.photos/id/68/100/100" class="nx-media-img" alt="Media">
<div class="nx-media-body">...</div>
</div>
<div class="nx-media nx-media-hover">
<img src="https://picsum.photos/id/69/100/100" class="nx-media-img" alt="Media">
<div class="nx-media-body">...</div>
</div>
<<div>
</div>
Media object dapat dibalik posisinya dengan gambar di sebelah kanan menggunakan class nx-media-right.
Ini adalah contoh media object dengan gambar di sebelah kanan.
<div class="nx-media nx-media-right">
<div class="nx-media-body">
<h5>Media Object Reverse</h5>
<p>Ini adalah contoh media object dengan gambar di sebelah kanan.</p>
</div>
<img src="https://picsum.photos/id/70/100/100" class="nx-media-img" alt="Right Media">
</div>
<<div>
</div>
Media object dapat diatur posisi kontennya ke kanan.
Ini adalah contoh media object dengan konten rata kanan.
<div class="nx-media nx-media-text-right">
<img src="image.jpg" class="nx-media-img" alt="Right Position Media">
<div class="nx-media-body">
<h5>Media Object Kanan</h5>
<p>Ini adalah contoh media object dengan konten rata kanan.</p>
</div>
</div>
<<div>
</div>
Media object dapat dibalik posisinya dengan konten di sebelah kiri dan gambar di sebelah kanan menggunakan class nx-media-text-left nx-media-reverse.
Ini adalah contoh media object dengan konten rata kiri dan gambar di kanan.
<div class="nx-media nx-media-text-left nx-media-reverse">
<img src="image.jpg" class="nx-media-img" alt="Left Text Right Image Media">
<div class="nx-media-body">
<h5>Media Object Teks Kiri</h5>
<p>Ini adalah contoh media object dengan konten rata kiri dan gambar di kanan.</p>
</div>
</div>
<<div>
</div>
Media object dapat dibuat bersarang untuk membuat struktur komentar atau diskusi.
Ini adalah komentar utama.
Ini adalah balasan untuk komentar utama.
<div class="nx-media">
<img src="https://picsum.photos/id/73/100/100" class="nx-media-img" alt="Parent Media">
<div class="nx-media-body">
<h5>Komentar Utama</h5>
<p>Ini adalah komentar utama.</p>
<!-- Nested media object -->
<div class="nx-media mt-3">
<img src="https://picsum.photos/id/74/100/100" class="nx-media-img" alt="Nested Media">
<div class="nx-media-body">
<h5>Balasan Komentar</h5>
<p>Ini adalah balasan untuk komentar utama.</p>
</div>
</div>
</div>
</div>
<<div>
</div>
Media object dapat dikombinasikan dengan badge untuk menampilkan status atau notifikasi.
Media object dengan badge untuk menunjukkan status.
<div class="nx-media">
<div class="nx-media-img-wrapper">
<img src="https://picsum.photos/id/75/100/100" class="nx-media-img" alt="Media with Badge">
<span class="nx-badge">New</span>
</div>
<div class="nx-media-body">
<h5>Media dengan Badge</h5>
<p>Media object dengan badge untuk menunjukkan status.</p>
</div>
</div>
<<div>
</div>
Media object dapat digunakan dalam list group untuk menampilkan daftar item.
Deskripsi item pertama.
Deskripsi item kedua.
<div class="nx-list-group">
<div class="nx-media">
<img src="https://picsum.photos/id/76/100/100" class="nx-media-img" alt="List Media 1">
<div class="nx-media-body">
<h5>Item List 1</h5>
<p>Deskripsi item pertama.</p>
</div>
</div>
<div class="nx-media">
<img src="https://picsum.photos/id/77/100/100" class="nx-media-img" alt="List Media 2">
<div class="nx-media-body">
<h5>Item List 2</h5>
<p>Deskripsi item kedua.</p>
</div>
</div>
</div>
<<div>
</div>