Ngorei Doc
v.4.0.2
search
CTRL K

Utility Classes

Ngorei Framework menyediakan sistem Utility Classes yang powerful untuk memudahkan pengembangan antarmuka pengguna (UI). Utility Classes ini merupakan kumpulan class CSS yang telah dioptimalkan dan siap pakai, dirancang untuk memberikan kontrol penuh atas styling elemen HTML. Dengan menggunakan pendekatan "utility-first", developer dapat dengan cepat membangun tampilan yang konsisten tanpa perlu menulis CSS kustom. Setiap utility class memiliki fungsi spesifik dan nama yang intuitif, sehingga mempercepat proses development dan menjaga kode tetap bersih serta mudah dipelihara.

Menggunakan Utility Classes

  1. Penulisan yang Lebih Singkat - Tidak perlu menulis CSS terpisah, cukup tambahkan class pada elemen HTML
  2. Konsistensi - Memastikan penggunaan style yang konsisten di seluruh aplikasi
  3. Fleksibilitas - Mudah dikombinasikan untuk membuat tampilan yang diinginkan
  4. Performa - Mengurangi ukuran file CSS karena tidak perlu menulis style berulang kali
  5. Maintainability - Lebih mudah dalam maintenance karena style terpusat dan terstandarisasi
  6. Rapid Development - Mempercepat proses development dengan class yang sudah siap pakai

Berikut adalah daftar utility classes yang tersedia dalam fungsi :

Prefix Properti CSS Contoh Penggunaan Hasil
tx text-align class="tx-center" text-align: center;
position, pos position class="position-relative" position: relative;
w width class="" style="width:100px;" width: 100px;
h height class="h-200" height: 200px;
min-w min-width class="min-w-100" style="width:100px;" style="width:100px;" min-width: 100px;
min-h min-height class="min-h-100" min-height: 100px;
max-w max-width class="max-w-100" style="width:100px;" style="width:100px;" max-width: 100px;
max-h max-height class="max-h-100" max-height: 100px;
m margin class="m-10" margin: 10px;
mt margin-top class="mt-10" margin-top: 10px;
mb margin-bottom class="mb-10" margin-bottom: 10px;
ml margin-left class="ml-10" margin-left: 10px;
mr margin-right class="mr-10" margin-right: 10px;
mx margin-left margin-right class="mx-10" margin-left: 10px; margin-right: 10px;
my margin-top margin-bottom class="my-10" margin-top: 10px; margin-bottom: 10px;
p padding class="p-10" padding: 10px;
pt padding-top class="pt-10" padding-top: 10px;
pb padding-bottom class="pb-10" padding-bottom: 10px;
pl padding-left class="pl-10" padding-left: 10px;
pr padding-right class="pr-10" padding-right: 10px;
px padding-left padding-right class="px-10" padding-left: 10px; padding-right: 10px;
py padding-top padding-bottom class="py-10" padding-top: 10px; padding-bottom: 10px;
fs font-size class="fs-16" font-size: 16px;
fw font-weight class="fw-bold" font-weight: bold;
lh line-height class="lh-1.5" line-height: 1.5;
br border-radius class="br-10" border-radius: 10px;
bw border-width class="bw-2" border-width: 2px;
op opacity class="op-50" opacity: 0.5;
z z-index class="z-10" z-index: 10;
bg background-color class="bg-primary" background-color: #007bff;
text color class="text-primary" color: #007bff;

Penggunaan Kode Warna Hex Langsung

Format Penulisan Contoh Hasil Keterangan
class="#[kode hex]" style="color:#007bff" style="color: #007bff;" Mengatur warna teks langsung dengan kode hex
class="b#[kode hex]" style="background-color:#007bff" style="background-color: #007bff;" Mengatur warna background langsung dengan kode hex