Membuat Slider di Blazor menggunakan MudBlazor

Stories on freepik

MudBlazor merupakan salah satu template dan library di Blazor. Salah satu keunggulan dari MudBlazor ialah open source, sehingga memungkinkan setiap orang berkontribusi di GitHub mereka.

Slider pada MudBlazor disebut sebagai carousel, terdapat berbagai macam animasi yang tersedia di carousel MudBlazor. Pada Tulisan ini, kita akan mencontohkan penggunaan salah satu animasi di carousel milik MudBlazor.

Pada project blazor, pada bagian pages/index.razor, letakkan code carousel milik MudBlazor seperti ini

<MudCarousel Class="mud-width-full" Style="height:400px;" TData="object">
</MudCarousel>

MudCarousel merupakan component milik MudBlazor. MudCarousel wajib diisi dengan TData, jika tidak akan terjadi error, pada carousel ini. kitaakan membuat dengan tinggi 400px dan lebar yang maksimal mengikuti dari tempat carousel

Gambar 1 — Penampakan awal MudBlazor

Terlihat pada Gambar 1, bagaimana MudCarousel telah terlihat pada page home, dapat dilihat bahwa carousel telah dibuat. Hal ini ditandai dengan adanya kedua anak panah pada sisi kiri dan sisi kanan. Panah tersebut belum berfungsi karena belum dimasukannya isi dari carousel tersebut.

Langkah selanjutnya ialah membuat isi dari carousel, MudBlazor mempunyai component untuk isi dari carousel, yang diberi nama MudCarouselItem

<MudCarouselItem color="@Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Tertiary" Size="@Size.Large" />
</div>
</MudCarouselItem>

Code diatas merupakan contoh penggunaan MudCarouselItem. Pada MudCarousel terdapat MudIcon. MudIcon merupakan component, jika kita ingin menggunakan icon yang disediakan oleh MudBlazor, seperti gambar 2 dibawah ini.

Gambar 2 — Tampilan carousel yang telah diisi dengan MudCarouselItem

Jika ingin mengganti icon dengan gambar, maka lakukan seperti code dibawah ini, yaitu mengganti MudIcon dengan Img

<MudCarouselItem>
<div class="d-flex" style="height:100%">
<img src="https://support.content.office.net/id-id/media/e8384959-ad1a-1b95-762b-2861496b886e.png" style="width:1000px;"/>
</div>
</MudCarouselItem>

maka tampilan carousel akan menjadi seperti ini

Gambar 3 — Menambahkan image pada Carousel

Gambar 3 terlihat bagaimana, Img berhasil digunakan pada carousel milik MudBlazor, langkah selanjutnya ialah tambahkan gambar lain, agar carousel bisa terlihat dengan baik. Kita akan menambahkan 2 item, masing masing satu icon dan satu gambar, sehingga code akan terlihat seperti ini

<MudCarouselItem>
<div class="d-flex" style="height:100%">
<img src="https://support.content.office.net/id-id/media/e8384959-ad1a-1b95-762b-2861496b886e.png" style="width:1000px;"/>
</div>
</MudCarouselItem>
<MudCarouselItem>
<div class="d-flex" style="height:100%">
<img src="https://www.lintangtech.com/wp-content/uploads/2017/07/Jenis-Jenis-CPU-yang-Ada-Pada-Komputer-Sekarang-Ini-730x480.jpg" style="width:1000px;" />
</div>
</MudCarouselItem>
<MudCarouselItem color="@Color.Primary">
<div class="d-flex" style="height:100%" >
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Secondary" Size="@Size.Large" />
</div>
</MudCarouselItem>
<MudCarouselItem color="@Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Tertiary" Size="@Size.Large" />
</div>
</MudCarouselItem>

sehingga code carousel keseluruhan akan terlihat seperti ini

<MudCarousel Class="mud-width-full" Style="height:400px;" TData="object">
<MudCarouselItem>
<div class="d-flex" style="height:100%">
<img src="https://support.content.office.net/id-id/media/e8384959-ad1a-1b95-762b-2861496b886e.png" style="width:1000px;"/>
</div>
</MudCarouselItem>
<MudCarouselItem>
<div class="d-flex" style="height:100%">
<img src="https://www.lintangtech.com/wp-content/uploads/2017/07/Jenis-Jenis-CPU-yang-Ada-Pada-Komputer-Sekarang-Ini-730x480.jpg" style="width:1000px;" />
</div>
</MudCarouselItem>
<MudCarouselItem color="@Color.Primary">
<div class="d-flex" style="height:100%" >
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Secondary" Size="@Size.Large" />
</div>
</MudCarouselItem>
<MudCarouselItem color="@Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Tertiary" Size="@Size.Large" />
</div>
</MudCarouselItem>
</MudCarousel>

Tampilan akhir dari Carousel yang kita buat seperti dibawah ini, yang terdapat pada Gambar 4

Gambar 4— Hasil akhir

Jika ingin mengembangkan carousel lebih baik lagi, kalian dapat membaca dokumentasi pada MudBlazor. Pada Dokumentasi terdapat berbagai macam class yang dapat mempercantik carousel.

Terima kasih telah membaca tulisan, mohon maaf apabila ada kesalahan dalam penulisan. Apabila ada saran dan komentar bisa memberi komentar dibawah

Referensi:

MudBlazor - Blazor Component Library

Referensi Gambar:

Free Vector | Internet day concept illustration

https://www.lintangtech.com/wp-content/uploads/2017/07/Jenis-Jenis-CPU-yang-Ada-Pada-Komputer-Sekarang-Ini-730x480.jpg

https://support.content.office.net/id-id/media/e8384959-ad1a-1b95-762b-2861496b886e.png