Dokumentasi komponen Images yang dapat digunakan dalam NexaUI framework.
Gunakan class nx-img untuk styling dasar gambar.
nx-img
<img src="https://picsum.photos/400/300" class="nx-img" alt="Sample image">
<<div> </div>
Tambahkan class nx-img-rounded untuk membuat sudut gambar menjadi rounded.
nx-img-rounded
<img src="https://picsum.photos/id/237/400/300" class="nx-img nx-img-rounded" alt="Rounded image">
Gunakan class nx-img-circle untuk membuat gambar berbentuk lingkaran.
nx-img-circle
<img src="https://picsum.photos/seed/nexa/300/300" class="nx-img nx-img-circle" alt="Circle image">
Gunakan class nx-img-thumbnail untuk menambahkan border dan padding pada gambar.
nx-img-thumbnail
<img src="https://picsum.photos/id/1015/400/300" class="nx-img nx-img-thumbnail" alt="Thumbnail image">
Class nx-img-fluid membuat gambar menyesuaikan dengan lebar parent container.
nx-img-fluid
<img src="https://picsum.photos/id/1018/800/400" class="nx-img nx-img-fluid" alt="Responsive image">
Tambahkan efek filter pada gambar menggunakan class nx-img-{filter-name}.
nx-img-{filter-name}
<img class="nx-img nx-img-grayscale" src="..." alt="Grayscale image"> <img class="nx-img nx-img-blur" src="..." alt="Blur image"> <img class="nx-img nx-img-sepia" src="..." alt="Sepia image">
Tambahkan efek hover pada gambar menggunakan class nx-img-hover-.
nx-img-hover-
<img class="nx-img nx-img-hover-zoom" src="..." alt="Zoom effect"> <img class="nx-img nx-img-hover-brightness" src="..." alt="Brightness effect"> <img class="nx-img nx-img-hover-rotate" src="..." alt="Rotate effect">
Tambahkan overlay text pada gambar menggunakan class nx-img-overlay.
nx-img-overlay
Deskripsi gambar bisa ditambahkan di sini
<div class="nx-img-overlay-container"> <img src="..." class="nx-img" alt="Overlay image"> <div class="nx-img-overlay"> <h3>Judul Gambar</h3> <p>Deskripsi gambar bisa ditambahkan di sini</p> </div> </div>
Gunakan atribut loading="lazy" untuk mengoptimalkan loading gambar.
loading="lazy"
<img src="..." class="nx-img" loading="lazy" alt="Lazy loaded image">