NexaUI

Flex Layout System

NexaUI menyediakan sistem layout modern berbasis flexbox yang memungkinkan Anda membuat tata letak responsif dengan mudah dan fleksibel. Sistem ini dirancang untuk memudahkan pengembang dalam membuat layout yang kompleks dengan kode yang minimal.

Kelas-kelas Dasar Flex

Berikut adalah penjelasan kelas-kelas utama dalam sistem Flex:

nx-row: Container utama yang membungkus kolom-kolom. Menggunakan flexbox untuk mengatur layout.
nx-col: Kolom dasar yang lebarnya akan terbagi rata secara otomatis.
nx-[col,sm,md,lg,xl-][1-12]: Kolom dengan lebar spesifik, angka menunjukkan berapa bagian dari 12 kolom total.
nx-offset-[1-12]: Menggeser kolom dari kiri, angka menunjukkan berapa bagian offset dari 12 kolom.

Flex Layout

<div class="nx-row">
    <div class="nx-col-12 nx-sm-6 nx-md-4 nx-lg-3">
        Card produk: 
             - Mobile: 1 kolom (12)
             - Smartphone: 2 kolom (6)
             - Tablet: 3 kolom (4)
             - Desktop: 4 kolom (3)
    </div>
</div>

<Flex class="12 nx-sm-6 nx-md-4 nx-lg-3">
    Card produk: 
         - Mobile: 1 kolom (12)
         - Smartphone: 2 kolom (6)
         - Tablet: 3 kolom (4)
         - Desktop: 4 kolom (3)
</Flex>

Penggunaan Responsif

Berikut contoh penggunaan kelas responsif untuk card produk:

nx-col

Flex dengan Lebar Spesifik

Gunakan kelas nx-1 hingga nx-12 untuk menentukan lebar kolom.

nx-col-4

nx-col-8

nx-col-3

nx-col-6

nx-col-3

Flex Responsif

Flex yang menyesuaikan dengan ukuran layar berbeda

nx-12 nx-md-6 nx-lg-4

nx-12 nx-md-12 nx-lg-4

Flex dengan Offset

Menggunakan offset untuk mengatur jarak antar kolom

nx-4

nx-4 offset-4

Flex untuk Mobile

Gunakan kelas nx-sm-* untuk mengatur layout khusus mobile

Full di mobile, 6 kolom di tablet

6 kolom di mobile, 3 di tablet

Full di mobile, 6 di tablet